用 MapLibre GL JS 打造的 AED 地圖

緣起

因為想要有個快速又簡潔的 AED 尋找工具，所以就自己寫了一個。

名字也很簡單，就叫做「AED 地圖」。

廢話不多說，上網址：https://aed.genec.dev/

下面就簡單說明一下我用到的工具。

前端

• MapLibre GL JS
  

  MapLibre GL JS 用於顯示 OpenStreetMap 圖磚，並以 circle 圖層呈現 AED 位置、heatmap 圖層呈現熱力圖、symbol 圖層呈現文字。各種圖層類型可以看這裡：https://maplibre.org/maplibre-style-spec/layers/#type

  左上角有一個我自訂的控制項（暫時取名叫 Expandable List Control）作為選項清單。選項清單內有定位尋找功能，還可以根據偏好微調地圖顯示效果。

• JavaScript 框架
  目前使用原生 JavaScript 開發，開發階段使用 ES modules 分離各功能的程式碼，最終使用 ESBuild 匯出為單一 .js 檔案。

  

  檢視 AED 資料時，彈出視窗內的 QRCode 是使用 QR Code Encoder 套件。

• CSS 樣式
  使用 SCSS 語法、normalize.css，最終合併匯出為單一 .css 檔案。

後端

• AED 查詢 API
  先以 pandas 處理全臺 AED 資料並儲存至 SQLite 資料庫，再以 Flask 與 Gunicorn 提供 API 供前端使用。
• 靜態檔案供應
  以 Nginx 供應靜態資源、將 /api 請求導向至 flask 容器。
• 容器化
  Docker

資料來源

• 地圖圖資
  OpenStreetMap 貢獻者
• AED 位置資訊
  政府資料開放平臺（中華民國衛生福利部醫事司）

完成品確實頗 簡陋 簡潔的，所以目前能說的大概也就以上幾點。
如果想到什麼我會再補充，有什麼事也歡迎聯絡我。

• ← 上一篇文章
  透過 WSL2 在 Windows 執行 WebODM