本篇內容介紹了“怎么用mapbox-gl開發(fā)deck.gl軌跡圖效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯專注于南丹企業(yè)網站建設,響應式網站開發(fā),商城網站建設。南丹網站建設公司,為南丹等地區(qū)提供建站服務。全流程按需策劃，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯專業(yè)和態(tài)度為您提供的服務

mapbox-gl中能夠集成deck.gl的圖層，參見  mapbox-gl開發(fā)：集成deck.gl，擴展集成的形式是使用mapbox-gl的自定義圖層（CustomLayer）

動態(tài)軌跡圖的效果，在echarts里有，同樣deck.gl中也有對應的例子。

echarts官方效果頁面：

https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect

deck.gl的樣例是TripsLayer，有時網絡的原因不一定能夠瀏覽到。   

https://deck.gl/examples

在mapbox-gl集成的過程：  

把官網的trips-v7.json下載下來，進行數據測試，其中的數據格式如下圖，有多條這樣的數據組成：

引入deck.gl使用的圖層：

const {MapboxLayer,TripsLayer} = deck;

定義一個deck.gl的mapbox自定義圖層：  

//定義當前時間，這個時間的變化實現軌跡動態(tài)效果  

var  time = 100;

        myDeckLayer = new MapboxLayer({

id: 'mydecklayer',

                //設置圖層類型為軌跡圖

type: TripsLayer,

                //使用trip數據

data: tripdata,

                //獲得數據中的路線和時間數據

getPath: d =>{  

return d.path;

},

getTimestamps: d => d.timestamps,

                //設置軌跡顏色、透明度、長度等信息

getColor: [253, 128, 0],

opacity: 0.5,

widthMinPixels: 5,

 rounded: true,

trailLength: 100,

                //使用time變量，之后變化time的值實現動態(tài)效果

currentTime: time

}); 

       //mapbox-gl添加圖層

map.addLayer(myDeckLayer);

//循環(huán)修改時間，實現軌跡的動態(tài)效果

             function animate() {

time = (time+1.5)%1800;

myDeckLayer.setProps({ currentTime: time });

requestAnimationFrame(animate); 

    }

效果如下圖：  

“怎么用mapbox-gl開發(fā)deck.gl軌跡圖效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前標題：怎么用mapbox-gl開發(fā)deck.gl軌跡圖效果
URL分享：http://www.yijiale78.com/article8/jjpiop.html

成都網站建設公司_創(chuàng)新互聯，為您提供、域名注冊、企業(yè)網站制作、外貿建站、做網站、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯