Contenu connexe
Plus de Shi-Xun Hong (12)
Tainan Bus Map
- 2. Kagami
● 府城人
● 新手 RD
● 資深圖客
● 默默做自己 ~~ 替代役 (144)
● https://github.com/kagami3421
● jimmy3421@gmail.com
- 4. 但是 .. 沒有食材怎麼炒菜 ....?
● 2014 年 8 月狀況:
– 只有兩條公車路線 (5 路、 0 路 )
– 繪製公車沒有統一規範
- 7. 建資料 ( 續 )
● 自行踏查
– 站牌資訊
– 站牌位置
– 路線走法
● 坐一趟就知道
- 8. 建資料 ( 續 )
● 過了兩個多月 ..
– Done!
圖片來源: öpnvkarte
- 9. Coding
● 主要的 framework
– Jquery - 毒品
– Leaflet - 化妝品
● 核心
– 使用 APIv6 下載資料
– folk from Here :
https://github.com/jfirebaugh/leaflet-osm
- 10. Coding ( 續 )
● 內部運作
– 下載 (ajax)
– 解開 Route_Master Relation
– 按路線方向和 Member 的 tag ,留下要用的 relation
– 解開 Route Relation
– 轉換為 leaflet 物件:
● node 轉為 marker ( 公車站牌 )
● Way 轉為 polyline ( 公車路線 )
– 丟給 Leaflet render
- 11. UI
● 主要地圖
– 主要使用 Bootstrap framework
– 曾丟到 Ptt 老王賣瓜
● 內嵌式地圖
– 動機:
● 向公車迷遊說把我的地圖放進網頁
– 剔除不少 framework ,減輕依賴性
– 寫份教學在 GitHub 上教別人如何使用
- 13. 完工了 !
● 成品:
– http://kagami3421.github.io/TainanBusMap/
● 內嵌式地圖範例:
– http://kagami3421.github.io/TainanBusMap/DivTest.html