Vue implémente une carte hors ligne + un dépliant + une tuile Gaode

Préparation

1. J'ai réalisé la carte hors ligne via le dépliant et les tuiles de Gaode
2. Vous pouvez importer le dépliant via npm, CDN et le package zip de téléchargement direct, et joindre le dépliant sur le site Web chinois
3. J'ai trouvé beaucoup de messages sur les tuiles de Gaode. projet de téléchargement de tuiles (oublié où se trouve le message d'origine), mais ce projet est un projet Java, qui a été téléchargé avec l'aide du frère principal, et l'adresse d'origine du projet est jointe. 4. La carte prend en charge 1- Zoom à 18 niveaux
, si vous téléchargez tous les fichiers, la taille du fichier est trop importante (estimée à plus de 30 millions de fichiers, des dizaines de gigaoctets de stockage), je n'ai téléchargé que 1 à 12 niveaux ici et c'est relativement clair (ressources d'image doivent être placés dans le dossier public)

développer du code

1. Partie HTML

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

2. Partie 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. partie CSS

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

enfin

Je suis le dépliant introduit par le zip téléchargé. Le code global est désordonné et il peut y avoir des défauts. Veuillez nous faire part de vos commentaires à temps si vous rencontrez des problèmes.

N'oubliez pas d'importerdépliant.cssfichier, sinon votre carte sera folle
, pensez à importerdépliant.cssfichier, sinon votre carte sera folle
, pensez à importerdépliant.cssfichier ou ta map va devenir folle