当前位置: 首页 > 后端技术 > Node.js

百度地图自定义瓦片地图获取

时间:2023-04-03 18:47:03 Node.js

nodejs代码constrequest=require('request');constfs=require('fs');const风笛=require('风笛');constTileLnglatTransform=require('tile-lnglat-transform');让[x1,y1]=[72.26,54.57];//起点坐标(左上角)let[x2,y2]=[137.31,17.8];//终点坐标(右下角)letTileLnglatTransformBaidu=TileLnglatTransform.TileLnglatTransformBaidu;//根据地图平台使用的转换类,这里使用百度的lettileArr=[];让[最小缩放,最大缩放]=[5,9];//最大和最小缩放级别/*循环生成瓦片地图目录结构*/for(leti=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];//垂直坐标范围}letbagGrep=newbagpipe(20,{timeout:1000});letpath='./default';//这是你的图片存储的地方fs.access(path,fs.constants.F_OK,err=>{if(err)fs.mkdir(path,err=>{});for(letz=minZoom;z<=tileArr.length-1;z++){fs.access(`${path}/${z}`,fs.constants.F_OK,err=>{if(err)fs.mkdir(`${path}/${z}`,err=>{});for(letx=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);});constwriteFile=data=>{fs.writeFile('./xyz.js',data,function(err){if(err){throwerr;}});};/**这个函数是获取一个对象{x,y,z}的数组,写入本地的xyz.js*然后需要在前端搭建一个百度地图2.0demohttps://www.echartsjs。com/examples/editor.html?c=map-polygon按照他的说法,不过你把样式改成你需要的*重要的事情说三遍!Version2.0Version2.0Version2.0*以上准备工作完成后,F12找到一个tile图片的加载地址,复制。接下来,需要缓存所有的百度地图自定义瓦片图片。方法如下:*在前端demo中引入xyz.js迭代这个数组使用img标签加载并设置src(路径见下载方式中生成图片URL开始->生成图片URL结束)*确保图片加载一次。完成这些之后,你可以注释掉上面的createLevelArr调用,打开requestPush调用,然后你就可以得到所有你需要的自定义tile*/constcreateLevelArr=()=>{letallXYZ=[];for(letz=minZoom;z<=tileArr.length-1;z++){for(letx=tileArr[z].x[0];x<=tileArr[z].x[1];x++){对于(lety=tileArr[z].y[0];y<=tileArr[z].y[1];y++){allXYZ.push({x,y,z});}}}writeFile(JSON.stringify(allXYZ));};constrequestPush=()=>{for(letz=minZoom;z<=tileArr.length-1;z++){for(letx=tileArr[z].x[0];x<=tileArr[z].x[1];x++){for(lety=tileArr[z].y[0];y<=tileArr[z].y[1];y++){bagGrep.push(下载,x,y,z);}}}};constdownload=(x,y,z)=>{//生成图片URLstartletbaiduApiArr=['http://api0.map.bdimg.com/','http://api1.map.bdimg.com/','http://api2.map.bdimg.com/'];letmain=baiduApiArr[Math.abs(x+y)%baiduApiArr.length];//百度地图源码中包含了百度地址切换规则//下面的url是获取自定义瓦片地图的地址(这个url的获取是你使用百度地图2.0版本的库搭建本地demo,运行地图出来,然后你可以去看看它的图片并要求复制一张。)//leturl=//'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';让url=`${main}customimage/tile?&x=${x}&y=${x}&z=${z}&customid=undefined`;//这是默认样式的平铺图片//生成图片URLendrequest({url,timeout:180000//响应时间可以设置高},(err,res,body)=>{if(err){console.log(err+'&'+x+'&'+y+'&'+z);}}).pipe(fs.createWriteStream(`${path}/${z}/${x}/${y}.png`));};前端代码不会上传