vue实现离线地图+leaflet+高德瓦片

准备工作

1、我是通过leaflet和高德的瓦片实现的离线地图
2、可以通过npm、CDN和直接下载zip包实现引入leaflet，附上leaflet中文网
3、高德的瓦片是找了很多帖子无意看到的一份合适的瓦片下载项目(忘了原帖在哪)，不过这个项目是Java项目，是通过后端大哥帮忙下载的，附上项目原地址
4、地图支持1-18层级缩放，全部下载的话文件量太大了(估算三千多万个文件，几十G存储)，我这边只下载了1-12层级也比较清晰了(图片资源需要放在public文件夹下)

开发代码

1、HTML部分

<template><divclass="main"><!-- 地图 --><divid="container"></div></div></template>

2、JS部分

<script>import icon from'@/assets/pointIcon.png'import'@/leaflet/leaflet.js'exportdefault{name:'CenterMap',props:{mapPointList:{type: Array,default:[]}},mounted(){//地图初始化this.initMap(this.mapPointList)},methods:{//DOM初始化完成进行地图初始化initMap(list){// 设置iocnvar myIcon =L.icon({iconUrl: icon,//图标iconSize:[25,34],//大小iconAnchor:[12.5,34]//偏移量})// 初始化地图var map =L.map('container').setView([28.697005,115.885607],8)// 瓦片图层L.tileLayer('/staticImg/{z}/{x}/{y}.png',{minZoom:7,//最小缩小层级maxZoom:12,//最大放大层级attribution:'<b style="color:#40a9ff">高德地图</b>'//版权信息}).addTo(map)// 通过数据标注iconif(list.length >0){
        list.forEach(v=>{// 这里是纬度在前 【纬度，经度】var marker =L.marker(v.point,{icon: myIcon //icon}).addTo(map)// Tooltip 工具提示 https://leafletjs.cn/reference.html#tooltip.bindTooltip(v.deviceName,{permanent:true,//是永久打开 Tooltip 还是只在鼠标移动时打开。direction:'bottom',//打开 Tooltip 的方向offset:[0,5],//Tooltip 位置的可选偏移opacity:1,//Tooltip 容器透明度autoPlan:true//跟随缩放变化 好像没有起作用})

          marker.on('click',function(e){L.popup({offset:[0,-25]//popup 位置的可选偏移}).setLatLng(v.point).setContent(`<p style='text-align:center'>${v.deviceName}</p>
                <p>设备编码：${v.deviceCode}</p>
                <p>设备地址：${ v.address }</p>
                <p>设备状态：<span style="background-color:${v.state ==0?'green':'red'};color: #fff;
                padding: 2px 4px;">${v.state ==0?'在线':'离线'}</span></p>`).openOn(map)})})}},// 父组件调用 接口更新地图随之更新setMapData(list){//地图初始化this.initMap(list)}}}</script>

3、css部分

<style lang="less" scoped>
.main{width: 100%;height: 100%;}#container{padding: 0px;margin: 0px;width: 100%;height: 100%;}
</style>

最后

我是下载的zip引入的leaflet，代码整体写的比较乱，可能会出现瑕疵，遇到问题请及时反馈

记得一定要引入leaflet.css文件，不然你的地图会很疯狂
记得一定要引入leaflet.css文件，不然你的地图会很疯狂
记得一定要引入leaflet.css文件，不然你的地图会很疯狂