使用Leaflet建立地圖模組

IAmFish發表於2021-04-20
地圖

背景

最近需要為某單位開發地圖展示系統，因此開始涉略和使用Leaflet這個輕量級地相簿。

建立基礎地圖需要以下幾步

  1. 引入相關js和css檔案，建立基礎地圖
<div id="map"></div>

var map = L.map("map", {
	center: [29.758447, 121.6345],
	zoom: 10,
	maxZoom: 17,
});
  1. 初始化完成地圖之後還需要新增底圖，新增底圖可以使用官方推薦的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]);
  1. 底圖新增完成後效果如下
    基礎天地圖並且附帶地圖示註
    image
    衛星天地圖，不附帶標註
    image
  2. 右下角的實時座標顯示
// 通過監聽地圖的mousemove事件獲取實時座標，然後在頁面上進行展示
this.map.on("mousemove", (e) => {
	this.mapll =
	"座標：" +
	e.latlng.lng.toFixed(6) +
	"，" +
	e.latlng.lat.toFixed(6);
});
  1. 左下角包含底圖切換以及置灰功能
// 通過移除和新增圖層來實現底圖切換
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]);
}
  1. 至此，一個基礎的地圖模組建立完成

相關文章