TfLJamCams

TfLJamCams - https://www.tfljamcams.net

介紹

TfLJamCams是一個 Google 地圖項目，可顯示交通攝影機、即時道路事故以及倫敦公共交通的即時發車情況。使用地理位置可顯示 0.5 公里範圍內的當地公共交通站點。

它可以作為 PWA 安裝到行動裝置的主螢幕上，也可以作為標準網頁使用。部署 Service Worker 並儲存本機快取以供 PWA 使用。

先決條件

API 資料呼叫需要以下 API 金鑰。

• Google 地圖 Javscript API - https://cloud.google.com/maps-platform/

• TfL 開放資料應用程式金鑰 https://tfl.gov.uk/info-for/open-data-users/

• 國家鐵路應用程式金鑰 - https://lite.realtime.nationalrail.co.uk/OpenLDBWS/

API 呼叫範例

TfL 巴士 23 號停靠點 - https://api.tfl.gov.uk/line/23/stoppoints

倫敦地鐵中央線車站 - https://api.tfl.gov.uk/line/central/stoppoints

倫敦 JamCams - https://api.tfl.gov.uk/Place/Type/JamCam/

即時事件 - https://api.tfl.gov.uk/Road/All/Disruption?startDate=YYYY-MM-DD&endDate=YYYY-MM-DD

國家鐵路出發 - https://lite.realtime.nationalrail.co.uk/OpenLDBWS/

方法

交通攝影機透過 AJAX 呼叫 TfL API 載入。影片和圖像 URL 均由標準 JSON 請求提供。頁面頂部的按鈕可以在圖像和視訊來源之間切換，並且還顯示可用來源的計數。

螢幕底部提供圖像按鈕，可依路線編號載入公車站，按線路名稱載入 TfL 車站。

TfL 資料經過處理以格式化地圖標記後直接從 JSON 來源饋送。地鐵線顯示在下拉清單中，公車路線保存在頁面上的自動完成陣列中。

國家鐵路資料透過 SOAP XML 請求提供，並使用專用 PHP 檔案以與 TfL 來源類似的格式輸出 JSON 來源，以實現統一。

提供自動完成搜尋功能，其中包含一系列相機名稱、倫敦國家火車站、倫敦城鎮、倫敦地區和倫敦自治市鎮。這是作為頁面中的陣列儲存的，因為資料庫呼叫導致伺服器負載過多。

參考

https://github.com/railalefan/phpOpenLDBWS

JavaScript 原始碼

jquery.easy-autocomplete.min.js
https://code.jquery.com/jquery-3.3.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js
https://www.google.com/recaptcha/api.js?hl=en