注：當前使用的是 ol 5.3.0 版本，天地圖使用的
key請到天地圖官網申請，并替換為自己的key
隨著GIS應用的不斷發展，Web地圖也越來越豐富，除了像ESRI、超圖、中地數碼這樣GIS廠商有各自的數據源格式，也有Google、百度、高德、騰訊提供的GIS資源，如何加載各種GIS數據源，是WebGIS開發要解決的一個關鍵問題。
本節主要介紹加載百度地圖數據。
1. 如何加載百度地圖數據
可以參照瓦片地圖的方法來加載百度地圖，在OpenLayer 5地圖庫中沒有加載百度地圖數據源的方法，所以需要根據百度地圖瓦片請求格式拓展數據源來加載。
// 分辨率數組
const resolutions = []
for (let i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i)
}const tileGrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions
})
// 百度地圖數據源
const baiduSource = new ol.source.TileImage({projection: projection, // 坐標參考tileGrid: tileGrid, // 瓦片請求方式tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return ""}const z = tileCoord[0]let x = tileCoord[1]let y = tileCoord[2]if (x < 0) {x = "M" + (-x)}if (y < 0) {y = "M" + (-y)}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";}
})
tileUrlFunction
拼接瓦片地圖URL，{x}{y}{z}對應瓦片行列號和級數。
projection
地圖投影坐標系，百度地圖才用EPSG:3857坐標系。
tileGrid
切片網格，地圖切片原點為[0,0]
2. 完整代碼2
其中libs文件夾下的包需要更換為自己下載的本地包或者引用在線資源。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加載Baidu數據</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微軟雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style></head><body><div id="map" title="地圖顯示"></div></body></html><script>//地圖投影坐標系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地圖服務參數簡單介紹============================////================================vec：矢量圖層=================================////================================img：影像圖層=================================////================================cva：注記圖層=================================////======================其中：_c表示經緯度投影，_w表示球面墨卡托投影============////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地圖影像圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地圖影像注記圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11421771, 4288300],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection}),// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([// 加載鼠標控件new ol.control.MousePosition()])})// map.addLayer(TDTImgLayer)// map.addLayer(TDTImgCvaLayer)const resolutions = []for (let i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i)}const tileGrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions})// 百度地圖數據源const baiduSource = new ol.source.TileImage({projection: projection,tileGrid: tileGrid,tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return ""}const z = tileCoord[0]let x = tileCoord[1]let y = tileCoord[2]if (x < 0) {x = "M" + (-x)}if (y < 0) {y = "M" + (-y)}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";}})const baiduLayer = new ol.layer.Tile({source: baiduSource})map.addLayer(baiduLayer)
</script>
?
OpenLayers示例數據下載，請回復關鍵字：ol數據
全國信息化工程師－GIS 應用水平考試資料，請回復關鍵字：GIS考試
?
【GIS之路】 已經接入了智能助手，歡迎關注，歡迎提問。
歡迎訪問我的博客網站-長談GIS：
http://shanhaitalk.com
都看到這了，不要忘記點贊、收藏 + 關注 哦 ！
本號不定時更新有關 GIS開發 相關內容，歡迎關注 !
