vue实现离线地图+leaflet+高德瓦片

这篇具有很好参考价值的文章主要介绍了vue实现离线地图+leaflet+高德瓦片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

准备工作

1、我是通过leaflet和高德的瓦片实现的离线地图
2、可以通过npm、CDN和直接下载zip包实现引入leaflet,附上leaflet中文网
3、高德的瓦片是找了很多帖子无意看到的一份合适的瓦片下载项目(忘了原帖在哪),不过这个项目是Java项目,是通过后端大哥帮忙下载的,附上项目原地址
4、地图支持1-18层级缩放,全部下载的话文件量太大了(估算三千多万个文件,几十G存储),我这边只下载了1-12层级也比较清晰了(图片资源需要放在public文件夹下)

高德地图离线瓦片,vue.js,javascript,前端

开发代码

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,代码整体写的比较乱,可能会出现瑕疵,遇到问题请及时反馈

记得一定要引入leaflet.css文件,不然你的地图会很疯狂
记得一定要引入leaflet.css文件,不然你的地图会很疯狂
记得一定要引入leaflet.css文件,不然你的地图会很疯狂文章来源地址https://www.toymoban.com/news/detail-527945.html

到了这里,关于vue实现离线地图+leaflet+高德瓦片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue前端项目引用高德离线地图

    由于上一篇下载离线地图瓦片的工具有问题,需要更换工具重新下载离线瓦片,步骤如下: 1.1用MapDownloader,下载离线地图瓦片 工具提取码: mmdl 需要对工具作如下配置 : MapDownloader.exe.config 文件进行修改 保存之后运行 MapDownloader.exe文件 1.2 选择mysql数据库,然后选择要下载得地

    2024年02月08日
    浏览(59)
  • Leaflet 加载高德地图

    在前面的文章中,我们学习了如何使用 Leaflet 创建一个基本的地图。在本文中,我们将学习如何在 Leaflet 中加载高德地图,并结合实际应用构建地图点击事件。 高德地图是一款由高德软件提供的数字地图服务,在国内使用较为广泛。高德地图提供了丰富的地图数据和 API 接口

    2024年03月25日
    浏览(47)
  • UE5、CesiumForUnreal接入XYZ格式地图瓦片如高德地图、OSM、ArcGIS等

    通过改造 cesium-native 和 cesiumforunreal 插件,参考 tms 的栅格地图瓦片加载逻辑,实现在UE5、CesiumForUnreal中接入 XYZ 格式的地图瓦片服务。 以高德XYZ格式地图加载为例,GIF动图如下: 首先对比 tms与xyz 瓦片的区别

    2024年02月13日
    浏览(65)
  • Vue3+Vite连接高德地图JS API——地图显示、输入搜索

    1、进入高德地图API官网(https://lbs.amap.com/): 2、注册登录。 3、进入控制台。 4、点击“应用管理”,点击“我的应用”,创建新应用。 5、添加Key,服务平台选择“Web端(JS API)”,白名单不要填写,勾选阅读并同意。 点击提交后,就能看到Key已经生成,记住这里的Key和安

    2024年01月17日
    浏览(46)
  • 高德地图系列(三):vue项目利用高德地图实现地址搜索功能

    目录 第一章 效果图 第二章 源代码 高德地图为我们提供了搜索联想,以及搜索结果标记,该案例已将基础功能打通,后续我们肯定还会对功能有所修改,想实现自己想要的效果,基本上看高德地图文档对着改就好了(跟我们用别的工具一样做即可)  代码描述如下:  注意事

    2024年02月03日
    浏览(51)
  • Vue 引入高德地图:实现地图展示与交互

    本文将介绍如何在Vue项目中引入高德地图,以及如何实现地图的展示和交互功能。我们将从安装依赖开始,然后配置高德地图的密钥和相关插件,最后演示如何在Vue组件中使用地图组件和实现基本的交互功能。通过本文的指导,您将能够轻松地在Vue项目中集成高德地图,实现

    2024年02月08日
    浏览(50)
  • 前端加载高德离线地图的解决方案

    核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图。 使用BIGMap工具下载地图离线瓦片到本地 下载地址: http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版 需要注册试用版(免费) 试用版可以下载到16级别的瓦片,单次下载不能超过

    2023年04月08日
    浏览(43)
  • vue3使用高德地图实现点击获取经纬度以及搜索功能

     话不多说直接上干活 在此之前你需要有高德地图的 key,这个自己去申请即可 1,首先需要在终端安装 2,准备一个容器 3,在需要使用的页面引入刚才安装的 4, 5,绑定input框 最后附上css代码 ​​​​​​​这个时候就已经可以了

    2024年02月12日
    浏览(45)
  • VUE3+TS+element UI +高德地图实现轨迹回放带进度条

    记录一下,由于项目需要做车辆的历史轨迹回放,查了很多资料,在高德地图里有这几种解决方案。 所用技术:vue3 + TS +element UI plus +高德地图  这是相关的Demo借鉴 高德地图的轨迹回放demo 轨迹巡航器控制 高德地图Amap UI 下面是效果图: 1,这是高德地图提供的轨迹回放demo

    2024年02月11日
    浏览(64)
  • uni-app离线打包高德地图导入android studio不能正常显示

    本人使用的uni-app SDK版本:Android-SDK@3.8.7.81902_20230704 1.导入以上文件,依赖已经自动添加了 2.确保这个正常引入 3.修改AndroidMainifest.xml,添加自己的密钥

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包