三皇五帝歷史地圖 (Three Sovereigns and Five Emperors Historical Map)

本專案是一個基於 Angular 20 + standalone components + NgRx + Leaflet + Fuse.js 架構搭建的中國古國時代「三皇五帝」傳疑時期可互動歷史地圖應用程式。

地圖融合了歷史分期時間軸、地理空間標記以及圖層即時過濾功能，完整呈現了從原始居住、漁獵與農耕的文明先河，一直到早期國家制度與夏朝光復的歷史脈絡。

---

🗺️ 專案特色

1. 歷史分期規劃 (Timeline Periods)

時間軸範圍設定在 西元前 4500 年 (B.C. 4500) 至 西元前 1800 年 (B.C. 1800)，共細分為五大歷史時期：

• 伏羲女媧時代 (B.C. 4500 - B.C. 3500) — #8B4513 (大地褐)
• 神農炎帝時代 (B.C. 3500 - B.C. 3000) — #228B22 (森林綠)
• 黃帝軒轅氏時代 (B.C. 3000 - B.C. 2600) — #FFD700 (軒轅金)
• 顓頊與帝嚳時代 (B.C. 2600 - B.C. 2350) — #4B0082 (神祕靛)
• 唐堯與虞舜時代 (B.C. 2350 - B.C. 1800) — #B22222 (帝王紅)

2. 終極極限事件集 (85 個歷史與傳說事件)

地圖包含 85 個經過經緯度與年代校對的重大事件，分為四大圖層分類：

• 🔴 政治與制度（例：絕地天通、堯都平陽、舜流四凶、大禹九鼎、世襲家天下）
• 🔵 文化與傳說（例：盤古開天、伏羲琴瑟、倉頡造字、后羿射日、嫦娥奔月）
• 🟢 民生與水利（例：有巢築巢、燧人取火、神農嚐百草、后稷教稼、儀狄杜康造酒）
• 🟡 部落與戰爭（例：阪泉之戰、涿鹿之戰、帝嚳平犬戎、啟有扈氏甘之戰、少康復國）

3. 初始地理定位

地圖初始視角精準對焦於黃河流域之中原核心地帶 [34.5, 110.0]，縮放層級為 6。

---

🛠️ 本地開發與啟動

所有的網頁程式碼與資料均位於 webapp/ 資料夾內。

1. 安裝與啟動

在本地啟動開發伺服器：

cd webapp
npm install
npm start

啟動後在瀏覽器開啟 http://localhost:4200 即可進行操作。

2. 數據合法性驗證

專案內含防呆機制，可檢驗事件的年份、座標與關聯關係：

cd webapp
npm run test:data

---

🚀 透過 GitHub Actions 自動發布至 GitHub Pages

專案已配置好自動部署的工作流。當您將變更推送到 main 分支時，GitHub Actions 會自動建置並將網頁靜態檔發布至 gh-pages 分支。

部署配置步驟：

1. 推動代碼：將本地代碼推送到您的 GitHub 儲存庫 main 分支。
2. 等待 Actions 執行：在 GitHub 的 Actions 頁籤中，可以看到自動運行的 deployment 任務。
3. 啟用 GitHub Pages 服務：
   • 進入您的 GitHub 倉庫，點選 Settings。
   • 在左側選單選擇 Pages。
   • 在 Build and deployment 下的 Source 選擇 Deploy from a branch。
   • 在 Branch 下拉選單中選擇 gh-pages 分支，資料夾選擇 / (root)，然後點選 Save。
4. 保存後，過幾分鐘即可在 https://<您的GitHub帳號>.github.io/3S-5E/ 上瀏覽您的歷史地圖網頁！