百度地图如何获取瓦片图

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

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

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

使用 tile-Lnglat-transform-es6来获取 x、y

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);console.log(`放大级别：${x},瓦片X: ${tileInfo.tileX}, Y: ${tileInfo.tileY}`);console.log(`放大级别：${x},瓦片X: ${tileInfo1.tileX}, Y: ${tileInfo1.tileY}`);
}

运行结果：

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=vtile&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=vtile&x=22&y=4&z=7&styles=pl&scaler=1&udt=

接口选择依据

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

‌数据需求类型‌
- 需要基础地图底图时使用/tile/?qt=tile（栅格瓦片）或/tile/?qt=vtile（矢量瓦片）‌1
- 需要POI名称、道路标签等标注信息时使用/onlinelabel/接口‌2
‌技术实现方式‌
- 移动端开发优先使用地图调起API（如baidumap://map/direction）‌1
- Web端开发建议通过SDK集成，支持矢量瓦片动态样式调整‌3
‌性能优化需求‌
- 矢量瓦片（vtile）适合需要动态样式或高缩放级别的场景‌4
- 栅格瓦片（tile）适合静态地图展示且对加载速度要求较高的场景‌4