快捷導(dǎo)航

vue實(shí)現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼

更新時(shí)間：2023年10月07日 09:07:40 作者：陌人笙

這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼,Vue Leaflet是一種結(jié)合了Vue框架和Leaflet庫(kù)的前端技術(shù),用于展示和操作天地圖,需要的朋友可以參考下

準(zhǔn)備工作

1、我是通過(guò)leaflet和高德的瓦片實(shí)現(xiàn)的離線地圖

2、可以通過(guò)npm、CDN和直接下載zip包實(shí)現(xiàn)引入leaflet，附上leaflet中文網(wǎng)

3、高德的瓦片是找了很多帖子無(wú)意看到的一份合適的瓦片下載項(xiàng)目(忘了原帖在哪)，不過(guò)這個(gè)項(xiàng)目是Java項(xiàng)目，是通過(guò)后端大哥幫忙下載的，附上項(xiàng)目原地址

4、地圖支持1-18層級(jí)縮放，全部下載的話文件量太大了(估算三千多萬(wàn)個(gè)文件，幾十G存儲(chǔ))，我這邊只下載了1-12層級(jí)也比較清晰了(圖片資源需要放在public文件夾下)

開發(fā)代碼

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初始化完成進(jìn)行地圖初始化
    initMap(list) {
      // 設(shè)置iocn
      var myIcon = L.icon({
        iconUrl: icon, //圖標(biāo)
        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, //最小縮小層級(jí)
        maxZoom: 12, //最大放大層級(jí)
        attribution: '<b style="color:#40a9ff">高德地圖</b>' //版權(quán)信息
      }).addTo(map)
      // 通過(guò)數(shù)據(jù)標(biāo)注icon
      if (list.length > 0) {
        list.forEach(v => {
          // 這里是緯度在前 【緯度，經(jīng)度】
          var marker = L.marker(v.point, {
            icon: myIcon //icon
          })
            .addTo(map)
            // Tooltip 工具提示 https://leafletjs.cn/reference.html#tooltip
            .bindTooltip(v.deviceName, {
              permanent: true, //是永久打開 Tooltip 還是只在鼠標(biāo)移動(dòng)時(shí)打開。
              direction: 'bottom', //打開 Tooltip 的方向
              offset: [0, 5], //Tooltip 位置的可選偏移
              opacity: 1, //Tooltip 容器透明度
              autoPlan: true //跟隨縮放變化 好像沒(méi)有起作用
            })
          marker.on('click', function(e) {
            L.popup({
              offset: [0, -25] //popup 位置的可選偏移
            })
              .setLatLng(v.point)
              .setContent(
                `<p style='text-align:center'>${v.deviceName}</p>
                <p>設(shè)備編碼：${v.deviceCode}</p>
                <p>設(shè)備地址：${ v.address }</p>
                <p>設(shè)備狀態(tài)：<span style="background-color:${v.state == 0 ? 'green' : 'red'};color: #fff;
                padding: 2px 4px;">${v.state == 0 ? '在線' : '離線'}</span></p>`
              )
              .openOn(map)
          })
        })
      }
    },
    // 父組件調(diào)用 接口更新地圖隨之更新
    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>