使用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. 至此，一个基础的地图模块创建完成

• 还没有人评论，欢迎说说您的想法！

相关课程

Web前端入门教程

5842 9.8元

从零开始学习JavaScript

6857 0元 限免

CSS3样式设计

4774 0元 限免