当前位置: 首页 > Web前端 > vue.js

leaflet.js实现离线地图

时间:2023-03-31 19:41:01 vue.js

地图Gis模块开发中常用的功能如下:点相关:地图点、海量点加载、点聚合、点击点、自定义窗口显示点详情。区域绘制-修改省市区边界样式、3D阴影等框点-中心点绘制圆框选择、多边形绘制框选择判断点是否在框范围内。场景:在前端需求实现上述地图相关功能时,我们可以经常使用百度地图、高德地图、谷歌地图、天地地图等相关在线地图服务和API,快速实现地图相关功能。但对于一些政务系统的客户,只能使用内网不能使用外网,则无法使用上述地图服务。在这种情况下,就需要离线地图服务。leaflet.js的使用1.下载地图瓦片,构建本地地图服务,导入服务js初始化地图3.绘制省市边界4.Mapdots//list是一个地图点数组对象,每一项包含经纬度坐标点等信息。函数setMakers(列表){markers=L.markerClusterGroup();for(vari=0;i'+showItem[i].key+':'+showItem[i].val+'

'}让myTitle='视频详情
'window.currentData=datawindow.basicDom=''+myTitle+basicInfo+''+''+`
`+'
'+''marker.bindPopup(basicDom);markers.addLayer(标记);mapMarkers.push(marker)}map.addLayer(markers);}6.点击选框范围按钮绘制一个选框多边形$(".xuankuang_btn").click(()=>{clearDrawTool()//DrawTool.cancle()DrawTool.tempPolygon=newL.polygon([],{color:'#f17879',fillColor:'#ff4d4f',opacity:0.8});DrawTool.lines=newL.polyline(DrawTool.points,{color:'#f17879',fillColor:'#ff4d4f',opacity:0.6});DrawTool.tempLines=newL.polyline([],{dashArray:12,color:'#f17879',fillColor:'#ff4d4f',opacity:0.6});DrawTool.polygon=L.polygon(DrawTool.points,{fillColor:'#f17879',color:'green'});//初始化画布,给定地图Container,第一个参数是地图对象,第二个参数是绘制时图标的样式,第二个参数可以不写DrawTool.init(map,'./src/assets/img/移动.png');})每次绘制矿物选择函数时清除上一帧选择内容functionclearDrawTool(){//第二次选择时清除上一帧选择内容if(DrawTool.markers.length){for(varDrawTool.markers的标记){marker.remove();}//重置选择方法对应的点和线DrawTool.points=[];DrawTool.markers=[];DrawTool.lines.remove();DrawTool.tempLines.remove();DrawTool.tempPolygon.re移动();DrawTool.polygon.remove();以上就是常用的离线地图的相关方法,好用的话点个赞吧~