iT邦幫忙

DAY 5
0

ML X 友廷等公車系列 第 5

Day 5 : 介接API

重頭戲來囉

在 Day2 的 Bus API(link) 介紹 、Day 3 的 圖層變變變(link)、以及Day 4 的 Marker 動起來(link)後,躍躍欲試地想把學到的東西做統整,除了先前的知識,還會帶入邏輯(演算法or解法)。

階段目標 : 每10秒 call 一次 API,將取得的資料呈現於地圖上

流程

一開始載入網頁時 call 一次 API
成功,將取得的經緯度,車牌,加入地圖。
之後的 每10秒更新setInterval() 設定每10秒call一次API,API回傳成功後再更新地圖。
而更新地圖細部的動作 包括 移除之前的Markers(因此需要把前10秒的做儲存),再加入新的Markers進去。

程式碼

var LeafIcon = L.Icon.extend({         // 設定圖片大小,定錨位置,氣泡框位置
	options: {
	           iconSize:     [24, 24],
			   iconAnchor:   [12, 12],
			   popupAnchor:  [0, -12]
		     }
});
// 設定圖片來源網址
greenIcon = new LeafIcon({iconUrl: 'https://cdn3.iconfinder.com/data/icons/education-vol-1-34/512/1_Bus_school_school_bus_vehicle-128.png'});

$(function () {
    $.ajax({
        type: 'GET',
        url: 'https://ptx.transportdata.tw/MOTC/v2/Bus/RealTimeByFrequency/InterCity/9018?$top=150&$format=JSON', //包含兩個方向(去回程)前150筆資料,以JSON格式做回傳
        dataType: 'json',
        headers: GetAuthorizationHeader(),  // 憑證 API token
        success: function (Data) {
            showBusWay2(Data);    // 將取得的資料,更新地圖        
        }
    });
});
function GetAuthorizationHeader() {
    var AppID = '請妥善保存AppID';
    var AppKey = '請妥善保存AppKey';

    var GMTString = new Date().toGMTString();
    var ShaObj = new jsSHA('SHA-1', 'TEXT');
    ShaObj.setHMACKey(AppKey, 'TEXT');
    ShaObj.update('x-date: ' + GMTString);
    var HMAC = ShaObj.getHMAC('B64');
    var Authorization = 'hmac username=\"' + AppID + '\", algorithm=\"hmac-sha1\", headers=\"x-date\", signature=\"' + HMAC + '\"';

    return { 'Authorization': Authorization, 'X-Date': GMTString /*,'Accept-Encoding': 'gzip'*/}; //如果要將js運行在伺服器,可額外加入 'Accept-Encoding': 'gzip',要求壓縮以減少網路傳輸資料量
}
function showBusWay2(items) {
        console.log(items);
        for(var i=0;i<markers.length;i++)
        {
            mymap.removeLayer(markers[i]);  // 移除舊圖標

        }

        // 加入新座標
        for (var i = 0; i < items.length; i++){
            var pop1 = L.popup({autoClose: false,closeOnClick:false,autoPan: false}).setContent(items[i].PlateNumb);
            theMarker = L.marker([items[i].BusPosition.PositionLat, items[i].BusPosition.PositionLon], {icon: greenIcon}).addTo(mymap);
            theMarker.bindPopup(pop1).openPopup();
            markers.push(theMarker);

        }

}
setInterval(function () {
 
   $(function () {
    $.ajax({
        type: 'GET',
        url: 'https://ptx.transportdata.tw/MOTC/v2/Bus/RealTimeByFrequency/InterCity/9018?$top=150&$format=JSON', 
        dataType: 'json',
        headers: GetAuthorizationHeader(),
        success: function (Data) {
            showBusWay2(Data);            
        }
    });
});  
    

},10000);

Demo

有氣泡框顯示每台車車牌,每隔一段時間,更新地圖。

遇到問題

API Quota 不夠

解決方法

  1. API 是限制IP發出的request數量
    以手機為無線基地台,分享給電腦or其他手機,只要其中一個先把request數量用完,所有人都沒辦法再request。
    會看到地圖沒有公車在行駛

    所以可以換個IP(ex:借用別人的網路)來做使用。But! 人力成本太高,如果是邊緣人就G惹。
  2. 手動更新
    設定 更新 Button,使用者想更新地圖再更新,讓request次數下降。但如果使用者太調皮,狂按猛按,request次數也是會爆掉。不保險且太累啦
  3. 申請會員(正解)
    使用到現在,從來沒有超過request數而不能使用。Very Good

    一般會員 =>一天兩萬次 => 我申請這個的,其實就滿夠用啦。
    進階會員 :十萬伏特次 / 一天

More Info

Follow Me


上一篇
Day 4 : Marker 動起來
下一篇
Day6 : Leaflet sidebar
系列文
ML X 友廷等公車20

1 則留言

0
長風青雲
iT邦新手 5 級 ‧ 2019-09-07 02:43:14

我第一個小疑惑居然不是關於專業的XD
你那個動圖是怎麼用的阿~(是之前那個自製GIF嗎?
而且我第一次知道可以實際看到車車在路上移動的樣子~
感覺有點酷

阿瑜 iT邦新手 5 級‧ 2019-09-07 11:36:51 檢舉

Imgur 的 to GIF 可以做到。
影片轉動圖

我要留言

立即登入留言