大家都玩過Pokemon GO吧,其使用的地圖API就是Mapbox,看看這個例子吧。
Mapbox的計價方式,有很大的空間讓系統尚未到很熱門都可以免費運作。Mapbox功能,在某些方面比Google Maps AP更為優異,譬如下列幾個呈現數據分佈、飛越地圖、立體地圖的例子:
- Create and style clusters
- Display HTML clusters with custom properties
- Style circles with a data-driven property
- Play map locations as a slideshow
- Fly to a location based on scroll position
- Create a time slider
- Fly to a location
- Slowly fly to a location
- Extrude polygons for 3D indoor mapping
- Display buildings in 3D
- Animate 3D buildings based on ambient sounds
- Add a 3D model
使用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行。
- 這個程式所呈現的效果,主要是設定了cluster: true, clusterRadius: n, clusterMaxZoom: n。
- 並將circle-radius及circle-color屬性(注意註解有說這兩個屬性是Transitionable)設定採step方式變化,就能讓地圖上的分布點依據觀看層級變化而自動聚合及顏色大小都隨之改變。
以立體地圖來說,在前述的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行。
- 這個程式所呈現的效果,主要是設定了'type': 'fill-extrusion'而讓本來是2D的多邊形抽高變成3D立體呈現。
- 更進一步需要設定的參數fill-extrusion-color、fill-extrusion-height、fill-extrusion-base,是以get表示式取得在圖資裡面設定的多邊形顏色及立體化高度參數(color、height、base_height)。
- 更進一步,我們還可以用以filter篩選需要呈現的圖資,像是加上了 "filter": ['!=', ["get", "height"], 0], 就不會納入圖資裡面那些height為0的地板了,參考這個程式jsfiddle(或jsbin)的52行。
- 若要在地圖放上marker,參考這個最基本的Draw GeoJSON points例子,加入成為這個程式jsfiddle(或jsbin)的73~93行,是設定了'type': 'symbol',更進一步需要設定的參數icon-image(此例使用standard-icons)、text-field、text-font、text-offset、text-anchor。而自己再到Mapbox Studio Dataset編輯增加Point圖資(並設定Property: name=Exit),再將匯出的geojson檔案內容套用到該程式的26~27行,就能看到呈現的marker圖示及文字了。