臺灣行道樹地圖 By Standing07
臺灣行道樹地圖 By Standing07
https://github.com/Standing07/Taiwan-tree-atlas
臺灣行道樹地圖・樹洞(tree-atlas)
臺灣行道樹互動地圖,可切換 3D 傾斜視角、對每一棵樹留言(樹洞,靈感來自墨爾本 Email a Tree)。
全前端靜態網站,地圖與資料全部免費、免金鑰。
目前收錄(查證於 2026-07,逐筆附來源年份)
|
縣市 |
資料 |
筆數 |
來源 |
|
臺北市 |
行道樹及公園樹木分布圖(樹種、樹高、胸徑、座標) |
91,841 |
data.gov.tw/128274,公園路燈工程管理處,每月更新 |
|
臺中市 |
行道樹分佈圖(2020 樹籍普查) |
118,403 |
|
|
桃園市 |
受保護樹木(老樹、珍貴樹木) |
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






