摘要：根據(jù)需要對(duì)頁(yè)面的地圖進(jìn)行拖拽和縮放，在調(diào)用頁(yè)面，拿到。最終的目錄結(jié)構(gòu)與結(jié)合引入兩種方法，一種是引入安裝包里的文件本文采用這用，另一種是從中直接拿設(shè)置中心點(diǎn)設(shè)置縮放范圍地圖層級(jí)，這次只需要到級(jí)就好，最小能看中國(guó)地圖級(jí)就好。

由于客戶(hù)需求，之前使用的json形式的可鉆取型地圖被放棄了，要好看，沒(méi)有網(wǎng)～，于是開(kāi)啟了打地鼠（bug）模式，總結(jié)如下：

網(wǎng)上搜索，百度離線地圖資料很有限啊，可以用的幾個(gè)要么年代久遠(yuǎn)，要么不能滿(mǎn)足需求。不過(guò)還是從前輩們那里理清了思路

需要的東西

百度地圖API文件(替代)

getModules.js

地圖瓦片

下載最新的api文件，不需要申請(qǐng)ak，地址：http://api.map.baidu.com/api?v=2.0, 打開(kāi)可以看到：

復(fù)制劃線部分并打開(kāi)，拿到主文件，為方便后續(xù)查看修改，先格式化一下，工具：http://www.bejson.com/，命名為apiv2.0.min.js

去掉ak驗(yàn)證
搜索charset = "utf-8"，添加 if (/^http/.test(a)) return;

function oa(a, b) {
      if (/^http/.test(a)) return;  // 如果是調(diào)用外部資源就退出去
      if (b) {
          var c = (1E5 * Math.random()).toFixed(0);
          z._rd["_cbk" + c] = function(a) {
              b && b(a);
              delete z._rd["_cbk" + c]
          };
          a += "&callback=BMap._rd._cbk" + c
      }
      var d = K("script", {
          type: "text/javascript"
      });
      d.charset = "utf-8";
      d.src = a;
      d.addEventListener ? d.addEventListener("load",
      function(a) {
          a = a.target;
          a.parentNode.removeChild(a)
      },
      q) : d.attachEvent && d.attachEvent("onreadystatechange",
      function() {
          var a = window.event.srcElement;
          a && ("loaded" == a.readyState || "complete" == a.readyState) && a.parentNode.removeChild(a)
      });
      setTimeout(function() {
          document.getElementsByTagName("head")[0].appendChild(d);
          d = p
      },
      1)
  };

引用本地工具資源
搜索 domain.main_domain_cdn.baidu[0]，找到使用它定義的z.ma，修改為z.ma = "";

加載模塊短路處理
搜索 &mod=，替換。那個(gè) console.log(a),是為了給后面創(chuàng)建getModules.js用

在這里面放API需要調(diào)用的模塊，上面打印的數(shù)組a里面是需要請(qǐng)求的模塊，打印出來(lái)，通過(guò)下面方式獲取，放到getmodules2.0.js,例如 canvablepath_lf2t4w, 通過(guò)
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=canvablepath_lf2t4w
下載。

這個(gè)時(shí)候已經(jīng)可以用了：

很多人推薦了諸如太樂(lè)地圖下載器、全能地圖下載器、水經(jīng)注地圖下載等等，無(wú)奈都要花錢(qián)購(gòu)買(mǎi)，再加上用的mac,各種不方便。最后用node自己寫(xiě)的。新建文件夾tiles,放圖片，最終目標(biāo)形成按級(jí)分類(lèi)（百度地圖瓦片層級(jí)分為16級(jí)，可根據(jù)需要選擇）的文件夾：

下面分步講解：

查看請(qǐng)求圖片的地址，

在apiv2.0.min.js中找到相關(guān)代碼，搜索 getTilesUrl，有好幾個(gè)，對(duì)照URL地址的構(gòu)成，可以找到

方框內(nèi)是獲取圖片地址，url是原始地址，nname是即將存入的本地地址。根據(jù)需要對(duì)頁(yè)面的地圖進(jìn)行拖拽和縮放，在調(diào)用頁(yè)面，拿到xxxUrls。

先對(duì)地圖進(jìn)行拖拽（加載圖片），確保想要的省市（比如我要江浙滬）都出現(xiàn)在可是范圍內(nèi)，每縮放到一個(gè)等級(jí)，都要把江浙滬拖到可視區(qū)域溜一圈。

nodejs的主要代碼貼上：

const imgArr = xxxUrls;

const newArr = new Set(imgArr); //去重
const finalArr = Array.from(newArr); 
//創(chuàng)建目錄
const fs = require("fs");
const axios = require("axios");

const request = require("request");
const path = require("path")

const hostdir = "./";
function mkdirSync(dirname) {
    if (fs.existsSync(dirname)) {
        return true;
    } else {
        if (mkdirSync(path.dirname(dirname))) {   
            fs.mkdirSync(dirname);
            return true;
        }
    }
    return false
}
const n = 0;
for (const item of finalArr) {
  const last = item.name.lastIndexOf("/")
  if (last > 0) {
    const name = item.name.substr(last + 1)
    const dir = item.name.substr(0, last)
    const dstpath = hostdir + dir + "/" + name
    if (name.length && dir.length && !fs.existsSync(dstpath)) {
      if (mkdirSync(hostdir + dir)) {
        ++n;
        request(item.url).pipe(fs.createWriteStream(dstpath))
      }
    }
  }
}

長(zhǎng)這樣

在apiv2.0.min.js中找到相關(guān)代碼，搜索 getTilesUrl，同上, 找到后修改。

開(kāi)始的時(shí)候我把這api,getModues的文件都放在調(diào)用頁(yè)面那邊，圖片加載報(bào)錯(cuò)，后來(lái)移到項(xiàng)目最外層的static中才解決。最終的目錄結(jié)構(gòu)：

引入BMap,兩種方法，一種是引入echarts安裝包里的bmap.js文件（本文采用這用），另一種是從windows中直接拿

const newMap = echarts.init(document.getElementById("newMap"));
newMap.setOption(this.newOption);

// bmap
const bmap = newMap.getModel().getComponent("bmap").getBMap();
const point = new BMap.Point(118.78, 31.04); // 設(shè)置中心點(diǎn)
// 設(shè)置縮放范圍（地圖層級(jí)），這次只需要到10級(jí)就好，最小能看中國(guó)地圖5級(jí)就好。
bmap.setMaxZoom(10);
bmap.setMinZoom(5);
// 限制拖拽范圍，就是限制拖拽的邊界，圖片沒(méi)那么多，一直拖，等圖片用完，就出現(xiàn)空白。
const b = new BMap.Bounds(new BMap.Point(111.64, 26.40), new BMap.Point(125.95, 35.28)); // 左下角，右上角
try {
  BMapLib.AreaRestriction.setBounds(bmap, b);
} catch (e) {
  alert(e);
};

bmap.centerAndZoom(point, 7);