iT邦幫忙

2022 iThome 鐵人賽

DAY 21
1

這應該是我們要介紹的最後一支 API 了,那就是 Direction~ /images/emoticon/emoticon34.gif
這個功能有在用 Google Map 的你應該再熟悉不過了吧!
其實在 Mapbox 也有提供導航的服務,而且功能上也不差於 Google Map 的 (⁎⁍̴̛ᴗ⁍̴̛⁎)

那我們今天就來看看 Direction 提供了哪些功能,我們要如何呼叫這支 API 進行使用~
開始吧!

Directions API

Mapbox 的 Directions API 可以為使用者提供路線、轉彎指示和行程所花費的時間,在交通模式 (profile)上也提供了 4 種可以讓使用者做選擇:driving-trafficdrivingwalkingcycling,根據不同的交通模式會有相對應的結果產出。

使用範例:cycling

這是官網提供的一個範例程式碼,明天我們會先來做一下這張地圖~

Build a Request

來看一下怎麼呼叫 Directions API 吧!

https://api.mapbox.com/directions/v5/{profile}/{coordinates}

在 Direction API 中,必須要提供這 2 個基本參數:

  • profile:交通模式
    • driving-traffic:汽車路線,會考慮當前和歷史的交通狀況
    • driving:汽車路線,通過高速公路來顯示最快的路線
    • walking:行人和遠足路線,顯示使用人行道或小徑的最短路徑
    • cycling:自行車路線,顯示對使用者來說更短更安全的路線
  • coordinates:起點和目的地坐標,用分號 ; 分隔

可選參數

官網也有提供一些參數可以讓我們根據需求來做使用,有興趣的可以看一下這裡
放一個可選參數來舉個例:

https://api.mapbox.com/directions/v5/mapbox/cycling/-84.518641,39.134270;-84.512023,39.102779?geometries=geojson&access_token=${mapboxgl.accessToken}
  • geometries=geojson 指的是以 GeoJSON 格式回傳值

在使用 Direction API 時,要記得把 access_token 放上去喔~

Response

在我們呼叫 API 提出請求時,會回傳一個 JSON Object,包含這些訊息:

  • waypoints:Waypoint Object 的陣列,包含起點和終點
  • routes:導航路線,依照推薦等級降序排列的陣列,若沒有請求替代路線則只會回傳一條路線
  • code:響應狀態,正常情況為 Ok

介紹大概到這邊,相信在觀念的使用上應該都有個底了吧~/images/emoticon/emoticon42.gif
官網有給一篇教學文件,明天我們來跟著做一次熟悉一下實務上的操作!

Reference


上一篇
Day 20 - Layers (6):Heatmap
下一篇
Day 22 - Direction (1):基礎操作
系列文
打造你的主題地圖!Mapbox 也可以!(ft. React)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言