Vue implementa mapa sin conexión + folleto + mosaico de Gaode

Preparación

1. Me di cuenta del mapa fuera de línea a través del folleto y los mosaicos de Gaode
2. Puede importar el folleto a través de npm, CDN y paquete zip de descarga directa, y adjuntar el sitio web chino del folleto
3. Encontré muchas publicaciones sobre los mosaicos de Gaode. proyecto de descarga de mosaicos (olvidé dónde está la publicación original), pero este proyecto es un proyecto de Java, que se descargó con la ayuda del hermano de back-end, y se adjunta la dirección original del proyecto. 4. El mapa admite 1- Zoom de 18 niveles
, si descarga todos los archivos, el tamaño del archivo es demasiado grande (estimado en más de 30 millones de archivos, docenas de gigabytes de almacenamiento), solo descargué 1-12 niveles aquí y es relativamente claro (recursos de imagen debe colocarse en la carpeta pública)

desarrollar código

1. Parte HTML

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

2. Parte 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) {
    
    
      // 设置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. parte css

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

por fin

Soy el folleto presentado por el zip descargado. El código general está desordenado y puede haber fallas. Por favor, envíe sus comentarios a tiempo si encuentra algún problema.

Recuerda importarprospecto.cssarchivo, de lo contrario su mapa será una locura
, recuerde importarprospecto.cssarchivo, de lo contrario su mapa será una locura
, recuerde importarprospecto.cssarchiva o tu mapa se volverá loco