使用Leaflet创建地图模块

背景

最近需要为某单位开发地图展示系统，因此开始涉略和使用Leaflet这个轻量级地图库。

创建基础地图需要以下几步

1. 引入相关js和css文件，创建基础地图

<div id="map"></div>  var map = L.map("map", { 	center: [29.758447, 121.6345], 	zoom: 10, 	maxZoom: 17, }); 

2. 初始化完成地图之后还需要添加底图，添加底图可以使用官方推荐的Leaflet.ChineseTmsProviders插件，
   该插件可以实现天地图、高德、谷歌、百度等地图的加载。但是加载百度地图需要进行坐标系转换，否则无法加载。

// TianDiTu.Normal.Map为基础地图 var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', { 	maxZoom: 17, 	minZoom: 5 }); // TianDiTu.Normal.Annotion为地图标注 var normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', { 	maxZoom: 17, 	minZoom: 5 }); // 使用L.layerGroup将normalm和normala合并为同一个图层组，以便进行统一的移除、修改操作 // 然后再将合并的图层组添加至地图进行显示 this.baseMapLayer = L.layerGroup([normalm, normala]).addTo(this.map); // 创建卫星底图，不带标注,不直接添加到地图中，后续通过点击事件进行切换 var wxmap = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', { 	maxZoom: zoomLevel, 	minZoom: 5 }); this.wxMapLayer = L.layerGroup([wxmap]); 

3. 底图添加完成后效果如下
   基础天地图并且附带地图标注
   
   卫星天地图，不附带标注
   
4. 右下角的实时坐标显示

// 通过监听地图的mousemove事件获取实时坐标，然后在页面上进行展示 this.map.on("mousemove", (e) => { 	this.mapll = 	"坐标：" + 	e.latlng.lng.toFixed(6) + 	"，" + 	e.latlng.lat.toFixed(6); }); 

5. 左下角包含底图切换以及置灰功能

// 通过移除和添加图层来实现底图切换 this.map.removeLayer(); this.map.addLayer(); // 通过操作style添加统一样式，实现地图的置灰 var style = document.getElementsByTagName("style")[0]; // 在线地图均以瓦片图形式加载，默认是在leaflet-tile-pane层，因此需要对该层下的图片添加灰度的css样式 // 通过添加和移除样式即可实现置灰功能的切换 if (newValue) { style.appendChild( 	document.createTextNode(`div.leaflet-tile-pane 	img.leaflet-tile.leaflet-tile-loaded { 		filter: grayscale(1); 	}`) ); } else { style.removeChild(style.childNodes[1]); } 

6. 至此，一个基础的地图模块创建完成