vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue离线地图+leaflet+高德瓦片

vue实现离线地图+leaflet+高德瓦片的详细代码

作者:陌人笙

这篇文章主要给大家介绍了关于vue实现离线地图+leaflet+高德瓦片的详细代码,Vue Leaflet是一种结合了Vue框架和Leaflet库的前端技术,用于展示和操作天地图,需要的朋友可以参考下

准备工作

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) {
      // 设置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部分

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

最后

我是下载的zip引入的leaflet,代码整体写的比较乱,可能会出现瑕疵,遇到问题请及时反馈

到此这篇关于vue实现离线地图+leaflet+高德瓦片的文章就介绍到这了,更多相关vue离线地图+leaflet+高德瓦片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文