<< 補充 >>
移除放大縮小鍵
(預設地圖都有)mymap.removeControl(mymap.zoomControl);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [24, 24],
iconAnchor: [12, 12], // point of the icon which will correspond to marker's location ?
popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
}
});
其實官網的解釋,我有點不太懂。
那就東調調(iconAnchor的數值)西調調(大小取小:上圖),看調出來的感覺哪個比較不誇張...
上圖原本車頭向左的黑色車子,可能會有倒退嚕(往右開)的情況,所以換成黃色車頭正面圖 XD,就不會有這怪怪的現象。
但還是要追根究底一下,總不能之後遇到相同的狀況,還是東調西調,有點兒浪費時間~~~
在StackOverflow我得到很好的解答。
截圖自:Explanation of Leaflet Custom Icon LatLng vs XY Coordinates
沒有比較沒有進步
台中公車通(現有手機APP),是如何畫線的,我猜應該就是拿API提供的站牌經緯度資料做連線。
推測原因 ,看圖2 vs 圖3 ,路線形狀根本一樣,而我圖2就是拿API提供的站牌經緯度資料做連線(回到Day6)。
那如何改良呢? Ans : 使用動態資訊
Sol :
Google Maps 查了一下 台中火車站到鹿港 大概需要幾分鐘,60分鐘。
寫 Code 收集 每隔一段時間(1分鐘)的 位置資料,放入資料庫裡。
60 個點 能完成 彎曲路線的繪製。
假設我們已有那些點(大概60點),之後會分享如何得出的實作步驟。
<script type="text/javascript" src="latlon.json"></script>
// 61個點 // latlon.json
data = '[[緯度1,經度1],[緯度2,經度2],[]...]';
設計原理:
將 latlon.json 的 座標點取出,如果距離超過10公里不連線。因為可能是連回出發點位置(如圖↓)。
不加入離太遠的那一點,把現有的線段畫出。
如果經緯度都沒有超過10km的點,加入list,最後顯示。
var mydata = JSON.parse(data);
console.log(mydata)
var temp = [];
for(var i=0;i<mydata.length;i++)
{
if(i==0) temp.push(mydata[i]);
else
{
if(GetDistance(mydata[i][0],mydata[i][1],mydata[i-1][0],mydata[i-1][1])>10)
{
var polyline = L.polyline(temp, {color: 'red'}).addTo(mymap);
mymap.fitBounds(polyline.getBounds());
temp = [];
}
else
{
temp.push(mydata[i]);
}
}
}
var polyline = L.polyline(temp, {color: 'red'}).addTo(mymap);
mymap.fitBounds(polyline.getBounds());
function GetDistance( lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
}
唔...跟我想像的有點接近。
雖然我沒去看動態資訊裡面的資料,但是應該有標出某台車現在在哪裡吧?(我猜啦)
那能不能這樣呢,我隱約記得你之前說過他10秒更新一次。
你先查說,什麼時間要從台中開出一班車,然後你從那個時候開始記錄。
每10秒抓一次,也就是說大概有360個點,應該可以畫的更精細?
不過再怎麼樣都比台中公車通好多了!
我以前打開他也是長這樣!所以我就再也沒開過他的圖形介面了。
喔喔 台中公車通現在也是如文章的圖一樣,依站點畫。
因為 我是用GCP 運行抓資料的部分,所以繪製路線的經緯度資料是每一分鐘抓的,GCP crontab 最小單位為一分鐘。
而你說的 雖然我沒去看動態資訊裡面的資料,但是應該有標出某台車現在在哪裡吧?(我猜啦)
就是這個樣子,哪台車在哪裡車牌為...