【leaflet】学习笔记5 自定义控制层、多图层及其控制 && 重构

https://blog.csdn.net/kinghzking/article/details/134469436

leaflet/common/MyMap.js

+// 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： <div id="map"></div>
+    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

leaflet/common/data.js

+export default {
+  // 各种用到的svg数据
+  svgRed: '<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>',
+  svgBlue: '<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="#0000FF" p-id="1408"></path></svg>',
+  svgHospital: '<svg t="1621497200015" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17065" width="200" height="200"><path d="M768 597.333333 597.333333 597.333333 597.333333 768 426.666667 768 426.666667 597.333333 256 597.333333 256 426.666667 426.666667 426.666667 426.666667 256 597.333333 256 597.333333 426.666667 768 426.666667M810.666667 128 213.333333 128C165.973333 128 128 165.973333 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 165.973333 857.6 128 810.666667 128Z" fill="#FF0000" p-id="17066"></path></svg>',
+  svgSchool: '<svg t="1621497335200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17198" width="200" height="200"><path d="M512 128 42.666667 384 512 640 896 430.506667 896 725.333333 981.333333 725.333333 981.333333 384M213.333333 562.346667 213.333333 733.013333 512 896 810.666667 733.013333 810.666667 562.346667 512 725.333333 213.333333 562.346667Z" fill="#0000FF" p-id="17199"></path></svg>',
+  // 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

leaflet/d5/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
+    <link rel="stylesheet" href="./style.css"></link>
+    <script src="../lib/inline-module/index.js"></script>
+    <title>leaflet学习</title>
+  </head>
+  <body>
+    <div id="map"></div>
+    <!-- 控件层 -->
+    <div class="panel">
+      <div class="item">
+        <input type="checkbox" id="check4" checked />
+        <span style="margin-left: 5px; font-size: 12px">四环</span>
+      </div>
+      <div class="item">
+        <input type="checkbox" id="check5" checked />
+        <span style="margin-left: 5px; font-size: 12px">五环</span>
+      </div>
+    </div>
+
+    <script type="module">
+      import "./index.js"
+    </script>
+  </body>
+</html>
\ No newline at end of file

leaflet/d5/index.js

+
+// 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()

leaflet/d5/style.css

+
+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;
+}

leaflet/index.html

@@ -12,5 +12,16 @@
     <li><a href="d2/index.html">d2. 多地图切换：Control.Layers</a></li>
     <li><a href="d3/index.html">d3. 标记：Marker、Icon</a></li>
     <li><a href="d4/index.html">d4. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d5/index.html">d5. 自定义控制层、多图层及其控制</a></li>
+    <li><a href="d6/index.html">d6. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d7/index.html">d7. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d8/index.html">d8. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d9/index.html">d9. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d10/index.html">d10. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d11/index.html">d11. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d12/index.html">d12. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d13/index.html">d13. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d14/index.html">d14. GeoJson数据导入：GeoJSON</a></li>
+    <li><a href="d15/index.html">d15. GeoJson数据导入：GeoJSON</a></li>
   </body>
 </html>
\ No newline at end of file