使用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. 至此，一個基礎的地圖模塊創建完成