huaan011

1.根據(jù)百度地圖的經(jīng)度和緯度來獲取瓦片圖的 x、y坐標(biāo)值。

使用第三方j(luò)avascript庫，已經(jīng)有牛人實(shí)現(xiàn)了。 tile-lnglat-transform-es6 

如果想表現(xiàn)一下自己很牛，也可以自己去根據(jù)思路是實(shí)現(xiàn)。

使用 tile-Lnglat-transform-es6來 獲取 x、y以及經(jīng)度和緯度在對(duì)應(yīng)的瓦片圖上的像素坐標(biāo)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); /*廣西南寧市興寧區(qū)的左下角經(jīng)度和緯度*/
let tileInfo1 = TileLnglatTransformBaidu.lnglatToTile(108.797027224036, 23.1190233199556, x); /*廣西南寧市興寧區(qū)的右上角角經(jīng)度和緯度*/

let pixelInfo = TileLnglatTransformBaidu.lnglatToPixel(108.306705063584, 22.8103211365268, x); /*廣西南寧市興寧區(qū)的左下角經(jīng)度和緯度*/
let pixelInfo1 = TileLnglatTransformBaidu.lnglatToPixel(108.797027224036, 23.1190233199556, x); /*廣西南寧市興寧區(qū)的右上角角經(jīng)度和緯度*/

console.log(`放大級(jí)別：${x},瓦片X: ${tileInfo.tileX}, Y: ${tileInfo.tileY},瓦片像素坐標(biāo)X:${pixelInfo.pixelX},瓦片像素坐標(biāo)Y:${pixelInfo.pixelY}`);
console.log(`放大級(jí)別：${x},瓦片X: ${tileInfo1.tileX}, Y: ${tileInfo1.tileY},瓦片像素坐標(biāo)X:${pixelInfo1.pixelX},瓦片像素坐標(biāo)Y:${pixelInfo1.pixelY}`);
}

運(yùn)行結(jié)果：

還有個(gè)算法：直接調(diào)用百度的接口：https://api.map.baidu.com/geoconv/v2/?coords=114.21892734521,29.575429778924&model=3&ak=您的AK，計(jì)算出 bd09mc百度墨卡托米制坐標(biāo)。然后根據(jù)bd09mc套用公式計(jì)算出瓦片XY以及瓦片像素坐標(biāo) PixelX、PixelY。

 2、根據(jù)獲取的 x、y以及對(duì)應(yīng)的zoom來獲取瓦片。

#城市街道瓦片 {s} 取值 0，1，2，3，4，5，6，7，8，9 主要是負(fù)載均衡使用
http://online{s}.map.bdimg.com/onlinelabel/?qt=vtile&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=

##道路和標(biāo)記
http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=sl

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

請(qǐng)求的參數(shù)解釋：

http://online1.map.bdimg.com/tile/?qt=vtile&x=22&y=4&z=7&styles=pl&scaler=1&udt=
線瓦片請(qǐng)求URL，包含以下參數(shù)：
qt = tile：表示請(qǐng)求地圖瓦片 或者取值 qt= vtile：請(qǐng)求矢量瓦片（vector tile）
x = 22：瓦片的X坐標(biāo)
y = 4：瓦片的Y坐標(biāo)
z = 7：縮放級(jí)別為7級(jí)
styles = pl：使用普通地圖樣式
scaler = 1：縮放比例為1
udt =：未指定時(shí)間戳

城市街道瓦片請(qǐng)求路徑有2個(gè)，區(qū)別如下：

標(biāo)注層接口?：http://online1.map.bdimg.com/onlinelabel/?qt=vtile&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=

接口選擇依據(jù)

百度地圖瓦片服務(wù)接口的選擇需根據(jù)具體應(yīng)用場(chǎng)景和技術(shù)需求決定，主要考慮以下因素：

1. ?數(shù)據(jù)需求類型?

   • 需要基礎(chǔ)地圖底圖時(shí)使用/tile/?qt=tile（柵格瓦片）或/tile/?qt=vtile（矢量瓦片）?1
   • 需要POI名稱、道路標(biāo)簽等標(biāo)注信息時(shí)使用/onlinelabel/接口?2

2. ?技術(shù)實(shí)現(xiàn)方式?

   • 移動(dòng)端開發(fā)優(yōu)先使用地圖調(diào)起API（如baidumap://map/direction）?1
   • Web端開發(fā)建議通過SDK集成，支持矢量瓦片動(dòng)態(tài)樣式調(diào)整?3

3. ?性能優(yōu)化需求?

   • 矢量瓦片（vtile）適合需要?jiǎng)討B(tài)樣式或高縮放級(jí)別的場(chǎng)景?4

   • 柵格瓦片（tile）適合靜態(tài)地圖展示且對(duì)加載速度要求較高的場(chǎng)景?4

典型場(chǎng)景推薦

• ?導(dǎo)航類應(yīng)用?：使用地圖調(diào)起API（baidumap://map/direction）直接調(diào)用客戶端功能?1

• ?數(shù)據(jù)可視化?：優(yōu)先選擇矢量瓦片接口（/tile/?qt=vtile）實(shí)現(xiàn)自定義樣式?4

• ?標(biāo)注疊加?：通過/onlinelabel/接口獲取注記層數(shù)據(jù)?2

注意事項(xiàng)

• 所有接口需遵守百度地圖API使用條款，標(biāo)注層接口需特別注意坐標(biāo)類型參數(shù)（coord_type）的傳遞?1
• 移動(dòng)端開發(fā)需在AndroidManifest.xml中聲明定位權(quán)限

 根據(jù)獲取的XY值手動(dòng)下載的 廣西南寧興寧區(qū) 放大倍數(shù)為7的四張圖拼接而成的地圖：

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

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

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

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

 后期會(huì)根據(jù)XY值的規(guī)律，寫個(gè)批量下載工具來自動(dòng)完成。