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