臺灣行道樹地圖 By Standing07

 

臺灣行道樹地圖 By Standing07

https://twtree.zeabur.app

https://github.com/Standing07/Taiwan-tree-atlas

 

臺灣行道樹地圖・樹洞（tree-atlas）

臺灣行道樹互動地圖，可切換 3D 傾斜視角、對每一棵樹留言（樹洞，靈感來自墨爾本 Email a Tree）。 全前端靜態網站，地圖與資料全部免費、免金鑰。

目前收錄（查證於 2026-07，逐筆附來源年份）

縣市	資料	筆數	來源
臺北市	行道樹及公園樹木分布圖（樹種、樹高、胸徑、座標）	91,841	data.gov.tw/128274，公園路燈工程管理處，每月更新
臺中市	行道樹分佈圖（2020 樹籍普查）	118,403	data.gov.tw/109853，建設局
桃園市	受保護樹木（老樹、珍貴樹木）	595	data.gov.tw/26129，農業局，每年更新
嘉義縣	受保護樹木名單	92	data.gov.tw/133889，嘉義縣政府

合計 210,931 棵。

尚未收錄（站上標「敬請期待」）：

縣市	原因
新北市	僅公開 533 條路的路段統計（樹種與數量），無逐棵座標
臺南市	僅公開行政區層級統計，無逐棵座標
高雄市	平台僅有紀念樹木清冊，且擋自動下載

授權：各資料集為「政府資料開放授權條款第 1 版」。整理自各機關公開資料，版權歸原機關。 嘉義市綠圖台（greenmap.chiayi.gov.tw）為查詢網站，需登入且未提供開放下載授權，故未納入。 樹種欄位含「烏?」等殘缺標記者一律歸為「未鑑定」，不臆造樹種。

花季模式（A 層，已完成）

地圖上方「🌸 花季模式」＋月份滑桿。開啟後只顯示該月常年花期會開花／變色的樹種， 並用真實花色上色（三月粉紅金黃、七月紫紅、十二月轉紅）。左側面板列出「X月看什麼」。

• 物候表在 src/lib/phenology.ts，每個樹種的月份都標示來源；查無可靠來源者不填月份 （不臆測），該樹種就不出現在花季模式。
• 花色主要引用臺南市政府「喬木花色花期表」附表四／附表五。
• 台灣欒樹會隨月份換色（8–9 月黃花 → 10–11 月紅褐蒴果）。
• UI 一律標示「常年花期」並註明「實際花期可能因天氣狀況而改變」， 不可寫成「現在開花中」——實際花況要等 C 層（花況回報）才有。

介面架構

兩步選擇：先選「🏙 市區道路 / 🛣 國道」（一般人不是在平面道路上，就是在高速公路上）， 再用下拉選單選縣市或國道。市區模式顯示逐棵行道樹；國道模式顯示沿線花廊。 之後新縣市資料備齊，直接加進下拉選單即可，不需改版面。

左右分工：左下角＝資料（找樹、篩選、來源），右下角＝心情（樹洞）。

路段頁與路線模式（已完成）

路段頁 #/road/:cityKey/:road：人的記憶單位是「路」不是單棵樹。 把逐棵樹依路名聚合（src/lib/roads.ts 會去掉「東側人行道」這類位置描述）， 顯示這條路有幾棵、樹種組成、這條路的一年（12 個月花況長條圖）、 以及路段層級樹洞（留給整條路的話 ＋ 留給路上任一棵樹的話，集中在一起）。 例：敦化南路二段 1,192 棵、臺灣欒樹佔 80%、最好看 8–11 月。

路線模式 #/route：

• 市區：依序挑幾條每天會經過的路 → 合併棵數、沿路樹種、整條路線的一年。路線存在瀏覽器。
• 國道：選國道＋起訖里程＋方向 → 依里程排序列出沿途會依序看到的花， 等於「開這段路會經過什麼」。

為什麼不是輸入起點終點自動規劃：那需要外部路徑規劃服務（要金鑰、會把使用者位置送出去）。 這裡改成自己挑路，資料全留在本機，也更貼近通勤族的實際心智。

國道花廊（已完成）

「🛣 國道花廊」按鈕：沿著國道畫出官方整理的賞花路段，陪你走完一整條長路線。 與花季模式連動——開啟花季模式後，只顯示該月會開的花。

• 26 種賞花樹種、72 段花廊，涵蓋國道 1／3／5／3甲。
• 每段線條可點，顯示樹種、花色、國道與里程。
• 另有 1,297 個實地調查點位（高公局逐點 GPS 調查中，篩出賞花樹種者）。 其中 1,182 點以門架座標反推出「國道幾號、約第幾公里」；國道 2/4/6/8/10 無門架資料故不標里程。
• 資料來源（皆政府資料開放授權條款第1版）：
• 高速公路四季景觀（季節／月份／花種／花色／路段）
• 高速公路植物生態調查資料（物種＋經緯度）
• 國道計費門架座標及里程牌價表（把「188K」換算成座標用）
• 另補充高公局「國道之美」四季花況頁 （比開放資料多收錄艷紫荊、黃槐；資料中以 src 欄位區分來源）
• 行車方向：北上／南下／雙向／未標示方向，從原始「路段」文字判讀 （南下、北上、雙向、中央分隔帶等字樣）。北上與南下的線條各自貼著該向的門架座標畫， 下拉選單可依方向篩選。官方原始資料中多數路段未標方向，一律標「未標示方向」不臆測。
• ⚠️ 花廊線條是用門架里程線性內插畫的（國1 每約 2.5 公里一座門架）， 屬於「沿國道的近似位置」，不是精確的道路中心線幾何。UI 上有標示。

省道（公路局）查無行道樹或花期開放資料——只有路線圖資、里程、標誌類資料集。 若要納入省道，需另行向公路局申請或人工整理。

技術

• 前端：Vite + React + TypeScript + Tailwind
• 地圖：MapLibre GL JS（底圖 OpenFreeMap Liberty，免金鑰）
• 2D：circle 圖層，依樹種上色
• 3D：fill-extrusion 依樹高長出立體樹柱 + 建築量體
• 點選採加寬框查詢，樹點雖小也好點
• 樹洞留言：儲存層抽象於 src/lib/comments.ts
• 目前 LocalStore（瀏覽器 localStorage，示範用）
• 上線改 SupabaseStore（Supabase 免費層，共用雲端）即可，介面不變
• Google Maps 出口：每棵樹「在 Google Maps 開啟」；篩選結果匯出 KML（≤2000 點，符合 My Maps 上限）

開發

npm install

npm run data:fetch    # 依官方網址下載原始資料到 data-raw/（沒進版控，280MB+）

npm run data          # 清洗各縣市資料 → public/data/

npm run data:freeway  # 產生國道花廊資料

npm run dev           # 本機預覽 http://localhost:5210

npm run build         # 產出 dist/（純靜態，可放任何靜態主機）

npm run data 會把 TWD97 座標轉 WGS84、統一欄位、跑驗證關卡（座標落點、樹種覆蓋率）， 輸出壓縮 columnar JSON 依縣市切檔。

授權

程式碼 MIT。資料整理自各機關公開資料集（政府資料開放授權條款第 1 版），版權歸原機關所有。

上線與待辦

部署流程見 部署指南.md（GitHub → Zeabur）。

已知限制：樹洞留言目前存在各自瀏覽器（localStorage），尚未接雲端資料庫， 因此留言不會互相看到。介面上已標示為示範版。

資料來源:

 Standing07