基于leaflet的纯前端地图瓦片数据离线下载

公司要个能嵌入客户端的网页地图数据下载=-=写个文章记录一下

可实现的功能

右键点击选择区域->右键打开下载地图选项界面->选择需要的层级->下载地图

下载的基本思路请参考GitHub - xiaolidan00/offline-map-download: 纯前端离线瓦片地图下载

此处记录一下修改的部分

地图

原项目的地图源是高德我额外加了个必应地图（公司需要非洲地图的数据）

必应地图的地图源的格式跟高德有些不一样需要作下适配

// 创建bing图层类
    createBingLayer() {
      let _this = this;
      this.bingLayer = L.TileLayer.extend({
        // 重写tileLayer的getTileUrl方法 PS：这里函数内部的this指向已变更
        getTileUrl: function (coords) {
          // console.log("coords数据", coords, _this.quadKey(coords.x, coords.y, coords.z));
          // this._adjustTilePoint(coords);
          return L.Util.template(this._url, {
            s: this._getSubdomain(coords),
            q: _this.quadKey(coords.x, coords.y, coords.z),
            it: coords.z < 14 ? "G,L" : "G,LA",
          });
        },
      })
    },

下载

下载从原来的每个请求间隔0.1秒改为每请求x（轮巡数）条间隔y秒（轮巡间隔）同时添加并发，默认设置是4条

完整代码

offline-map-download-leaflet: 一个简单的离线地图数据下载器