Day 5 : 介接API

11th鐵人賽

阿瑜

2019-09-06 00:21:52

7792 瀏覽

重頭戲來囉

在 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 不夠

解決方法

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

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

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