摘要：代碼起始點(diǎn)坐標(biāo)左上角終點(diǎn)坐標(biāo)右下角根據(jù)地圖平臺使用轉(zhuǎn)換類這里是用百度的最大最小縮放等級循環(huán)產(chǎn)生瓦片圖目錄結(jié)構(gòu)層級橫坐標(biāo)范圍縱坐標(biāo)范圍這個(gè)是你圖片要存放的位置先要產(chǎn)生操作完的流程后再執(zhí)行這個(gè)后面有說這個(gè)的用處這個(gè)函數(shù)是獲取一個(gè)的對象數(shù)組

const request = require("request");
const fs = require("fs");
const bagpipe = require("bagpipe");
const TileLnglatTransform = require("tile-lnglat-transform");
let [x1, y1] = [72.26, 54.57]; // 起始點(diǎn)坐標(biāo)（左上角）
let [x2, y2] = [137.31, 17.8]; // 終點(diǎn)坐標(biāo)（右下角）

let TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu; // 根據(jù)地圖平臺使用轉(zhuǎn)換類 這里是用百度的
let tileArr = [];

let [minZoom, maxZoom] = [5, 9]; // 最大最小縮放等級

/* 循環(huán)產(chǎn)生瓦片圖目錄結(jié)構(gòu) */
for (let i = minZoom; i <= maxZoom; i++) {
    tileArr[i] = {};
    p1 = TileLnglatTransformBaidu.lnglatToTile(x1, y1, i);
    p2 = TileLnglatTransformBaidu.lnglatToTile(x2, y2, i);
    tileArr[i].t = i; // 層級
    tileArr[i].x = [p1.tileX, p2.tileX]; // 橫坐標(biāo)范圍
    tileArr[i].y = [p2.tileY, p1.tileY]; // 縱坐標(biāo)范圍
}

let bagGrep = new bagpipe(20, { timeout: 1000 });
let path = "./default"; // 這個(gè)是你圖片要存放的位置

fs.access(path, fs.constants.F_OK, err => {
    if (err) fs.mkdir(path, err => {});
    for (let z = minZoom; z <= tileArr.length - 1; z++) {
        fs.access(`${path}/${z}`, fs.constants.F_OK, err => {
            if (err) fs.mkdir(`${path}/${z}`, err => {});
            for (let x = tileArr[z].x[0]; x <= tileArr[z].x[1]; x++) {
                fs.access(`${path}/${z}/${x}`, fs.constants.F_OK, err => {
                    if (err) fs.mkdir(`${path}/${z}/${x}`, err => {});
                });
            }
        });
    }
    setTimeout(() => {
        requestPush(); // 先要產(chǎn)生xyz.js  操作完createLevelArr的流程后再執(zhí)行這個(gè)
        // createLevelArr(); // 后面有說這個(gè)的用處
    }, 1000);
});

const writeFile = data => {
    fs.writeFile("./xyz.js", data, function(err) {
        if (err) {
            throw err;
        }
    });
};

/*
 * 這個(gè)函數(shù)是獲取一個(gè){x,y,z}的對象數(shù)組 并且寫入本地的xyz.js
 * 然后你自己需要在前端搭建一個(gè)百度地圖2.0版本的demo  https://www.echartsjs.com/examples/editor.html?c=map-polygon 按他這個(gè)來 但是樣式你改成你需要的
 * 重要的事情說三遍！ 2.0版本 2.0版本 2.0版本
 * 以上準(zhǔn)備做完后  F12找到一個(gè)瓦片圖的加載地址復(fù)制下來  接下來你需要去緩存所有的百度地圖自定義瓦片圖片 做法如下：
 * 在前端demo中引入xyz.js  遍歷這個(gè)數(shù)組  用img標(biāo)簽加載 設(shè)置src(路徑看download方法中的  產(chǎn)生圖片URL 開始 -> 產(chǎn)生圖片URL 結(jié)束)
 * 確保圖片都加載了一遍  做完這些你就可以注釋上面的createLevelArr調(diào)用   打開requestPush調(diào)用 然后就能拿到你所有需要的自定義瓦片圖了
 */
const createLevelArr = () => {
    let allXYZ = [];
    for (let z = minZoom; z <= tileArr.length - 1; z++) {
        for (let x = tileArr[z].x[0]; x <= tileArr[z].x[1]; x++) {
            for (let y = tileArr[z].y[0]; y <= tileArr[z].y[1]; y++) {
                allXYZ.push({
                    x,
                    y,
                    z
                });
            }
        }
    }
    writeFile(JSON.stringify(allXYZ));
};

const requestPush = () => {
    for (let z = minZoom; z <= tileArr.length - 1; z++) {
        for (let x = tileArr[z].x[0]; x <= tileArr[z].x[1]; x++) {
            for (let y = tileArr[z].y[0]; y <= tileArr[z].y[1]; y++) {
                bagGrep.push(download, x, y, z);
            }
        }
    }
};

const download = (x, y, z) => {
    // 產(chǎn)生圖片URL 開始
    let baiduApiArr = [
        "http://api0.map.bdimg.com/",
        "http://api1.map.bdimg.com/",
        "http://api2.map.bdimg.com/"
    ];
    let main = baiduApiArr[Math.abs(x + y) % baiduApiArr.length]; // 百度地址切換的規(guī)則 百度地圖源碼中有

    // 下面這個(gè)url是獲取自定義瓦片圖的地址 （這個(gè)url的獲取就是你用百度地圖2.0版本的庫搭建一個(gè)本地的demo 把地圖跑出來  然后你去看它的圖片請求  復(fù)制一條過來就好了）
    //let url =
    //    "http://api0.map.bdimg.com/customimage/tile?&x=7&y=2&z=5&udt=20190718&scale=1&ak=填你自己的ak&styles=t%3Awater%7Ce%3Aall%7Cc%3A%233990e9%2Ct%3Aland%7Ce%3Aall%7Cc%3A%23004981%2Ct%3Aboundary%7Ce%3Ag%7Cc%3A%23064f85%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Ahighway%7Ce%3Ag%7Cc%3A%23004981%2Ct%3Ahighway%7Ce%3Ag.f%7Cc%3A%23005b96%7Cl%3A1%2Ct%3Ahighway%7Ce%3Al%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Ag%7Cc%3A%23004981%2Ct%3Aarterial%7Ce%3Ag.f%7Cc%3A%2300508b%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%23056197%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Al%7Cv%3Aoff%2Ct%3Aboundary%7Ce%3Ag.f%7Cc%3A%23029fd4%2Ct%3Abuilding%7Ce%3Aall%7Cc%3A%231a5787%2Ct%3Alabel%7Ce%3Aall%7Cv%3Aoff";

    let url = `${main}customimage/tile?&x=${x}&y=${x}&z=${z}&customid=undefined`; // 這個(gè)是默認(rèn)樣式的瓦片圖
    // 產(chǎn)生圖片URL 結(jié)束

    request(
        {
            url,
            timeout: 180000 // 響應(yīng)時(shí)間可以設(shè)高點(diǎn)
        },
        (err, res, body) => {
            if (err) {
                console.log(err + "&" + x + "&" + y + "&" + z);
            }
        }
    ).pipe(fs.createWriteStream(`${path}/${z}/${x}/${y}.png`));
};

前端代碼就不上了