Mapbox + deck.gl | Uber如何做地理信息數據可視化?(附案例源碼)
熟悉數據可視化開發的朋友都知道,Uber 的 vis.gl 套件,可以幫助用戶繪製移動趨勢,並且通過數據可視化來瞭解城市的脈搏。 因為涉及到出行、可視化等場景,根據Uber官方博客介紹,Uber 選擇與開源的全球地圖平臺 Mapbox 合作,加強數據可視化工具的開發,並豐富開源社區的內容提高活躍度。
Mapbox GL JS v0.50支持將第三方圖層集成到deck.gl中相似的WebGL環境中,這個功能幫助deck.gl的用戶能夠處理更大範圍的用例,在易用性、靈活性和豐富性上更上一層樓。
Uber的開源工具Deck.gl和Mapbox GL JS經常被組合使用,可以創建炫酷的地理信息可視化效果。Deck.gl的MapView旨在與Mapbox基本地圖協同工作, 兩個庫中相同的相機設置(中心,縮放,間距和方位)可以進行無縫匹配, 在幾乎所有的地理空間數據應用程序中,Mapbox都被用作deck.gl可視化層的背景。
Mapbox GL JS最新版本(v0.50)中的新功能使第三方圖層可以繪製到相同的WebGL環境中。 這為更緊密集成的地理空間可視化開闢了許多新的可能性。 例如,可以在Mapbox的基礎地理和標籤圖層之間插入deck.gl GeoJSON圖層,這樣填充的多邊形不再妨礙地圖的可讀性; Deck.gl的弧形圖層和Mapbox的建築物圖層可以同時出現在城市的空域,3D元素也可以正確地相互遮擋。
具體來說,Uber在deck.gl的V6.2版本中推出了新的模塊@deck.gl/mapbox, 您可以到Github上研究研究開源代碼,也可以繼續看下面的快速上手教程:
快速上手教程
全新的實驗類MapboxLayer是Mapbox GL JS的自定義圖層界面的實現,我們可以使用nmp導入。
npm install @deck.gl/mapbox
import {MapboxLayer} from 『@deck.gl/mapbox』;
或者使用 deck.gl standalone bundle。
<script src=」https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src=』https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js></script>
<script type=」text/javascript」> const {MapboxLayer} = deck; </script>
MapboxLayer的實例可以通過map.addLayer()(https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/)載入到Mapbox圖層中,類構造函數有兩種風格,一種用於Mapbox開發人員,另一種用於deck.gl開發人員。
- 使用deck.gl圖層作為Mapbox附加組件
您可以使用deck.gl的圖層目錄中的任何圖層類型及其相應的道具製作MapboxLayer:
源代碼
Demo:deck.gl + Mapbox: Get Started (Demo)
請注意,以這種方式使用時,不支持基於WebGL2的deck.gl功能,例如屬性轉換和GPU加速聚合。
- 將Mapbox添加到deck.gl React應用程序
修改正在工作的deck.gl React應用,並集成Mapbox並不難,下面是簡單的步驟:
- 將應用程序的react-map-gl依賴項升級到版本4.0.0-beta。 這個版本允許我們提供為Mapbox創建的deck.gl的WebGL環境。
- 像往常一樣將圖層傳遞到<DeckGL />組件中。
- 載入Mapbox地圖時,我們通過引用deck.gl堆棧中現有圖層的ID來創建MapboxLayers並將其添加到Mapbox中。
源代碼
幾個案例
就像在文章《Custom Layers | 一行代碼生成炫酷的可視化地圖,別錯過這款 Uber 開源工具》中提到的那樣,這樣的可視化方案已經集成到了實際案例中,例如:
- 可視化英國的道路交通事故情況
該可視化案例描繪了1979年至2016年英國的人身傷害交通事故。它使用deck.gl的HexagonLayer來匯總每個六邊形單元邊界內的數據。 HexagonLayer插入Mapbox的標籤圖層下方。
這個案例比較突出的地方是3D拉伸,為可視化顯示新增了維度。
案例源碼: https://bl.ocks.org/Pessimistress/1a4f3f5eb3b882ab4dd29f8ac122a7be
- 可視化美國的縣城遷徙情況
該可視化案例顯示了2009 - 2013年間美國的縣到縣遷移。 將滑鼠懸停在地圖上可查看進出特定區域的人員。 它使用自定義的deck.gl圖層,根據滑鼠位置過濾弧線。
這個案例比較突出的地方是弧線軌跡繪製,之前並沒有很好的工具支持這一點。
案例源碼:https://bl.ocks.org/Pessimistress/dc2becf3809c67dc443b4dbab1b9a46f
其實早在2018年上半年,Uber與Mapbox已經有過一次合作,而通過上面的案例,我們可以瞭解到最近這次合作,將地理空間數據可視化擴展了新的維度:更靈活、更輕量、更美觀。
如果你想了解如何具體使用,可以參考這個Demo:https://bl.ocks.org/Pessimistress/432693e986ff34c976a2fc57b9c9e2d9
推薦閱讀: