diff --git a/leaflet/d4/index.js b/leaflet/d4/index.js index 93c9d0bfa32bd8b2e49d981ed28b808691f63f9f..40376d7b437d06a7dd887ea1bfc1af07294dc257 100644 --- a/leaflet/d4/index.js +++ b/leaflet/d4/index.js @@ -16,6 +16,7 @@ const amapLayer = new TileLayer( } ); +// 2.1 再创建一个地图图层tdtVectorLayer const tdtVectorLayer = new TileLayer( 'http://t0.tianditu.gov.cn/vec_w/wmts?layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28', {} @@ -28,12 +29,13 @@ const tdtLabelLayer = new TileLayer( const tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]); -// 3. 图层加入到地图map中 +// 3. 图层加入到地图map中(显示一个图层) tdtLayer.addTo(map); // 4. 设置地图中心点坐标(北京),缩放级别10 map.setView([39.909186, 116.397411], 10); +// 5. 添加一个控制层 const layerControl = new Control.Layers( { 高德: amapLayer, @@ -42,21 +44,29 @@ const layerControl = new Control.Layers( {}, { collapsed: false } ); +// 6. 将控制层加入到地图map中 layerControl.addTo(map); +// d3.1 创建一个icon,以`data:image/svg+xml,`形式存在 const svg = ''; +let iconUrl = 'data:image/svg+xml,' + encodeURIComponent(svg) +// d3.2 创建一个Marker对象 +// 坐标 +// icon对象(url、大小、锚点坐标) const marker = new Marker([39.909186, 116.397411], { icon: new Icon({ - iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconUrl: iconUrl, iconSize: [32,32], iconAnchor: [16,32] }) }); +// d3.3 将点添加(显示)到map中 marker.addTo(map); +// d4.1 引入一个 GeoJSON 数据 const data = { "type": "FeatureCollection", "features": [ @@ -102,11 +112,12 @@ const data = { ] }; +// d4.2 根据data创建 GeoJSON 对象,该对象对应leaflet中的一个图层 const glayer = new GeoJSON(data, { pointToLayer: (geoJsonPoint, latlng) => { return new Marker(latlng, { icon: new Icon({ - iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconUrl: iconUrl, iconSize: [32, 32], iconAnchor: [16, 32] }) @@ -114,4 +125,5 @@ const glayer = new GeoJSON(data, { } }); +// d4.3 将GeoJSON 对象添加到地图中 glayer.addTo(map);