上個學期教資料視覺化,
其中一個主題是繪製客製地圖, 就做了這個例子:
台中公共腳踏車租賃地點。
像這種 marker 個數太多太密集的地圖, 需要用 cluster map 來做,
當訪客拉近 (zoom in) 時, 才把一個 cluster 拆成更多個小的 clusters。
這個無法用單純的
umap 來做。
[9/7 現在發現 umap 可以製作 cluster map 了, 更簡單!
TGOS 批次地址查經緯度 + umap 私房地圖範例: 清冠一號中醫診所地圖]
請先下載
程式碼, 然後用瀏覽器打開其中的 index.html, 拉近拉遠測試一下。
如果是 firefox, 要先到 about:config 裡面把
security.fileuri.strict_origin_policy 設成 false;
如果是 chromium, 必須先關掉所有 chromium 視窗,
再從命令列上重新啟動:
chromium --allow-file-access-from-files
。
詳見
javascript Can Read Local Files。
再從命令列進到 maps 子目錄裡,
ls -l markers.json rm markers.json ln -s tw/kh-bus-stops.geojson markers.json
然後回瀏覽器重新整理。 這個資料集是高雄市所有公車站牌。
要如何換成自己的資料檔呢? 同樣以腳踏車資料為例, 先從 ptx 公共運輸整合資訊服務平台 取得某縣市公共腳踏車租賃地點。 更直接地說, 到 這一頁, 選擇縣市、 把 「取前幾筆」 清掉、 點 「Execute」, 就可以在下面的 "Download" 處下載回 json 檔 (假設存成 bike.json 好了)。 [把握時間! 這個平台 11月底就要收掉了~]
再來用 強大的 json 轉檔工具 zq 轉成程式需要的 geojson 格式:
zq -j \ 'over this | { type:"Feature", geometry: { type:"Point", coordinates: [ StationPosition.PositionLon, StationPosition.PositionLat ]}, properties: { name: StationName.En, name_cht:StationName.Zh_tw, addr:StationAddress.En, addr_cht:StationAddress.Zh_tw, cap:BikesCapacity } } | collect(this)' \ bike.json | jq . > bike.geojson
把 bike.geojson 搬到 .../maps/tw/ 底下, 再像剛剛一樣重新建立 symlink, 總之我的程式會去找 markers.json 就對了。
我的程式是從 Andy Maloney 的範例程式 改來的。 主要改兩個地方:
- 資料檔採用 geojson 格式比較方便讀取其他地理資訊程式匯出的檔案。
- 點到某一個 marker 時, 不只顯示名稱, 也把 properties 裡面的其他所有欄位一起印出來。
你還知道哪裡可以下載 (含有經緯度座標的) 大量有趣資料集嗎? 請留言分享吧!
交通部將以 TDX (https://tdx.transportdata.tw/) 取代 PTX 服務,PTX 預計今年底停止服務,提供洪老師參考。
回覆刪除