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开发了