Vue implements offline map + leaflet + Gaode tile

Preparation

1. I realized the offline map through leaflet and Gaode's tiles
2. You can import leaflet through npm, CDN and direct download zip package, and attach the leaflet Chinese website
3. I found a lot of posts about Gaode's tiles. I saw a suitable tile download project (forgot where the original post is), but this project is a Java project, which was downloaded with the help of the back-end brother, and the original address of the project is attached. 4. The map supports 1-18 level
zoom , if you download all the files, the file size is too large (estimated to be more than 30 million files, dozens of gigabytes of storage), I only downloaded 1-12 levels here and it is relatively clear (picture resources need to be placed in the public folder)

insert image description here

develop code

1. HTML part

<template>
  <div class="main">
    <!-- 地图 -->
    <div id="container"></div>
  </div>
</template>

2. JS part

<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) {
    
    
      // 设置iocn
      var 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)
      // 通过数据标注icon
      if (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 part

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

at last

I am the leaflet introduced by the downloaded zip. The overall code is messy and there may be flaws. Please feedback in time if you encounter any problems.

Remember to importleaflet.cssfile, otherwise your map will be crazy
, remember to importleaflet.cssfile, otherwise your map will be crazy
, remember to importleaflet.cssfile or your map will be crazy