nodejs代码
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]; // 起始点坐标(左上角)
let [x2, y2] = [137.31, 17.8]; // 终点坐标(右下角)
let TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu; // 根据地图平台使用转换类 这里是用百度的
let tileArr = [];
let [minZoom, maxZoom] = [5, 9]; // 最大最小缩放等级
/* 循环产生瓦片图目录结构 */
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]; // 横坐标范围
tileArr[i].y = [p2.tileY, p1.tileY]; // 纵坐标范围
}
let bagGrep = new bagpipe(20, { timeout: 1000 });
let path = './default'; // 这个是你图片要存放的位置
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(); // 先要产生xyz.js 操作完createLevelArr的流程后再执行这个
// createLevelArr(); // 后面有说这个的用处
}, 1000);
});
const writeFile = data => {
fs.writeFile('./xyz.js', data, function(err) {
if (err) {
throw err;
}
});
};
/*
* 这个函数是获取一个{x,y,z}的对象数组 并且写入本地的xyz.js
* 然后你自己需要在前端搭建一个百度地图2.0版本的demo https://www.echartsjs.com/examples/editor.html?c=map-polygon 按他这个来 但是样式你改成你需要的
* 重要的事情说三遍！ 2.0版本 2.0版本 2.0版本
* 以上准备做完后 F12找到一个瓦片图的加载地址复制下来 接下来你需要去缓存所有的百度地图自定义瓦片图片 做法如下：
* 在前端demo中引入xyz.js 遍历这个数组 用img标签加载 设置src(路径看download方法中的 产生图片URL 开始 -> 产生图片URL 结束)
* 确保图片都加载了一遍 做完这些你就可以注释上面的createLevelArr调用 打开requestPush调用 然后就能拿到你所有需要的自定义瓦片图了
*/
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) => {
// 产生图片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]; // 百度地址切换的规则 百度地图源码中有
// 下面这个url是获取自定义瓦片图的地址 (这个url的获取就是你用百度地图2.0版本的库搭建一个本地的demo 把地图跑出来 然后你去看它的图片请求 复制一条过来就好了)
//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`; // 这个是默认样式的瓦片图
// 产生图片URL 结束
request(
{
url,
timeout: 180000 // 响应时间可以设高点
},
(err, res, body) => {
if (err) {
console.log(err + '&' + x + '&' + y + '&' + z);
}
}
).pipe(fs.createWriteStream(`${path}/${z}/${x}/${y}.png`));
};
前端代码就不上了
