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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值