亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

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

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

怎么用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

平顺县| 富顺县| 梁山县| 乾安县| 兰西县| 长子县| 金塔县| 寿光市| 牙克石市| 库尔勒市| 织金县| 平顺县| 新丰县| 汽车| 凤冈县| 松桃| 土默特左旗| 镇平县| 象州县| 从江县| 会宁县| 南汇区| 芜湖县| 开封市| 镇江市| 盘山县| 敦化市| 北安市| 阜新| 通渭县| 长宁县| 宿松县| 阜阳市| 西青区| 海丰县| 商丘市| 宝清县| 渭源县| 磐安县| 巴楚县| 孙吴县|