二维地图离线展示功能

本文基于前文二维地图展示以及添加图标、文本、连线、弹窗等功能实现

实现二维地图离线展示功能

• 下载我们所需要用到的离线地图瓦片
  下载器很多,我们这里以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/