vue leaflet离线地图开发

一开始想用openlayers开发离线地图,由于官网总是打不开,选择了leaflet。感觉他们都差不多。
需要的工具:瓦片地图下载器(下载开发所需的瓦片离线地图)
vue项目中leaflet的使用(我用的是直接cdn引入,也可以npm安装)

<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>

将下载的瓦片文件放到该目录,(我做测试用的直接放在本地了,正式项目会放到服务器上请求瓦片)
在这里插入图片描述

vue页面代码

<template>
  <div id="map"></div>
</template>
<script>
export default {
  mounted() {
    var map = L.map("map", {
      minZoom: 4,
      maxZoom: 13,
      maxBounds: [//右下角点位开始,逆时针
        [24.255729263830737, 119.71551513671876],
        [26.296414642208234, 119.73062133789064],
        [26.29391130293591, 117.4925994873047],
        [24.255729263830737, 118.7340545654297],
      ],
    }).setView([24.91695414, 118.58299255], 10);

    L.tileLayer("../../static/tiles/mapabc/roadmap/{z}/{x}/{y}.png", {}).addTo(
      map
    );
    map.on("click", (e) => {
      console.log(e.latlng);
    });
  },
};
</script>
<style scoped>
#map {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

附上leftlet官方地址,后面自己看api开发了

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet 是一个流行的开源 JavaScript 库,它用于创建交互式的、移动友好的地图。它是一个轻量级的库,提供了丰富的地图功能和易于使用的 API。而 Vue 是一个流行的 JavaScript 框架,用于构建用户界面。它可以很好地与 Leaflet 集成,以创建功能丰富且具有交互性的离线地图应用。 使用 VueLeaflet 可以实现离线地图应用的多种功能。首先,可以使用 Leaflet 的各种图层(如瓦片图层、矢量图层等)在地图上显示地理数据。这些图层可以是在线地图供应商的数据,也可以是自定义的本地数据。通过 VueLeaflet 的结合,可以在应用中轻松实现地图的加载、显示和交互。 其次,VueLeaflet 提供了丰富的事件处理机制,可以监听用户在地图上的交互行为(如点击、移动等),并做出相应的响应。这使得用户可以与地图进行交互,如选择特定区域、查看详细信息等。 另外,Vue 的组件化开发方式可以很好地与 Leaflet 的插件系统配合使用。可以将地图相关的功能封装成组件,以便在应用中复用。这样可以减少重复的代码,提高开发效率。 最后,由于离线地图应用需要加载大量的地理数据,因此性能也是一个重要的考虑因素。VueLeaflet 提供了对性能优化的支持,如地图数据懒加载、数据缓存等。这些特性可以显著提升应用的加载速度和流畅度。 综上所述,使用 VueLeaflet 结合可以创建功能丰富、交互性强的离线地图应用。无论是在移动端还是在桌面端,都能够提供良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值