diff --git a/leaflet/common/data.js b/leaflet/common/data.js index 3a6a661296f736b714e644f0601ce832da6e8f1e..571996a35a3c0f2fb1bc06b074d526d1a0752c06 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 0000000000000000000000000000000000000000..34cd3f8d838e194b483f1fd4dc07a87a62e65b56 --- /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 0000000000000000000000000000000000000000..7deffbec1aef55e48eef2d6a297672628fd9f3ef --- /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 0000000000000000000000000000000000000000..5ed077f62fc50d8f82440b1f64e3de49d9ace6b6 --- /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 0000000000000000000000000000000000000000..34cd3f8d838e194b483f1fd4dc07a87a62e65b56 --- /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 0000000000000000000000000000000000000000..1ecb42823a712917926d8caea6f655c80e7f66d9 --- /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 0000000000000000000000000000000000000000..5ed077f62fc50d8f82440b1f64e3de49d9ace6b6 --- /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 0000000000000000000000000000000000000000..34cd3f8d838e194b483f1fd4dc07a87a62e65b56 --- /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 0000000000000000000000000000000000000000..5730ecb29f3da05e72a8ca250a3a4eddafba63de --- /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 0000000000000000000000000000000000000000..5ed077f62fc50d8f82440b1f64e3de49d9ace6b6 --- /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 0000000000000000000000000000000000000000..34cd3f8d838e194b483f1fd4dc07a87a62e65b56 --- /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 0000000000000000000000000000000000000000..4f21bab325a88859e9758f236f6096ccbac28c5e --- /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 0000000000000000000000000000000000000000..99b2534db2adce2c42103979cc18f05bb5ef4ab1 --- /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 0000000000000000000000000000000000000000..5ed077f62fc50d8f82440b1f64e3de49d9ace6b6 --- /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 0000000000000000000000000000000000000000..34cd3f8d838e194b483f1fd4dc07a87a62e65b56 --- /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 0000000000000000000000000000000000000000..2d49bcea3b30114211e25e05e49fc06d4fb900a4 --- /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 0000000000000000000000000000000000000000..5ed077f62fc50d8f82440b1f64e3de49d9ace6b6 --- /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 07199e0bc2d2d008da0c4a1c56737ea6f9349131..5575e10c7ca2e5ca2ba1978d7b0672e1b5a1f63c 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