百度离线地图开发，node实现地图瓦片下载

最近有个Web项目要用离线地图，项目是在内网环境，找了很多资料，踩了很多坑，好在已经实现了，下面把资料整理一下。

首先是百度离线地图开发包，原文地址是http://www.xiaoguo123.com/p/baidumap_offline_v21

这是数据包-百度离线地图API V2.1

里面有在线地图的基本API，可以满足绝大部分需求，不行的在自己扩展，附两张目录结构图

<script type="text/javascript" src="offlinemap/map_load.js"></script>
<link rel="stylesheet" type="text/css" href="offlinemap/css/map.css"/>

项目所需的两个入口文件，其他按正常百度地图API开发即可

之后就是瓦片地图的下载，也就是文件夹tiles，里面是百度地图的底图瓦片目录，下面贴上我的下载代码

var request = require('request') // 用于请求瓦片地图
var fs = require("fs");  // 文件操作
var bagpipe = require('bagpipe')  //  用于异步请求数量控制
var TileLnglatTransform = require('tile-lnglat-transform'); //  用于经纬度转换为瓦片坐标
var x1 = 120.128465, y1 = 30.393577 // 起始点坐标（左上角）
var x2 = 120.708555, y2 = 29.914415 // 终点坐标（右下角）// 根据地图平台使用转换类
var TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu;
var all = [] // 保存所有层级瓦片坐标等信息
for(i = 3; i <= 18; i++){all[i] = {}p1 = TileLnglatTransformBaidu.lnglatToTile(x1, y1, i)p2 = TileLnglatTransformBaidu.lnglatToTile(x2, y2, i)all[i].t = i // 层级all[i].x = [p1.tileX, p2.tileX] // 瓦片横坐标范围（左至右）all[i].y = [p2.tileY, p1.tileY] // 瓦片纵坐标范围（下至上）
}
// console.log(all)
var bag = new bagpipe(100, {timeout: 1000}) //限制请求数，此处为100，可根据网络情况修改
var path = './tiles' // 瓦片目录
fs.access(path, fs.constants.F_OK, err => {// 创建tiles文件夹if (err) fs.mkdir(path, err => {})for (let z = 3; z <= all.length - 1; z++) {fs.access(`${path}/${z}`, fs.constants.F_OK, err => {// 创建tiles/Z文件夹 ,Z是层级if (err) fs.mkdir(`${path}/${z}`, err => {})for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {fs.access(`${path}/${z}/${x}`, fs.constants.F_OK, err => {// 创建tiles/Z/X文件夹 ,X是瓦片横坐标if (err) fs.mkdir(`${path}/${z}/${x}`, err => {})})}})}// 文件夹可能较多，等待1s开始下载setTimeout(() => {task()}, 1000)
})
function task() {for (let z = 3; z <= all.length - 1; z++) {for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {for (let y = all[z].y[0]; y <= all[z].y[1]; y++) {// 将下载任务推入队列，bag会以100张为单位批量下载bag.push(download, x, y, z)}}}
}
function download(i, j, z) {// url是百度服务器上的图片资源，尾部时间可根据需要修改，最好下载最新的let url = `http://online0.map.bdimg.com/tile/?qt=tile&x=${i}&y=${j}&z=${z}&styles=pl&scaler=1&udt=20180711`request({url, timeout: 4000}, (err, res, body) => {if (err) {console.log(err)}}).pipe(fs.createWriteStream(`${path}/${z}/${i}/${j}.png`));
}

这里引用了两个包，一个BagPipe用来限制并发，一个tile-lnglat-transform用来转换坐标

部分用法在代码注释里有，详细的可参考他们的项目。图片量较大，上图是杭州市萧山区3到18级瓦片总共8W+png，约300M。

19级加上的话要30W+png，没敢下有点多。。。

之后就是将下载好的tiles文件夹覆盖到项目目录下，目录结构第二张的tiles文件夹，

这里再提供一个好用的瓦片下载器

至此，离线地图基本完成，愉快的开发吧！

百度离线地图开发，node实现地图瓦片下载相关推荐

项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
AndroidStudio百度地图开发之显示地图
最近打算研究一些百度地图相关的东西,由于官方网站给的都是基于Eclipse开发的例子,所以在研究过程中遇到不少的坑,在这里记录一下,对后来初用AndroidStudio 开发百度地图的兄弟们也算有个 ...
高德离线地图开发 java_使用离线地图-创建地图-开发指南-Android 地图SDK | 高德地图API...
高德3D 地图 SDK支持离线地图功能.(2D 地图 SDK 不支持离线地图功能) 离线地图可满足在无网络环境下查看地图信息的需求,在设备本地有离线地图数据的情况下,SDK 会优先加载离线地图. 离线 ...
高德离线数据api_使用离线地图-创建地图-开发指南-iOS 地图SDK | 高德地图API
高德3D 地图 SDK支持离线地图功能.(2D 地图 SDK 不支持离线地图功能) 离线地图可满足在无网络环境下查看地图信息的需求,在设备本地有离线地图数据的情况下,SDK 会优先加载离线地图. 离线 ...
地图开发如何选择地图开放平台
作为现代社会中不可或缺的一部分,地图应用越来越重要.在各种不同的行业中,地图已经成为了一种必须的解决方案.当然,要进行地图开发,我们需要一个好用又易用的地图开发平台.但是,选择一个适合自己的平台,并不 ...
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...
高德地图开发(一)显示地图与定位
如果地图功能随处可见,应用很广,这里利用高德地图的SDK来实现地图的显示以及定位功能.如需要详细了解参考官网信息http://lbs.amap.com/api/android-sdk/summary ...
js室内地图开发_室内地图 JavaScript API
室内地图JavaScript API文档 V1.2 主要功能类: Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. //示例初始化地图 var map = new Indoor.M ...
Android 百度地图开发问题----解决地图有时候加载不出来问题
相信很多人在开发百度地图的时候会出现百度地图有时候会加载不出来,只显示网格图. 这个问题究其原因就是申请百度key的时候填写的SHA1也就是指纹证书有问题.估计很多开发者都是照着百度开放平台上介绍的流 ...

百度离线地图开发，node实现地图瓦片下载

百度离线地图开发，node实现地图瓦片下载相关推荐

最新文章

热门文章