หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

TfLJamCams - https://www.tfljamcams.net

การแนะนำ

TfLJamCams เป็นโครงการ Google Maps ที่แสดงกล้องจราจร เหตุการณ์บนท้องถนนแบบเรียลไทม์ และการออกเดินทางแบบเรียลไทม์สำหรับการขนส่งสาธารณะในลอนดอน การใช้ตำแหน่งทางภูมิศาสตร์แสดงป้ายหยุดรถสาธารณะในพื้นที่ภายใน 0.5 กม.

มีให้บริการในรูปแบบ PWA สำหรับการติดตั้งบนหน้าจอหลักบนอุปกรณ์เคลื่อนที่หรือเป็นหน้าเว็บมาตรฐาน มีการปรับใช้พนักงานบริการและแคชในเครื่องเก็บไว้เพื่อใช้ PWA

ข้อกำหนดเบื้องต้น

จำเป็นต้องใช้คีย์ API ต่อไปนี้สำหรับการเรียกข้อมูล API

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

  • รหัสแอป TfL Open Data https://tfl.gov.uk/info-for/open-data-users/

  • รหัสแอป National Rail - 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 หลังจากประมวลผลเพื่อจัดรูปแบบเครื่องหมายบนแผนที่ รถไฟใต้ดินจะแสดงในรายการแบบเลื่อนลงและเส้นทางรถประจำทางจะอยู่ในอาร์เรย์เติมข้อความอัตโนมัติบนหน้า

ข้อมูล National Rail จัดทำผ่านคำขอ SOAP XML และใช้ไฟล์ PHP เฉพาะเพื่อส่งออกฟีด JSON ในรูปแบบที่คล้ายกันกับฟีด TfL เพื่อความสม่ำเสมอ

มีฟังก์ชันค้นหาเติมข้อความอัตโนมัติและประกอบด้วยชื่อกล้อง สถานีรถไฟแห่งชาติลอนดอน เมืองลอนดอน พื้นที่ลอนดอน และเขตเมืองลอนดอน สิ่งนี้ถูกจัดเก็บเป็นอาร์เรย์ภายในเพจเนื่องจากการเรียกฐานข้อมูลทำให้เซิร์ฟเวอร์โหลดมากเกินไป

อ้างอิง

https://github.com/railalefan/phpOpenLDBWS

แหล่งที่มาจาวาสคริปต์

jquery.easy-เติมข้อความอัตโนมัติ.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=th

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด