欢迎光临
我的个人博客网站

使用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. 底图添加完成后效果如下
    基础天地图并且附带地图标注
    使用Leaflet创建地图模块
    卫星天地图,不附带标注
    使用Leaflet创建地图模块
  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. 至此,一个基础的地图模块创建完成
赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用Leaflet创建地图模块
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏