大台北公車路線視覺化

aka 大天龍巴士王

資料來源：公共運輸整合資訊流通服務平臺(PTX)

交通部的PTX平台提供台灣大眾運輸的相關資料，涵蓋全國尺度之公路、 軌道、航空及航運4大類公共運輸旅運等。這次使用台北市及新北市的公車資料，其中各包含：

• 站點：屬於點資料。PTX的站點資料有分站牌(stop)、站位(station)及站名碼(station name) 3種。假設市政府站去程和回程有A、B及C共3條路線經過，站牌(stop)資料在市政府這邊就會有6個點資料(1個點資料包含1個方向的1個路線屬性、2個方向各3個路線)；若是站位(station)資料，市政府會有去程及回程2個點資料，各點資料的路線屬性會包含A、B及C共3條路線；而站名碼(station name)則是將站位(station)資料的方向移除，在站名碼資料下，市政府站僅有1個點資料，含A、B及C共3條路線。目前(2019/10/21)PTX尚未有6都的站名碼(station name)資料，故使用站位資料。

站牌(stop)、站位(station)及站名碼(station name)

左：站位(station)原始資料 右：視覺化，以台北市為例

• 線型(Shape)：用於繪製公車路線的線型資料。

左：路線原始資料 右：視覺化，以台北市為例

• 站序(StopOfRoute)：用於顯示站位相對於公車路線之順序，分去程、回程兩種，透過處理可以和站位(station)資料結合。

開發工具：Mapbox GL JS

Mapbox GL JS是用來製作客製化地圖的javascript函式庫。開發者能透過Mapbox Studio製作自己的底圖及各種效果。

Mapbox

成果：大天龍巴士王

介面說明：

• 左上角為搜尋區(下圖紅框)，搜尋方式預設為寬鬆比對，點擊”exact match”後會切換至精確比對，同時開啟路線方線按鈕，分為去程、回程及全部。選擇去程或回程，站點資訊區會出現該路線的站點順序，同時地圖上的站點也會一起更新。
• 搜尋區下方為站點資訊(下圖橙框)，若無輸入搜尋路線，預設為顯示地圖範圍內的所有站點，若有搜尋路線則為搜尋結果之站點；若直接點擊地圖上之站點，則顯示該點擊結果的站點。
• 地圖(下圖紫框)，呈現搜尋結果，若直接點擊地圖上之站點，則顯示該站點路線可到達之所有站點。
• 右上角資訊欄(下圖綠框)，若有站點位於游標下方，顯示該站點之站名及路線資訊。

介面配置

左：點擊地圖上的站點呈現該站到達範圍 右：輸入站名並選exact match後可透過Direciton查詢站序

左：可以選轉角度 右：小螢幕也可使用

連結：

歡迎大家來試玩

巴士王

Github