mapbox-gl開(kāi)發(fā)：deck.gl軌跡圖效果
mapbox-gl中能夠集成deck.gl的圖層，參見(jiàn)mapbox-gl開(kāi)發(fā)：集成deck.gl，擴(kuò)展集成的形式是使用mapbox-gl的自定義圖層（CustomLayer），參見(jiàn)mapbox-gl API說(shuō)明：
https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface
動(dòng)態(tài)軌跡圖的效果，在echarts里有，同樣deck.gl中也有對(duì)應(yīng)的例子。echarts官方效果頁(yè)面：https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effectdeck.gl的樣例是TripsLayer，有時(shí)網(wǎng)絡(luò)的原因不一定能夠?yàn)g覽到。?
https://deck.gl/examples
在mapbox-gl集成的過(guò)程：
把官網(wǎng)的trips-v7.json下載下來(lái)，進(jìn)行數(shù)據(jù)測(cè)試，其中的數(shù)據(jù)格式如下圖，有多條這樣的數(shù)據(jù)組成：
引入deck.gl使用的圖層：
const {MapboxLayer,TripsLayer} = deck;
定義一個(gè)deck.gl的mapbox自定義圖層：
//定義當(dāng)前時(shí)間，這個(gè)時(shí)間的變化實(shí)現(xiàn)軌跡動(dòng)態(tài)效果
var? time = 100;
? ? ? ? myDeckLayer = new MapboxLayer({
id: 'mydecklayer',
?? ? ? ? ? ? ? ?//設(shè)置圖層類型為軌跡圖
type: TripsLayer,
? ? ? ? ??? ? ??//使用trip數(shù)據(jù)
data: tripdata,
?? ? ? ? ? ? ? ?//獲得數(shù)據(jù)中的路線和時(shí)間數(shù)據(jù)
getPath: d =>{??
return d.path;
},
getTimestamps: d => d.timestamps,
? ? ? ? ?? ? ? ?//設(shè)置軌跡顏色、透明度、長(zhǎng)度等信息
getColor: [253, 128, 0],
opacity: 0.5,
widthMinPixels: 5,
?rounded: true,
trailLength: 100,
?? ? ? ? ? ? ? ?//使用time變量，之后變化time的值實(shí)現(xiàn)動(dòng)態(tài)效果
currentTime: time
});?
? ? ? ?//mapbox-gl添加圖層
map.addLayer(myDeckLayer);
//循環(huán)修改時(shí)間，實(shí)現(xiàn)軌跡的動(dòng)態(tài)效果
? ? ? ? ? ? ?function animate() {
time = (time+1.5)%1800;
myDeckLayer.setProps({ currentTime: time });
requestAnimationFrame(animate);?
? ? }
效果如下圖：
