百度地图如何获取瓦片图

1.根据百度地图的经度和纬度来获取瓦片图的 x、y坐标值。

使用第三方javascript库，已经有牛人实现了。 tile-lnglat-transform-es6 

如果想表现一下自己很牛，也可以自己去根据思路是实现。

使用 tile-Lnglat-transform-es6来 获取 x、y以及经度和纬度在对应的瓦片图上的像素坐标pixelX、pixelY.

import TileLnglatTransform from '/js/tile-lnglat-transform-es6/index.js'
console.log("TileLnglatTransform:", TileLnglatTransform);
const TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu;
for (let x = 7; x < 20; x++) {
let tileInfo = TileLnglatTransformBaidu.lnglatToTile(108.306705063584, 22.8103211365268, x); /*广西南宁市兴宁区的左下角经度和纬度*/
let tileInfo1 = TileLnglatTransformBaidu.lnglatToTile(108.797027224036, 23.1190233199556, x); /*广西南宁市兴宁区的右上角角经度和纬度*/

let pixelInfo = TileLnglatTransformBaidu.lnglatToPixel(108.306705063584, 22.8103211365268, x); /*广西南宁市兴宁区的左下角经度和纬度*/
let pixelInfo1 = TileLnglatTransformBaidu.lnglatToPixel(108.797027224036, 23.1190233199556, x); /*广西南宁市兴宁区的右上角角经度和纬度*/

console.log(`放大级别：${x},瓦片X: ${tileInfo.tileX}, Y: ${tileInfo.tileY},瓦片像素坐标X:${pixelInfo.pixelX},瓦片像素坐标Y:${pixelInfo.pixelY}`);
console.log(`放大级别：${x},瓦片X: ${tileInfo1.tileX}, Y: ${tileInfo1.tileY},瓦片像素坐标X:${pixelInfo1.pixelX},瓦片像素坐标Y:${pixelInfo1.pixelY}`);
}

 

运行结果：

 

还有个算法：直接调用百度的接口：https://api.map.baidu.com/geoconv/v2/?coords=114.21892734521,29.575429778924&model=3&ak=您的AK，计算出 bd09mc百度墨卡托米制坐标。然后根据bd09mc套用公式计算出瓦片XY以及瓦片像素坐标 PixelX、PixelY。

 

 2、根据获取的 x、y以及对应的zoom来获取瓦片。

#城市街道瓦片 {s} 取值 0，1，2，3，4，5，6，7，8，9 主要是负载均衡使用
http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}
http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=

##道路和标记
http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl

##卫星影像
https://maponline{s}.bdimg.com/starpic/?qt=satepc&u=x={x};y={y};z={z};v=009;type=sate&fm=46

请求的参数解释：

http://online1.map.bdimg.com/tile/?qt=tile&x=22&y=4&z=7&styles=pl&scaler=1&udt=
线瓦片请求URL，包含以下参数：
qt = tile：表示请求地图瓦片 或者取值 qt= vtile：请求矢量瓦片（vector tile）
x = 22：瓦片的X坐标
y = 4：瓦片的Y坐标
z = 7：缩放级别为7级
styles = pl：使用普通地图样式
scaler = 1：缩放比例为1
udt =：未指定时间戳

城市街道瓦片请求路径有2个，区别如下：

标注层接口‌：http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=49310&y=10244&z=18

‌通用瓦片接口‌：http://online1.map.bdimg.com/tile/?qt=tile&x=22&y=4&z=7&styles=pl&scaler=1&udt=

 

 

接口选择依据

百度地图瓦片服务接口的选择需根据具体应用场景和技术需求决定，主要考虑以下因素：

1. ‌数据需求类型‌

   • 需要基础地图底图时使用/tile/?qt=tile（栅格瓦片）或/tile/?qt=vtile（矢量瓦片）‌1
   • 需要POI名称、道路标签等标注信息时使用/onlinelabel/接口‌2

2. ‌技术实现方式‌

   • 移动端开发优先使用地图调起API（如baidumap://map/direction）‌1
   • Web端开发建议通过SDK集成，支持矢量瓦片动态样式调整‌3

3. ‌性能优化需求‌

   • 矢量瓦片（vtile）适合需要动态样式或高缩放级别的场景‌4

   • 栅格瓦片（tile）适合静态地图展示且对加载速度要求较高的场景‌4

典型场景推荐

• ‌导航类应用‌：使用地图调起API（baidumap://map/direction）直接调用客户端功能‌1

• ‌数据可视化‌：优先选择矢量瓦片接口（/tile/?qt=vtile）实现自定义样式‌4

• ‌标注叠加‌：通过/onlinelabel/接口获取注记层数据‌2

注意事项

• 所有接口需遵守百度地图API使用条款，标注层接口需特别注意坐标类型参数（coord_type）的传递‌1
• 移动端开发需在AndroidManifest.xml中声明定位权限

 根据获取的XY值手动下载的 广西南宁兴宁区 放大倍数为7的四张图拼接而成的地图：

http://online1.map.bdimg.com/tile/?qt=tile&x=22&y=4&z=7&styles=pl&scaler=1&udt=

http://online1.map.bdimg.com/tile/?qt=tile&x=22&y=5&z=7&styles=pl&scaler=1&udt=

http://online1.map.bdimg.com/tile/?qt=tile&x=23&y=4&z=7&styles=pl&scaler=1&udt=

http://online1.map.bdimg.com/tile/?qt=tile&x=23&y=5&z=7&styles=pl&scaler=1&udt=

 后期会根据XY值的规律，写个批量下载工具来自动完成。