Thu Nov 16 18:02:00 CST 2023 inscode

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',
   {
@@ -23,8 +28,10 @@ const tdtLabelLayer = new TileLayer(
 
 const tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]);
 
+// 3. 图层加入到地图map中
 tdtLayer.addTo(map);
 
+// 4. 设置地图中心点坐标（北京），缩放级别10
 map.setView([39.909186, 116.397411], 10);
 
 const layerControl = new Control.Layers(