聯絡表單

 

Mapbox


大家都玩過Pokemon GO吧,其使用的地圖API就是Mapbox,看看這個例子吧。


Mapbox的計價方式,有很大的空間讓系統尚未到很熱門都可以免費運作。Mapbox功能,在某些方面比Google Maps AP更為優異,譬如下列幾個呈現數據分佈、飛越地圖、立體地圖的例子:


使用Mapbox的入門練習,參考Display a map例子,以
Mapbox GL JS最基本語法呈現地圖。然後再參考Create a draggable Marker例子,Mapbox GL JS的Marker語法將標記放至地圖上

以數據分佈來說,在前述的Create and style clusters例子留給我們一些線索,其資料來源是https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson(但是第3行"crs"是舊版參數要刪除如同此副本),這是以Mapbox Studio繪製匯出Datasets,我們也可以自己試試看,登入Mapbox Studio Datasets之後,將該副本檔案import到自己的Mapbox Studio Dataset加以編輯(繪製操作介紹可參考這篇文章),就能看到效果。然後,再將匯出的geojson檔案內容套用到這個程式jsfiddle(或jsbin)的22~23行。



以立體地圖來說,在前述的Extrude polygons for 3D indoor mapping例子留給我們一些線索,其資料來源是https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson(或下載此副本),這是以Mapbox Studio繪製匯出Datasets,我們也可以自己試試看,登入Mapbox Studio Datasets之後,將該副本檔案import到自己的Mapbox Studio Dataset加以編輯 (先將地圖位置定於 -87.61694, 41.86625 ),就能看到效果。其中,特別注意其設定的Property有:  level=1、name=命名、base_height=0、height=40、color=色碼,這些能讓程式加以引用呈現出立體效果。然後自己可以試著增刪該建築物的構成,再將匯出的geojson檔案內容套用到這個程式jsfiddle(或jsbin)的26~27行。





Total comment

Author

ChenYuYi

0   意見

Cancel Reply