准备工作
1、我是通过leaflet和高德的瓦片实现的离线地图
2、可以通过npm、CDN和直接下载zip包实现引入leaflet，附上leaflet中文网
3、高德的瓦片是找了很多帖子无意看到的一份合适的瓦片下载项目(忘了原帖在哪)，不过这个项目是Java项目，是通过后端大哥帮忙下载的，附上项目原地址
4、地图支持1-18层级缩放，全部下载的话文件量太大了(估算三千多万个文件，几十G存储)，我这边只下载了1-12层级也比较清晰了(图片资源需要放在public文件夹下)
开发代码
1、HTML部分
<template><div class="main"><!-- 地图 --><div id="container"></div></div></template>
2、JS部分
<script>import icon from '@/assets/pointIcon.png'import '@/leaflet/leaflet.js'export default {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 工具提示 /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文件，不然你的地图会很疯狂
