diff --git a/leaflet/common/MyMap.js b/leaflet/common/MyMap.js
new file mode 100644
index 0000000000000000000000000000000000000000..28733cf6550fed9869f721dab54c77b21d2a9438
--- /dev/null
+++ b/leaflet/common/MyMap.js
@@ -0,0 +1,71 @@
+// 0. 引入使用到的leaflet类
+import { Map, TileLayer, LayerGroup, Control, Icon } from '../lib/leaflet/leaflet-src.esm.js';
+import dataCommon from './data.js'
+
+class MyMap {
+ constructor() {
+ this.initBase();
+ this.initIcons();
+ }
+
+ initBase() {
+ // 1. 创建一个map对象
+ // 参数为html元素的id：
+ this.map = new Map('map');
+
+ // 2. 创建一个地图图层TileLayer
+ // 参数为一个url模板，一般包含xyz
+ // 有时候模板中包含subdomains，表示地图有多个子url（对应模板参数{s}）
+ this.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',
+ {
+ subdomains: '1234'
+ }
+ );
+
+ // 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',
+ {}
+ );
+ const tdtLabelLayer = new TileLayer(
+ 'http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28',
+ {}
+ );
+ this.tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]);
+
+ // 3. 图层加入到地图map中（显示一个图层）
+ this.tdtLayer.addTo(this.map);
+ // 4. 设置地图中心点坐标（北京），缩放级别10
+ this.map.setView([39.909186, 116.397411], 10);
+
+ // 5. 添加一个控制层
+ this.layerControl = new Control.Layers(
+ {
+ 高德: this.amapLayer,
+ 天地图: this.tdtLayer
+ },
+ {},
+ { collapsed: false }
+ );
+ // 6. 将控制层加入到地图map中
+ this.layerControl.addTo(this.map);
+ }
+
+ _newIcon(svg) {
+ return new Icon({
+ iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg),
+ iconSize: [24, 24],
+ iconAnchor: [12, 12]
+ })
+ }
+
+ initIcons() {
+ this.iconRed = this._newIcon(dataCommon.svgRed);
+ this.iconBlue = this._newIcon(dataCommon.svgBlue);
+ this.iconHospital = this._newIcon(dataCommon.svgHospital);
+ this.iconSchool = this._newIcon(dataCommon.svgSchool);
+ }
+}
+
+export {MyMap};
\ No newline at end of file
diff --git a/leaflet/common/data.js b/leaflet/common/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..228c506a224962f648fa8d923cb3d9afe87e1bb2
--- /dev/null
+++ b/leaflet/common/data.js
@@ -0,0 +1,79 @@
+export default {
+ // 各种用到的svg数据
+ svgRed: '',
+ svgBlue: '',
+ svgHospital: '',
+ svgSchool: '',
+ // 4环geo数据
+ geoRing4: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '西北五环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.22196197509766, 39.99527080014614]
+ }
+ },
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '东五环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.53816223144531, 39.9034155951341]
+ }
+ },
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '南五环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.40151977539062, 39.7631584037253]
+ }
+ }
+ ]
+ },
+ // 5环geo数据
+ geoRing5: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '西四环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.27037048339844, 39.905522539728544]
+ }
+ },
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '北四环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.39396667480469, 39.98343393295322]
+ }
+ },
+ {
+ type: 'Feature',
+ properties: {
+ NAME: '南四环'
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [116.3946533203125, 39.828577091142016]
+ }
+ }
+ ]
+ },
+}
\ No newline at end of file
diff --git a/leaflet/d5/index.html b/leaflet/d5/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..8046a36cd9ce1798461402457513c960502ab9b0
--- /dev/null
+++ b/leaflet/d5/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+ leaflet学习
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/leaflet/d5/index.js b/leaflet/d5/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd7d2ac0d3dd49087a02d5c0507529a75cfa4413
--- /dev/null
+++ b/leaflet/d5/index.js
@@ -0,0 +1,53 @@
+
+// 0. 引入使用到的leaflet类
+import { Marker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
+import { MyMap } from '../common/myMap.js';
+import dataCommon from '../common/data.js'
+
+class Map5 extends MyMap {
+
+ run() {
+
+ // 5.1 创建图层-5环
+ const glayer5 = new GeoJSON(dataCommon.geoRing5, {
+ pointToLayer: (geoJsonPoint, latlng) => {
+ return new Marker(latlng, {
+ icon: this.iconRed
+ });
+ }
+ });
+ glayer5.addTo(this.map);
+
+ // 5.2 创建图层-4环
+ const glayer4 = new GeoJSON(dataCommon.geoRing4, {
+ pointToLayer: (geoJsonPoint, latlng) => {
+ return new Marker(latlng, {
+ icon: this.iconBlue
+ });
+ }
+ });
+ glayer4.addTo(this.map);
+
+ // 5.3 绑定控制层checkbox的change事件，控制图层显示和隐藏
+ const check5 = document.getElementById('check5');
+ check5.onchange = evt => {
+ if (evt.target.checked) {
+ glayer5.addTo(this.map);
+ } else {
+ glayer5.removeFrom(this.map);
+ }
+ };
+ const check4 = document.getElementById('check4');
+ check4.onchange = evt => {
+ if (evt.target.checked) {
+ glayer4.addTo(this.map);
+ } else {
+ glayer4.removeFrom(this.map);
+ }
+ };
+
+ }
+}
+
+let map = new Map5()
+map.run()
diff --git a/leaflet/d5/style.css b/leaflet/d5/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..0f8a0c62eeb7a2d5cceb75b334d39fd84751e035
--- /dev/null
+++ b/leaflet/d5/style.css
@@ -0,0 +1,28 @@
+
+html,
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+}
+
+h1,
+h2 {
+ font-family: Lato;
+}
+
+#map {
+ width: 100%;
+ height: 100%;
+}
+
+.panel {
+ position: absolute;
+ top: 70px;
+ right: 10px;
+ z-index: 1000;
+ padding: 5px 10px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ width: 56px;
+}
diff --git a/leaflet/index.html b/leaflet/index.html
index a8d04f5c0374ea77bb09da43d9745ecddb5f08db..07199e0bc2d2d008da0c4a1c56737ea6f9349131 100644
--- a/leaflet/index.html
+++ b/leaflet/index.html
@@ -12,5 +12,16 @@
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