46 lines
2.2 KiB
Markdown
46 lines
2.2 KiB
Markdown
# 旗跡羅盤（建議目錄名稱：`qiji-luopan`）
|
||
|
||
利用 Leaflet 與 REST Countries / g0v GeoJSON 打造的國旗互動地圖。依區域分頁檢視所有國家，搜尋國碼或中英名稱，點擊國旗即可將地圖移動到該國並描出邊界，台灣使用 g0v 的 GeoJSON 來源補上輪廓。
|
||
|
||
## 功能摘要
|
||
- 區域分頁與快速搜尋：支援國碼、中英文名稱模糊比對。
|
||
- 國旗卡片：顯示 ISO 3166-1 alpha-2 國碼、中英名稱、次區域。
|
||
- Leaflet 地圖整合：點擊卡片會移動地圖、顯示國旗 popup，並載入對應 polygon；缺資料時會 fallback。
|
||
- 依照台灣常用中文名稱覆寫 REST Countries 的英文資料，呈現更符合在地習慣的翻譯。
|
||
|
||
## 專案結構
|
||
```
|
||
qiji-luopan/
|
||
├── index.html # 主頁面與 DOM 結構
|
||
├── styles.css # 介面樣式（含 popup 旗幟樣式）
|
||
├── constants.js # 國家代碼、中文名稱、區域排序與標籤
|
||
├── app.js # 搜尋、分組、Leaflet 地圖與 popup 邏輯
|
||
├── flags/ # 國旗 SVG（ISO 3166-1 alpha-2 檔名，例如 tw.svg）
|
||
└── download_country_flags.py # 輔助腳本，可批次下載國旗
|
||
```
|
||
|
||
## 開發 / 使用方式
|
||
1. 使用任意 HTTP 伺服器提供靜態檔案，常見方式：
|
||
- Python：
|
||
```bash
|
||
python -m http.server 8000
|
||
```
|
||
- Docker + Nginx（唯讀掛載當前目錄）：
|
||
```bash
|
||
docker run --rm -it \
|
||
-p 8080:80 \
|
||
-v "$(pwd)":/usr/share/nginx/html:ro \
|
||
nginx:alpine
|
||
```
|
||
2. 瀏覽 `http://localhost:8000`（若用 Docker 則為 `http://localhost:8080`）。
|
||
3. 留意瀏覽器 Console，如有 REST Countries 或 g0v 的遠端請求失敗會在此顯示警告。
|
||
|
||
## 主要資料來源
|
||
- [REST Countries API](https://restcountries.com/)：國家基本資料、座標與區域資訊。
|
||
- [datasets/geo-countries](https://github.com/datasets/geo-countries)：世界國家邊界 GeoJSON。
|
||
- [g0v/twgeojson](https://github.com/g0v/twgeojson)：台灣縣市級 GeoJSON，多重合併成國家輪廓。
|
||
|
||
## 未來想法
|
||
- 加入更多圖層（例如人口或經濟指標）並以 tooltip 或 legend 呈現。
|
||
- 線上快取 REST Countries 結果，減少載入時間。
|