91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用mapbox-gl開發deck.gl軌跡圖效果

發布時間:2021-12-30 14:35:00 來源:億速云 閱讀:258 作者:iii 欄目:大數據

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

mapbox-gl中能夠集成deck.gl的圖層,參見  mapbox-gl開發:集成deck.gl,擴展集成的形式是使用mapbox-gl的自定義圖層(CustomLayer)
動態軌跡圖的效果,在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下載下來,進行數據測試,其中的數據格式如下圖,有多條這樣的數據組成:

怎么用mapbox-gl開發deck.gl軌跡圖效果

引入deck.gl使用的圖層:

const {MapboxLayer,TripsLayer} = deck;

定義一個deck.gl的mapbox自定義圖層:  
//定義當前時間,這個時間的變化實現軌跡動態效果  
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的值實現動態效果

currentTime: time

}); 

       //mapbox-gl添加圖層

map.addLayer(myDeckLayer);

//循環修改時間,實現軌跡的動態效果

             function animate() {

time = (time+1.5)%1800;

myDeckLayer.setProps({ currentTime: time });

requestAnimationFrame(animate); 

    }


效果如下圖:  

怎么用mapbox-gl開發deck.gl軌跡圖效果

“怎么用mapbox-gl開發deck.gl軌跡圖效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

常州市| 鹤庆县| 通山县| 全椒县| 靖安县| 汤原县| 和平区| 张掖市| 宜宾县| 玉林市| 高青县| 河北区| 宁化县| 南投市| 东安县| 东方市| 新余市| 广南县| 沙湾县| 健康| 龙口市| 丹凤县| 长治市| 湄潭县| 桂林市| 安多县| 项城市| 淅川县| 内江市| 平乐县| 逊克县| 金湖县| 股票| 司法| 宜兴市| 南昌县| 射洪县| 南汇区| 肥城市| 富锦市| 苍山县|