轻量级地图库要如何搭建?巧用Leaflet来实现!

轻量级地图库要如何搭建?巧用Leaflet来实现!

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

一、引入相关js和css文件,创建基础地图

<div id=”map”></div>

var map = L.map(“map”, {
center: [29.758447, 121.6345],
zoom: 10,
maxZoom: 17,
});

二、初始化完成地图之后还需要添加底图,添加底图可以使用官方推荐的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]);

三、底图添加完成后效果如下,基础天地图并且附带地图标注。

轻量级地图库要如何搭建?巧用Leaflet来实现!

卫星天地图,不附带标注

轻量级地图库要如何搭建?巧用Leaflet来实现!

四、右下角的实时坐标显示。

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

五、左下角包含底图切换以及置灰功能

// 通过移除和添加图层来实现底图切换
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]);
}

分享到 :

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注