2022年8月14日 星期日

繪製 (公共腳踏車租賃地點、公車站牌、...) 群聚(地)圖不必改程式碼

leaflet cluster map: 以台中公共腳踏車租賃地點為例 上個學期教資料視覺化, 其中一個主題是繪製客製地圖, 就做了這個例子: 台中公共腳踏車租賃地點。 像這種 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 的範例程式 改來的。 主要改兩個地方:

  1. 資料檔採用 geojson 格式比較方便讀取其他地理資訊程式匯出的檔案。
  2. 點到某一個 marker 時, 不只顯示名稱, 也把 properties 裡面的其他所有欄位一起印出來。

你還知道哪裡可以下載 (含有經緯度座標的) 大量有趣資料集嗎? 請留言分享吧!

1 則留言:

  1. 交通部將以 TDX (https://tdx.transportdata.tw/) 取代 PTX 服務,PTX 預計今年底停止服務,提供洪老師參考。

    回覆刪除

因為垃圾留言太多,現在改為審核後才發佈,請耐心等候一兩天。