From 37dc6a0f09c129bd44301c504a79d453ffe60cf9 Mon Sep 17 00:00:00 2001 From: sw_pc Date: Thu, 23 Nov 2023 17:47:01 +0800 Subject: [PATCH] =?UTF-8?q?leaflet=E6=95=99=E7=A8=8B=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- leaflet/common/data.js | 45 ++++++++ leaflet/d10/index.html | 35 ++++++ leaflet/d10/index.js | 73 +++++++++++++ leaflet/d10/style.css | 12 ++ leaflet/d11/index.html | 35 ++++++ leaflet/d11/index.js | 88 +++++++++++++++ leaflet/d11/style.css | 12 ++ leaflet/d12/index.html | 35 ++++++ leaflet/d12/index.js | 79 ++++++++++++++ leaflet/d12/style.css | 12 ++ leaflet/d13/index.html | 35 ++++++ leaflet/d13/index.js | 72 ++++++++++++ leaflet/d13/label.js | 243 +++++++++++++++++++++++++++++++++++++++++ leaflet/d13/style.css | 12 ++ leaflet/d9/index.html | 35 ++++++ leaflet/d9/index.js | 45 ++++++++ leaflet/d9/style.css | 12 ++ leaflet/index.html | 30 ++--- 18 files changed, 896 insertions(+), 14 deletions(-) create mode 100644 leaflet/d10/index.html create mode 100644 leaflet/d10/index.js create mode 100644 leaflet/d10/style.css create mode 100644 leaflet/d11/index.html create mode 100644 leaflet/d11/index.js create mode 100644 leaflet/d11/style.css create mode 100644 leaflet/d12/index.html create mode 100644 leaflet/d12/index.js create mode 100644 leaflet/d12/style.css create mode 100644 leaflet/d13/index.html create mode 100644 leaflet/d13/index.js create mode 100644 leaflet/d13/label.js create mode 100644 leaflet/d13/style.css create mode 100644 leaflet/d9/index.html create mode 100644 leaflet/d9/index.js create mode 100644 leaflet/d9/style.css diff --git a/leaflet/common/data.js b/leaflet/common/data.js index 3a6a661..571996a 100644 --- a/leaflet/common/data.js +++ b/leaflet/common/data.js @@ -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 diff --git a/leaflet/d10/index.html b/leaflet/d10/index.html new file mode 100644 index 0000000..34cd3f8 --- /dev/null +++ b/leaflet/d10/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + leaflet学习 + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/leaflet/d10/index.js b/leaflet/d10/index.js new file mode 100644 index 0000000..7deffbe --- /dev/null +++ b/leaflet/d10/index.js @@ -0,0 +1,73 @@ + +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() diff --git a/leaflet/d10/style.css b/leaflet/d10/style.css new file mode 100644 index 0000000..5ed077f --- /dev/null +++ b/leaflet/d10/style.css @@ -0,0 +1,12 @@ + +html, +body { + width: 100%; + height: 100%; + margin: 0px; +} + +h1, +h2 { + font-family: Lato; +} diff --git a/leaflet/d11/index.html b/leaflet/d11/index.html new file mode 100644 index 0000000..34cd3f8 --- /dev/null +++ b/leaflet/d11/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + leaflet学习 + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/leaflet/d11/index.js b/leaflet/d11/index.js new file mode 100644 index 0000000..1ecb428 --- /dev/null +++ b/leaflet/d11/index.js @@ -0,0 +1,88 @@ + +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() diff --git a/leaflet/d11/style.css b/leaflet/d11/style.css new file mode 100644 index 0000000..5ed077f --- /dev/null +++ b/leaflet/d11/style.css @@ -0,0 +1,12 @@ + +html, +body { + width: 100%; + height: 100%; + margin: 0px; +} + +h1, +h2 { + font-family: Lato; +} diff --git a/leaflet/d12/index.html b/leaflet/d12/index.html new file mode 100644 index 0000000..34cd3f8 --- /dev/null +++ b/leaflet/d12/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + leaflet学习 + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/leaflet/d12/index.js b/leaflet/d12/index.js new file mode 100644 index 0000000..5730ecb --- /dev/null +++ b/leaflet/d12/index.js @@ -0,0 +1,79 @@ + +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 `
+ +
+ 名称: ${layer.feature.properties['NAME']} + 描述: ${layer.feature.properties['DESC']} +
+
`; + }); + } +} + +let map = new MapX() +map.run() diff --git a/leaflet/d12/style.css b/leaflet/d12/style.css new file mode 100644 index 0000000..5ed077f --- /dev/null +++ b/leaflet/d12/style.css @@ -0,0 +1,12 @@ + +html, +body { + width: 100%; + height: 100%; + margin: 0px; +} + +h1, +h2 { + font-family: Lato; +} diff --git a/leaflet/d13/index.html b/leaflet/d13/index.html new file mode 100644 index 0000000..34cd3f8 --- /dev/null +++ b/leaflet/d13/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + leaflet学习 + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/leaflet/d13/index.js b/leaflet/d13/index.js new file mode 100644 index 0000000..4f21bab --- /dev/null +++ b/leaflet/d13/index.js @@ -0,0 +1,72 @@ + +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() diff --git a/leaflet/d13/label.js b/leaflet/d13/label.js new file mode 100644 index 0000000..99b2534 --- /dev/null +++ b/leaflet/d13/label.js @@ -0,0 +1,243 @@ +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]); + } + } + } +}); diff --git a/leaflet/d13/style.css b/leaflet/d13/style.css new file mode 100644 index 0000000..5ed077f --- /dev/null +++ b/leaflet/d13/style.css @@ -0,0 +1,12 @@ + +html, +body { + width: 100%; + height: 100%; + margin: 0px; +} + +h1, +h2 { + font-family: Lato; +} diff --git a/leaflet/d9/index.html b/leaflet/d9/index.html new file mode 100644 index 0000000..34cd3f8 --- /dev/null +++ b/leaflet/d9/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + leaflet学习 + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/leaflet/d9/index.js b/leaflet/d9/index.js new file mode 100644 index 0000000..2d49bce --- /dev/null +++ b/leaflet/d9/index.js @@ -0,0 +1,45 @@ + +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() diff --git a/leaflet/d9/style.css b/leaflet/d9/style.css new file mode 100644 index 0000000..5ed077f --- /dev/null +++ b/leaflet/d9/style.css @@ -0,0 +1,12 @@ + +html, +body { + width: 100%; + height: 100%; + margin: 0px; +} + +h1, +h2 { + font-family: Lato; +} diff --git a/leaflet/index.html b/leaflet/index.html index 07199e0..5575e10 100644 --- a/leaflet/index.html +++ b/leaflet/index.html @@ -4,24 +4,26 @@ - Document + Leaflet 学习笔记 - -

leaflet

+ +

leaflet

  • d1. 初见：Map、TileLayer
    • -
  • d2. 多地图切换：Control.Layers
    • +
  • d2. 多地图切换（高德+天地图）：Control.Layers
  • d3. 标记：Marker、Icon
  • d4. GeoJson数据导入：GeoJSON
  • d5. 自定义控制层、多图层及其控制
    • -
  • d6. GeoJson数据导入：GeoJSON
    • -
  • d7. GeoJson数据导入：GeoJSON
    • -
  • d8. GeoJson数据导入：GeoJSON
    • -
  • d9. GeoJson数据导入：GeoJSON
    • -
  • d10. GeoJson数据导入：GeoJSON
    • -
  • d11. GeoJson数据导入：GeoJSON
    • -
  • d12. GeoJson数据导入：GeoJSON
    • -
  • d13. GeoJson数据导入：GeoJSON
    • -
  • d14. GeoJson数据导入：GeoJSON
    • -
  • d15. GeoJson数据导入：GeoJSON
    • +
  • d6. 调整图层渲染样式renderer
    • +
  • d7. 添加图层标注及交互label+tooltip+popup
    • +
  • d8. 小节
    • +
  • d9. 耦合高德API
    • +
  • d10. Canvas vs SVG
    • +
  • d11. Pane以及图层顺序
    • +
  • d12. Popup自定义查询弹出窗
    • +
  • d13. Label冲突检测
    • +
  • d14. Cluster点聚合
    • +
  • d15. Editor编辑要素
    • +
  • d16. 耦合d3
    • +
  • d17. 框架下开发--以Angular为例
    • \ No newline at end of file -- GitLab