本文基于前文二维地图展示以及添加图标、文本、连线、弹窗等功能实现
实现二维地图离线展示功能
下载我们所需要用到的离线地图瓦片
下载器很多,我们这里以Offline Map Maker为例: (可到http://www.allmapsoft.com/omm去下载它)注意：可以使用gaode Normal Maps 或者 gaode Satellite Maps
中国全量地图相关设置可以是：
缩放选择
3~8
经纬度选择
70 140
1 56
- 注意：现在使用的是本地的离线文件，可以改为调其他服务来减少打包后前端包的大小
// 设置中心位置经纬度以及缩放比例、最大最小缩放比例
const mymap = L.map('mapid', {
minZoom: 3,
maxZoom: 8,
attributionControl: false,
center: [33.505, 115.09],
zoom: 4,
})
//TODO 现在使用的是本地的离线文件，可以改为调其他服务来减少打包后前端包的大小
const url = `offlinemaps/gaode/newtask/{z}/{x}/{y}.png`
// const url = 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}';
L.tileLayer(url).addTo(mymap)
offlinemaps/gaode/newtask目录下存放缩放等级3~8之间的图片文件
image.png
参考：
使用leaflet加载本地离线地图瓦片的一个最简单地例子
https://www.pianshen.com/article/5926964545/
