Merge branch 'master' of https://gitcode.net/kinghzking/MyOpen

leaflet/d4/index.js

 
+// 0. 引入使用到的leaflet类
 import { Map, TileLayer, LayerGroup, Control, Marker, Icon, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
 
-// Write Javascript code!
+// 1. 创建一个map对象
+//    参数为html元素的id： <div id="map"></div>
 const map = new Map('map');
 
+// 2. 创建一个地图图层TileLayer
+//    参数为一个url模板，一般包含xyz
+//    有时候模板中包含subdomains，表示地图有多个子url（对应模板参数{s}）
 const amapLayer = new TileLayer(
   'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
   {
@@ -11,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',
   {}
@@ -23,10 +29,13 @@ const tdtLabelLayer = new TileLayer(
 
 const tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]);
 
+// 3. 图层加入到地图map中（显示一个图层）
 tdtLayer.addTo(map);
 
+// 4. 设置地图中心点坐标（北京），缩放级别10
 map.setView([39.909186, 116.397411], 10);
 
+// 5. 添加一个控制层
 const layerControl = new Control.Layers(
   {
     高德: amapLayer,
@@ -35,21 +44,29 @@ const layerControl = new Control.Layers(
   {},
   { collapsed: false }
 );
+// 6.  将控制层加入到地图map中
 layerControl.addTo(map);
 
+// d3.1 创建一个icon，以`data:image/svg+xml,`形式存在
 const svg = '<svg t="1621166776642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1407" width="200" height="200"><path d="M512 85.333333c-164.949333 0-298.666667 133.738667-298.666667 298.666667 0 164.949333 298.666667 554.666667 298.666667 554.666667s298.666667-389.717333 298.666667-554.666667c0-164.928-133.717333-298.666667-298.666667-298.666667z m0 448a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z" fill="#FF3D00" p-id="1408"></path></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": [
@@ -95,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]
       })
@@ -107,4 +125,5 @@ const glayer = new GeoJSON(data, {
   }
 });
 
+// d4.3 将GeoJSON 对象添加到地图中
 glayer.addTo(map);