使用Leaflet创建地图模块

背景

最近需要为某单位开发地图展示系统,因此开始涉略和使用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. 至此,一个基础的地图模块创建完成
posted @ 2021-04-20 22:56  IAmFish  阅读(147)  评论(0编辑  收藏  举报