2026新年快樂 x AI創作開發
溫故知新｜AI協作獨自升級
TWIoT PM2.5 互動地圖特色簡介
- 簡易介面操作: 快速了解全台PM2.5即時值分布情況
- 定位功能: 即時掌握所在地附近PM2.5資訊狀況
- 直覺體驗: 地圖與圖表聯動，縣市、空品等級、統計圖
📋 系統簡介
環境監測設計的物聯網（IoT）可視化平台。
整合全台微型感測器數據，提供高頻率、分頁遞迴抓取的 PM2.5 即時監測。優化導航定位的視覺體驗，並強化「人文引擎」，使其成為巡檢工具。
🚀 核心功能與升級亮點
1. 2026 人文巡檢引擎
全年度節慶偵測：預載 2026 年行政院人事行政總處公布之國定假日（如除夕 1/28、中秋 9/25）。
- 二十四節氣同步：完整收錄從小寒、立春到冬至的 24 個節氣精確日期。
- 動態祝禱系統：開場煙火視窗會根據當前日期自動變換祝福文字（例如立春當天顯示「2026 立春大吉」）。
- 倒數計時器：即時計算距離 2027 年的剩餘時間。
2. 定位特效
- 雙層泛光圈：點擊定位按鈕後，透過 CSS
::before與::after觸發兩層藍色雷達擴散動畫，具備強烈的掃描感。 - 雷達標記圖示：定位成功後，在地圖上生成一個具備呼吸燈脈衝（Pulse Ring）效果的科技點位圖標。
- 無視窗衝突：修復 CSS 層疊上下文問題，確保定位特效開啟時不會干擾煙火開場視窗的點擊與渲染。
3. 大數據遞迴抓取技術
- 非阻塞式遞迴：利用
while(nextURL)邏輯完整抓取全台超過 8,000 個測站數據，確保數據零遺漏。 - 自動運鏡輪播：具備自動巡檢模式，每 5 秒依空氣品質等級自動切換視角與篩選。
- 雙向聯動圖表：Chart.js 統計圖表與地圖實體標記雙向綁定，點擊圖表即可過濾地圖點位。
🛠 技術架構
- Frontend: HTML5, CSS3 (Advanced Animations)
- Mapping: Leaflet.js (L.circleMarker & L.divIcon)
- Data Analysis: Chart.js (Logarithmic Scaling)
- Data Source: 行政院環保署 IoT 開放平台 API
補充｜狀態資訊列
手機瀏覽選擇桌機版
瀏覽器切換桌機版網站畫面
