mapbox-gl開(kāi)發(fā)：集成deck.gl
deck.gl是由uber開(kāi)發(fā)出來(lái)的基于WebGL的開(kāi)源大數(shù)據(jù)量可視化框架，具有提供不同類型可視化圖層，能夠和mapbox-gl集成。
deck.gl項(xiàng)目地址：
https://github.com/visgl/deck.gl
deck.gl和mapbox-gl集成有兩種方式：
1、以擴(kuò)展圖層的形式，將deck.gl作為mapbox-gl的一個(gè)圖層加載進(jìn)去，這里是mapbox-gl作為主體；
//引用mapbox-gl和deck.gl的類庫(kù)
? ? ? ?const {? MapboxLayer,
? ScatterplotLayer,
? ?GeoJsonLayer
?} = deck;
const AIR_PORTS ='json數(shù)據(jù)位置'；
? ? ? ??//定義deck.gl圖層
? ? ? ? ? ? ?const myDeckLayer = new MapboxLayer({
id: 'mydecklayer',
type: GeoJsonLayer,
data: AIR_PORTS,?
pickable: false,
stroked: true,
filled: true,
autoHighlight: false,
highlightColor: [0, 180, 0, 200],
extruded: false,
lineWidthScale: 0,
lineWidthMinPixels: 1,
getFillColor: [0, 0, 180, 0],
getLineColor: [255, 0, 0, 255],
getRadius: 0,
wireframe: false,
getLineWidth: 10,
getElevation: 8000??
});
? ? ? ? ? ? ? ? ? ? ? ? ?//初始化mapbox-gl
? ? ? ? ? ? ? ? ? ? ? ? let? map = new mapboxgl.Map({
container: 'map',
style:? mapbox地圖樣式配置,
center: [116, 37],
zoom: 9
});
?? ? ??? ? ? ? ? ? ? ? ?//添加deck.gl圖層
?? ?? ? ? ? ? ? ? ? ? ?map.addLayer(myDeckLayer);
?? ? ? ? ? ? ? ? ? ? ? //根據(jù)id移除圖層
? ? ? ? ? ? ? ? ? ? ? ?map.removeLayer('mydecklayer');??
2、以deck.gl為主體，設(shè)置deck.gl中使用的地圖是mapbox-gl；?? ? ? ? ? ??? ??//初始化deck.gl的對(duì)象，嵌入mapbox-gl的相關(guān)信息
? ? ? ? ? ? ? ? ? ? ? ? ? deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'mapbox-gl地圖的樣式',
latitude: 36,
longitude: 117,
zoom: 5,
bearing: 0,
pitch: 30
});
以mapbox-gl作為主體時(shí)，添加的deck.gl的圖層并不能夠響應(yīng)對(duì)應(yīng)的鼠標(biāo)事件，反之，以deck.gl作為主體，在mapbox-gl中添加的圖層，也不能響應(yīng)對(duì)應(yīng)的鼠標(biāo)事件。集成deck.gl能夠豐富地圖的大數(shù)據(jù)展示效果，實(shí)現(xiàn)mapbox-gl本身不能實(shí)現(xiàn)的一些效果，增強(qiáng)地圖的可視化效果。
比如mapbox-gl中加載的面狀圖層，不支持帶高程的顯示，但是deck.gl就能夠?qū)崿F(xiàn)。
不過(guò)deck.gl不能支持中文注記的顯示，這個(gè)在使用中要注意。
更多的deck.gl效果，可以參見(jiàn)官網(wǎng)的例子進(jìn)行集成實(shí)現(xiàn)。
