網站設計
網站設計2026

台灣旅遊地圖

22 縣市的互動式 3D 旅遊地圖。縣市用五個區域色系區分、厚度統一,立體感只負責提供陰影與輪廓,不承載資料;顏色可切換成面積、海拔、即時氣溫等數值編碼。

把台灣 22 個縣市做成可以轉、可以點的 3D 地圖,載入 126 個知名景點、在地美食與季節活動,並串接即時天氣。純前端、沒有後端,整個站是靜態檔。 技術上用 React 搭配 react-three-fiber 與 three.js。縣市邊界從官方行政區圖資簡化烘焙成幾何資料,在建置時就準備好,執行時不需要再算。

點選縣市後展開資訊面板:景點、美食、活動與天氣

顏色是這個專案最花心思的地方。預設用五個區域色系(北、中、南、東、離島)區分縣市,同區域內用同色系的不同深淺——立體感只提供側壁陰影與輪廓,不拿來承載資料,避免讀者誤以為高低代表數值。 切換到數值模式時改成單色階,圖例跟著換,並標明資料來源。所有配色都跑過色盲模擬驗證。

數值模式:即時氣溫以單色階呈現,圖例與資料來源同步切換
同一套介面切換成面積編碼

外觀提供五種風格切換——寫實、紙雕、卡通、白模、霓虹。同一份幾何資料換一套材質與光照,讓地圖能配合不同的簡報場合。

紙雕風格
霓虹風格
入夜後的燈光與天氣動畫

行動裝置上把面板改成由下往上抽出的抽屜,讓 3D 畫面維持最大可視範圍。網址會記住目前選的縣市、數值模式與風格,可以直接把當下的視圖分享給別人。

手機版的抽屜式面板