mapbox-gl開發(fā)教程（三）：在線影像底圖加載
--mapbox-gl是一個開源、基于webgl技術的前端地圖類庫--
? ? ? ? 應用系統(tǒng)的地圖開發(fā)中，首先需要一張底圖，才能夠在上邊進行各類應用的開發(fā)，在本
身不是專業(yè)地圖服務提供商時，使用現(xiàn)有的在線影像底圖，不失為一種省時、省力的方式。最
常見的是 國家地理信息中心 提供的天地圖在線數(shù)據(jù)，保證數(shù)據(jù)的準確性和實時性。
天地圖的在線切片數(shù)據(jù)為例，mapbox-gl如何進行加載：
一種是修改的樣式（style）配置：
let map = new mapboxgl.Map(
{container: 'map',
?style:{? "version": 8,?
"sources": {? ? ?
//天地圖底圖分成底圖和注記兩部分，需設置兩個數(shù)據(jù)源? ?
"tiandituimg": {? ? ?
"type": "raster",? ? ??
"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=<天地圖token>"],? ? ??
"tileSize": 256? ??
},? ?
"tiandituano": {??
? ? "type": "raster",? ??
?"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=<天地圖token>"],??
? ? "tileSize": 256? ?
?}? },??
"layers": [{????
??//根據(jù)數(shù)據(jù)源，添加兩個圖層? ? ??
"id": "tiandituimg",? ??
? "type": "raster",? ? ?
"source": "tiandituimg",? ? ??
"minzoom": 0,? ? ??
"maxzoom": 18? ??
},? ? {? ? ?
"id": "tiandituano",? ? ?
"type": "raster",? ? ??
"source": "tiandituano",? ??
?"minzoom": 0,? ? ?
"maxzoom": 18? ? }? ]}
?});
另一種是通過js代碼進行加載，需要在地圖的load事件中進行加載：
map.on("load", () => {
//添加數(shù)據(jù)源
map.addSource('tiandituimg',? ?
{? ??
? "type": "raster",? ? ?
?"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=<天地圖token>"],? ??
? "tileSize": 256? ?
?});
//添加圖層，對應source名稱
map.addLayer({?? ? ?
"id": "tiandituimg",? ? ?
?"type": "raster",? ? ??
"source": "tiandituimg",? ? ?
"minzoom": 0,? ? ?
"maxzoom": 18? ?
});});?
有了基本的在線影像底圖做底，我們就能在實際的應用中進行開發(fā)了。
附：幾種常見影像底圖地址//藍色底圖效果
https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/{z}/{y}/{x}.png
//高德在線底圖
http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
//openstreetmap在線底圖
https://tile.openstreetmap.org/{z}/{x}/{y}.png
關注公眾號查看更多：
