diff --git a/leaflet/d4/index.js b/leaflet/d4/index.js index 240b53399caeb58c9d7823cd2a7c508cb0ac9652..93c9d0bfa32bd8b2e49d981ed28b808691f63f9f 100644 --- a/leaflet/d4/index.js +++ b/leaflet/d4/index.js @@ -1,9 +1,14 @@ +// 0. 引入使用到的leaflet类 import { Map, TileLayer, LayerGroup, Control, Marker, Icon, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js'; -// Write Javascript code! +// 1. 创建一个map对象 +// 参数为html元素的id:
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(