Skip to content

M
MyOpen

夜猫逐梦 / MyOpen

通知 2
Star 0
Fork 1
M
MyOpen
提交 37dc6a0f 编写于 作者: S sw_pc
浏览文件
操作

leaflet教程代码提交

上级 44ccab05
隐藏空白更改
内联 并排
Showing with 896 addition and 14 deletion
leaflet/common/data.js
浏览文件 @ 37dc6a0f
...@@ -135,5 +135,50 @@ export default { ...@@ -135,5 +135,50 @@ export default {
} }
} }
] ]
},
// Popup自定义查询弹出窗
geo4d12: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
NAME: '西北五环',
URL:
'https://lbsugc.cdn.bcebos.com/images/H6609c93d70cf3bc772e13cf7de00baa1cc112acc.jpg',
DESC: '这是一段很长的描述很长的描述很长的描述很长的描述很长的描述'
},
geometry: {
type: 'Point',
coordinates: [116.22196197509766, 39.99527080014614]
}
},
{
type: 'Feature',
properties: {
NAME: '东五环',
URL:
'https://lbsugc.cdn.bcebos.com/images/H7e3e6709c93d70cfd71b5b16f7dcd100bba12bcc.jpg',
DESC: '这又是一段很长的描述很长的描述很长的描述很长的描述很长的描述'
},
geometry: {
type: 'Point',
coordinates: [116.53816223144531, 39.9034155951341]
}
},
{
type: 'Feature',
properties: {
NAME: '南五环',
URL:
'https://poi-pic.cdn.bcebos.com/d0bf12c973c86ccf2eb79d337bdeb860.jpg',
DESC: '这还是一段很长的描述很长的描述很长的描述很长的描述很长的描述'
},
geometry: {
type: 'Point',
coordinates: [116.40151977539062, 39.7631584037253]
}
}
]
} }
} }
\ No newline at end of file
leaflet/d10/index.html 0 → 100644
浏览文件 @ 37dc6a0f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
<link rel="stylesheet" href="./style.css"></link>
<script src="../lib/inline-module/index.js"></script>
<!-- 1. 添加高德地图 -->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=替换为您的高德地图key"
dddd="756f6e41e22bb034162c0b6b01e2ed3f000"
></script>
<title>leaflet学习</title>
</head>
<body>
<!-- 2. 添加leaflet地图div、高德地图div元素 -->
<!-- leaflet地图div：层级为2（高于高德地图）、背景透明 -->
<div
id="map"
style="width: 100%; height: 100%; position: absolute; z-index: 2; background: transparent;"
></div>
<!-- 高德地图div：层级为1（低于leaflet地图） -->
<div
id="amap"
style="width: 100%; height: 100%; position: absolute; z-index: 1; "
></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
\ No newline at end of file
leaflet/d10/index.js 0 → 100644
浏览文件 @ 37dc6a0f
import { Map, Canvas, Marker, Icon, CircleMarker, Polyline, Polygon } from '../lib/leaflet/leaflet-src.esm.js';
class MapX {
run() {
// 3. 创建高德Map，参数默认即可
const amap = new AMap.Map('amap', {
fadeOnZoom: false,
navigationMode: 'classic',
optimizePanAnimation: false,
animateEnable: false,
dragEnable: false,
zoomEnable: false,
resizeEnable: true,
doubleClickZoom: false,
keyboardEnable: false,
scrollWheel: false,
expandZoomRange: true,
zooms: [1, 20],
// 地图样式，可根据自己后台配置
mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
features: ['road', 'point', 'bg'],
viewMode: '2D'
});
// 4.创建Leaflet Map，绑定消息：放大缩小、移动
// const map = new Map('map')
// 4.1 使用Canvas构造map
const map = new Map('map', {
renderer: new Canvas()
});
map.on('zoom', evt => {
amap.setZoom(evt.target.getZoom());
});
map.on('move', evt => {
const pt = evt.target.getCenter();
amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
});
// 5. 设置中心点、缩放级别
map.setView([39.909186, 116.397411], 10);
// 6. 增加点线面数据
//点 图标
new Marker([39.909186, 116.397411], {
icon: new Icon({
iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
iconAnchor: [12, 41]
})
}).addTo(map);
//点 圆点
new CircleMarker([39.909186, 116.457411]).addTo(map);
//线
new Polyline([[39.909186, 116.457411], [39.999186, 116.457411]]).addTo(map);
//面
new Polygon([
[39.999186, 116.507411],
[39.999186, 116.407411],
[40.099186, 116.407411],
[40.099186, 116.507411]
]).addTo(map);
}
}
let map = new MapX()
map.run()
leaflet/d10/style.css 0 → 100644
浏览文件 @ 37dc6a0f
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
h1,
h2 {
font-family: Lato;
}
leaflet/d11/index.html 0 → 100644
浏览文件 @ 37dc6a0f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
<link rel="stylesheet" href="./style.css"></link>
<script src="../lib/inline-module/index.js"></script>
<!-- 1. 添加高德地图 -->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=替换为您的高德地图key"
dddd="756f6e41e22bb034162c0b6b01e2ed3f000"
></script>
<title>leaflet学习</title>
</head>
<body>
<!-- 2. 添加leaflet地图div、高德地图div元素 -->
<!-- leaflet地图div：层级为2（高于高德地图）、背景透明 -->
<div
id="map"
style="width: 100%; height: 100%; position: absolute; z-index: 2; background: transparent;"
></div>
<!-- 高德地图div：层级为1（低于leaflet地图） -->
<div
id="amap"
style="width: 100%; height: 100%; position: absolute; z-index: 1; "
></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
\ No newline at end of file
leaflet/d11/index.js 0 → 100644
浏览文件 @ 37dc6a0f
import { Map, Canvas, Marker, Icon, CircleMarker, Polyline, Polygon } from '../lib/leaflet/leaflet-src.esm.js';
class MapX {
run() {
// 3. 创建高德Map，参数默认即可
const amap = new AMap.Map('amap', {
fadeOnZoom: false,
navigationMode: 'classic',
optimizePanAnimation: false,
animateEnable: false,
dragEnable: false,
zoomEnable: false,
resizeEnable: true,
doubleClickZoom: false,
keyboardEnable: false,
scrollWheel: false,
expandZoomRange: true,
zooms: [1, 20],
// 地图样式，可根据自己后台配置
mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
features: ['road', 'point', 'bg'],
viewMode: '2D'
});
// 4.创建Leaflet Map，绑定消息：放大缩小、移动
const map = new Map('map')
// 4.1 使用Canvas构造map
// const map = new Map('map', {
// renderer: new Canvas()
// });
map.on('zoom', evt => {
amap.setZoom(evt.target.getZoom());
});
map.on('move', evt => {
const pt = evt.target.getCenter();
amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
});
// 5. 设置中心点、缩放级别
map.setView([39.909186, 116.397411], 10);
// 6. 增加myPane、设置zIndex
map.createPane('myPane');
map.getPane('myPane').style.zIndex = 601;
// 7. 增加g1、g2两个Polygon，通过指定 pane 属性，设置图层zIndex
// （默认是通过增加的顺序决定掩盖层的，后加入的在上层）
const g1 = new Polygon(
[
[39.999186, 116.507411],
[39.999186, 116.407411],
[40.099186, 116.407411],
[40.099186, 116.507411]
],
{
stroke: false,
fillColor: 'blue',
fillOpacity: 1,
// pane: 'myPane'
}
);
g1.addTo(map);
const g2 = new Polygon(
[
[39.959186, 116.557411],
[39.959186, 116.457411],
[40.059186, 116.457411],
[40.059186, 116.557411]
],
{
stroke: false,
fillColor: 'red',
fillOpacity: 1
}
);
g2.addTo(map);
// g2.bringToFront();
}
}
let map = new MapX()
map.run()
leaflet/d11/style.css 0 → 100644
浏览文件 @ 37dc6a0f
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
h1,
h2 {
font-family: Lato;
}
leaflet/d12/index.html 0 → 100644
浏览文件 @ 37dc6a0f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
<link rel="stylesheet" href="./style.css"></link>
<script src="../lib/inline-module/index.js"></script>
<!-- 1. 添加高德地图 -->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=替换为您的高德地图key"
dddd="756f6e41e22bb034162c0b6b01e2ed3f000"
></script>
<title>leaflet学习</title>
</head>
<body>
<!-- 2. 添加leaflet地图div、高德地图div元素 -->
<!-- leaflet地图div：层级为2（高于高德地图）、背景透明 -->
<div
id="map"
style="width: 100%; height: 100%; position: absolute; z-index: 2; background: transparent;"
></div>
<!-- 高德地图div：层级为1（低于leaflet地图） -->
<div
id="amap"
style="width: 100%; height: 100%; position: absolute; z-index: 1; "
></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
\ No newline at end of file
leaflet/d12/index.js 0 → 100644
浏览文件 @ 37dc6a0f
import { Map, Marker, Icon, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
import dataCommon from '../common/data.js'
class MapX {
init() {
// 3. 创建高德Map，参数默认即可
const amap = new AMap.Map('amap', {
fadeOnZoom: false,
navigationMode: 'classic',
optimizePanAnimation: false,
animateEnable: false,
dragEnable: false,
zoomEnable: false,
resizeEnable: true,
doubleClickZoom: false,
keyboardEnable: false,
scrollWheel: false,
expandZoomRange: true,
zooms: [1, 20],
// 地图样式，可根据自己后台配置
mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
features: ['road', 'point', 'bg'],
viewMode: '2D'
});
// 4.创建Leaflet Map，绑定消息：放大缩小、移动
const map = new Map('map')
// 4.1 使用Canvas构造map
// const map = new Map('map', {
// renderer: new Canvas()
// });
map.on('zoom', evt => {
amap.setZoom(evt.target.getZoom());
});
map.on('move', evt => {
const pt = evt.target.getCenter();
amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
});
// 5. 设置中心点、缩放级别
map.setView([39.909186, 116.397411], 10);
this.map = map
}
run() {
this.init()
// 6. 增加myPane、设置zIndex
const glayer5 = new GeoJSON(dataCommon.geo4d12, {
pointToLayer: (geoJsonPoint, latlng) => {
return new Marker(latlng, {
icon: new Icon({
iconUrl: 'data:image/svg+xml,' + encodeURIComponent(dataCommon.svgRed),
iconSize: [32, 32],
iconAnchor: [16, 32]
})
});
}
});
glayer5.addTo(this.map).bindPopup(layer => {
return `<div style="height: 150px; width: 300px; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr">
<img style="height: 100%; width: 100%;" src=${
layer.feature.properties['URL']
}>
<div style="display: grid; grid-gap: 10px; grid-template-rows: auto 1fr">
<span>名称: ${layer.feature.properties['NAME']}</span>
<span>描述: ${layer.feature.properties['DESC']}</span>
</div>
</div>`;
});
}
}
let map = new MapX()
map.run()
leaflet/d12/style.css 0 → 100644
浏览文件 @ 37dc6a0f
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
h1,
h2 {
font-family: Lato;
}
leaflet/d13/index.html 0 → 100644
浏览文件 @ 37dc6a0f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
<link rel="stylesheet" href="./style.css"></link>
<script src="../lib/inline-module/index.js"></script>
<!-- 1. 添加高德地图 -->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=替换为您的高德地图key"
dddd="756f6e41e22bb034162c0b6b01e2ed3f000"
></script>
<title>leaflet学习</title>
</head>
<body>
<!-- 2. 添加leaflet地图div、高德地图div元素 -->
<!-- leaflet地图div：层级为2（高于高德地图）、背景透明 -->
<div
id="map"
style="width: 100%; height: 100%; position: absolute; z-index: 2; background: transparent;"
></div>
<!-- 高德地图div：层级为1（低于leaflet地图） -->
<div
id="amap"
style="width: 100%; height: 100%; position: absolute; z-index: 1; "
></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
\ No newline at end of file
leaflet/d13/index.js 0 → 100644
浏览文件 @ 37dc6a0f
import { Map, CircleMarker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
import dataCommon from '../common/data.js'
import { LabelTextCollision } from './label.js';
class MapX {
init() {
// 3. 创建高德Map，参数默认即可
const amap = new AMap.Map('amap', {
fadeOnZoom: false,
navigationMode: 'classic',
optimizePanAnimation: false,
animateEnable: false,
dragEnable: false,
zoomEnable: false,
resizeEnable: true,
doubleClickZoom: false,
keyboardEnable: false,
scrollWheel: false,
expandZoomRange: true,
zooms: [1, 20],
// 地图样式，可根据自己后台配置
mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
features: ['road', 'point', 'bg'],
viewMode: '2D'
});
// 4.创建Leaflet Map，绑定消息：放大缩小、移动
// const map = new Map('map')
// 4.1 使用Canvas构造map
// const map = new Map('map', {
// renderer: new Canvas()
// });
const map = new Map('map', {
renderer: new LabelTextCollision({
collisionFlg: true
})
})
map.on('zoom', evt => {
amap.setZoom(evt.target.getZoom());
});
map.on('move', evt => {
const pt = evt.target.getCenter();
amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
});
// 5. 设置中心点、缩放级别
map.setView([39.909186, 116.397411], 10);
this.map = map
}
run() {
this.init()
// 6. 创建图层glayer5、添加自定义弹窗bindPopup
const glayer5 = new GeoJSON(dataCommon.geo4d12, {
pointToLayer: (geoJsonPoint, latlng) => {
console.log(geoJsonPoint.properties['NAME'])
return new CircleMarker(latlng, {
text: geoJsonPoint.properties['NAME']
}); //.bindTooltip(geoJsonPoint.properties['NAME'], { permanent: true });
}
});
glayer5.addTo(this.map)
}
}
let map = new MapX()
map.run()
leaflet/d13/label.js 0 → 100644
浏览文件 @ 37dc6a0f
import {
Canvas,
Util,
DomUtil,
Browser,
DomEvent,
Renderer,
Point,
Bounds
} from '../lib/leaflet/leaflet-src.esm.js';
export var LabelTextCollision = Canvas.extend({
options: {
/**
* Collision detection
*/
collisionFlg: true
},
initialize: function(options) {
//options = Util.setOptions(this, options);
Renderer.prototype.initialize.call(this, options);
},
_handleMouseHover: function(e, point) {
var id, layer;
for (id in this._drawnLayers) {
layer = this._drawnLayers[id];
if (layer.options.interactive && layer._containsPoint(point)) {
DomUtil.addClass(this._containerText, 'leaflet-interactive'); // change cursor
this._fireEvent([layer], e, 'mouseover');
this._hoveredLayer = layer;
}
}
if (this._hoveredLayer) {
this._fireEvent([this._hoveredLayer], e);
}
},
_handleMouseOut: function(e, point) {
var layer = this._hoveredLayer;
if (layer && (e.type === 'mouseout' || !layer._containsPoint(point))) {
// if we're leaving the layer, fire mouseout
DomUtil.removeClass(this._containerText, 'leaflet-interactive');
this._fireEvent([layer], e, 'mouseout');
this._hoveredLayer = null;
}
},
_updateTransform: function(center, zoom) {
Canvas.prototype._updateTransform.call(this, center, zoom);
var scale = this._map.getZoomScale(zoom, this._zoom),
position = DomUtil.getPosition(this._container),
viewHalf = this._map.getSize().multiplyBy(0.5 + this.options.padding),
currentCenterPoint = this._map.project(this._center, zoom),
destCenterPoint = this._map.project(center, zoom),
centerOffset = destCenterPoint.subtract(currentCenterPoint),
topLeftOffset = viewHalf
.multiplyBy(-scale)
.add(position)
.add(viewHalf)
.subtract(centerOffset);
if (Browser.any3d) {
DomUtil.setTransform(this._containerText, topLeftOffset, scale);
} else {
DomUtil.setPosition(this._containerText, topLeftOffset);
}
},
_initContainer: function(options) {
Canvas.prototype._initContainer.call(this);
this._containerText = document.createElement('canvas');
DomEvent.on(
this._containerText,
'mousemove',
Util.throttle(this._onMouseMove, 32, this),
this
)
.on(
this._containerText,
'click dblclick mousedown mouseup contextmenu',
this._onClick,
this
)
.on(this._containerText, 'mouseout', this._handleMouseOut, this);
this._ctxLabel = this._containerText.getContext('2d');
DomUtil.addClass(this._containerText, 'leaflet-zoom-animated');
this.getPane().appendChild(this._containerText);
},
_update: function() {
// textList
this._textList = [];
Renderer.prototype._update.call(this);
var b = this._bounds,
container = this._containerText,
size = b.getSize(),
m = Browser.retina ? 2 : 1;
DomUtil.setPosition(container, b.min);
// set canvas size (also clearing it); use double size on retina
container.width = m * size.x;
container.height = m * size.y;
container.style.width = size.x + 'px';
container.style.height = size.y + 'px';
// display text on the whole surface
container.style.zIndex = '4';
this._container.style.zIndex = '3';
if (Browser.retina) {
this._ctxLabel.scale(2, 2);
}
// translate so we use the same path coordinates after canvas
// element moves
this._ctxLabel.translate(-b.min.x, -b.min.y);
Canvas.prototype._update.call(this);
},
_updatePoly: function(layer, closed) {
Canvas.prototype._updatePoly.call(this, layer, closed);
this._text(this._ctxLabel, layer);
},
_updateCircle: function(layer) {
Canvas.prototype._updateCircle.call(this, layer);
this._text(this._ctxLabel, layer);
},
_text: function(ctx, layer) {
if (layer.options.text != undefined) {
ctx.globalAlpha = 1;
var p = layer._point;
var textPoint;
if (p == undefined) {
// polygon or polyline
if (layer._parts.length == 0 || layer._parts[0].length == 0) {
return;
}
p = this._getCenter(layer._parts[0]);
}
// label bounds offset
var offsetX = 0;
var offsetY = 0;
/**
* TODO setting for custom font
*/
ctx.lineWidth = 4.0;
ctx.font = "16px 'Meiryo'";
// Collision detection
var textWidth = ctx.measureText(layer.options.text).width + p.x; // + offsetX;
var textHeight = p.y + offsetY + 20;
var bounds = new Bounds(
new Point(p.x + offsetX, p.y + offsetY),
new Point(textWidth, textHeight)
);
if (this.options.collisionFlg) {
for (var index in this._textList) {
var pointBounds = this._textList[index];
if (pointBounds.intersects(bounds)) {
return;
}
}
}
this._textList.push(bounds);
ctx.strokeStyle = 'white';
ctx.strokeText(layer.options.text, p.x + offsetX, p.y + offsetY);
if (layer.options.textColor == undefined) {
ctx.fillStyle = 'blue';
} else {
ctx.fillStyle = layer.options.textColor;
}
ctx.fillText(layer.options.text, p.x + offsetX, p.y + offsetY);
}
},
_getCenter: function(points) {
var i,
halfDist,
segDist,
dist,
p1,
p2,
ratio,
len = points.length;
if (!len) {
return null;
}
// polyline centroid algorithm; only uses the first ring if
// there are multiple
for (i = 0, halfDist = 0; i < len - 1; i++) {
halfDist += points[i].distanceTo(points[i + 1]) / 2;
}
// The line is so small in the current view that all points are
// on the same pixel.
if (halfDist === 0) {
return points[0];
}
for (i = 0, dist = 0; i < len - 1; i++) {
p1 = points[i];
p2 = points[i + 1];
segDist = p1.distanceTo(p2);
dist += segDist;
if (dist > halfDist) {
ratio = (dist - halfDist) / segDist;
var resutl = [
p2.x - ratio * (p2.x - p1.x),
p2.y - ratio * (p2.y - p1.y)
];
return new Point(resutl[0], resutl[1]);
}
}
}
});
leaflet/d13/style.css 0 → 100644
浏览文件 @ 37dc6a0f
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
h1,
h2 {
font-family: Lato;
}
leaflet/d9/index.html 0 → 100644
浏览文件 @ 37dc6a0f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
<link rel="stylesheet" href="./style.css"></link>
<script src="../lib/inline-module/index.js"></script>
<!-- 1. 添加高德地图 -->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=替换为您的高德地图key"
dddd="756f6e41e22bb034162c0b6b01e2ed3f000"
></script>
<title>leaflet学习</title>
</head>
<body>
<!-- 2. 添加leaflet地图div、高德地图div元素 -->
<!-- leaflet地图div：层级为2（高于高德地图）、背景透明 -->
<div
id="map"
style="width: 100%; height: 100%; position: absolute; z-index: 2; background: transparent;"
></div>
<!-- 高德地图div：层级为1（低于leaflet地图） -->
<div
id="amap"
style="width: 100%; height: 100%; position: absolute; z-index: 1; "
></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
\ No newline at end of file
leaflet/d9/index.js 0 → 100644
浏览文件 @ 37dc6a0f
import { Map } from '../lib/leaflet/leaflet-src.esm.js';
class MapX {
run() {
// 3. 创建高德Map，参数默认即可
const amap = new AMap.Map('amap', {
fadeOnZoom: false,
navigationMode: 'classic',
optimizePanAnimation: false,
animateEnable: false,
dragEnable: false,
zoomEnable: false,
resizeEnable: true,
doubleClickZoom: false,
keyboardEnable: false,
scrollWheel: false,
expandZoomRange: true,
zooms: [1, 20],
// 地图样式，可根据自己后台配置
mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
features: ['road', 'point', 'bg'],
viewMode: '2D'
});
// 4.创建Leaflet Map，绑定消息：放大缩小、移动
const map = new Map('map');
map.on('zoom', evt => {
amap.setZoom(evt.target.getZoom());
});
map.on('move', evt => {
const pt = evt.target.getCenter();
amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
});
// 5. 设置中心点、缩放级别
map.setView([39.909186, 116.397411], 10);
}
}
let map = new MapX()
map.run()
leaflet/d9/style.css 0 → 100644
浏览文件 @ 37dc6a0f
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
h1,
h2 {
font-family: Lato;
}
leaflet/index.html
浏览文件 @ 37dc6a0f
...@@ -4,24 +4,26 @@ ...@@ -4,24 +4,26 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Leaflet 学习笔记</title>
</head> </head>
<body> <body style="background-color: antiquewhite;">
<h1>leaflet</h1> <h1 style="color: tomato;">leaflet</h1>
<li><a href="d1/index.html">d1. 初见：Map、TileLayer</a></li> <li><a href="d1/index.html">d1. 初见：Map、TileLayer</a></li>
<li><a href="d2/index.html">d2. 多地图切换：Control.Layers</a></li> <li><a href="d2/index.html">d2. 多地图切换（高德+天地图）：Control.Layers</a></li>
<li><a href="d3/index.html">d3. 标记：Marker、Icon</a></li> <li><a href="d3/index.html">d3. 标记：Marker、Icon</a></li>
<li><a href="d4/index.html">d4. GeoJson数据导入：GeoJSON</a></li> <li><a href="d4/index.html">d4. GeoJson数据导入：GeoJSON</a></li>
<li><a href="d5/index.html">d5. 自定义控制层、多图层及其控制</a></li> <li><a href="d5/index.html">d5. 自定义控制层、多图层及其控制</a></li>
<li><a href="d6/index.html">d6. GeoJson数据导入：GeoJSON</a></li> <li><a href="d6/index.html">d6. 调整图层渲染样式renderer</a></li>
<li><a href="d7/index.html">d7. GeoJson数据导入：GeoJSON</a></li> <li><a href="d7/index.html">d7. 添加图层标注及交互label+tooltip+popup</a></li>
<li><a href="d8/index.html">d8. GeoJson数据导入：GeoJSON</a></li> <li><a href=""><del>d8. 小节</del></a></li>
<li><a href="d9/index.html">d9. GeoJson数据导入：GeoJSON</a></li> <li><a href="d9/index.html">d9. 耦合高德API</a></li>
<li><a href="d10/index.html">d10. GeoJson数据导入：GeoJSON</a></li> <li><a href="d10/index.html">d10. Canvas vs SVG</a></li>
<li><a href="d11/index.html">d11. GeoJson数据导入：GeoJSON</a></li> <li><a href="d11/index.html">d11. Pane以及图层顺序</a></li>
<li><a href="d12/index.html">d12. GeoJson数据导入：GeoJSON</a></li> <li><a href="d12/index.html">d12. Popup自定义查询弹出窗</a></li>
<li><a href="d13/index.html">d13. GeoJson数据导入：GeoJSON</a></li> <li><a href="d13/index.html">d13. Label冲突检测</a></li>
<li><a href="d14/index.html">d14. GeoJson数据导入：GeoJSON</a></li> <li><a href=""><del>d14. Cluster点聚合</del></a></li>
<li><a href="d15/index.html">d15. GeoJson数据导入：GeoJSON</a></li> <li><a href=""><del>d15. Editor编辑要素</del></a></li>
<li><a href=""><del>d16. 耦合d3</del></a></li>
<li><a href=""><del>d17. 框架下开发--以Angular为例</del></a></li>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或