專案
一、背景與目的
本子計畫擬利用開放原始碼軟體與程式庫,以 Web GIS 技術整合本計畫各子計畫的成果以及與各合作縣市政府取得之圖資進行整合性的資料查詢與展示,以協助各相關政府部門視覺化呈現不同國土功能分區下在地震或豪雨後土石流、崩塌、液化災害之潛勢風險變化,並進而對於災害應變準備措施上能有精進的作為。
二、系統架構與開發
本子計畫擬採用開放原始碼技術建構三層式網頁型應用程式 (three-tier web application),以方便不同專家學者、政府部門、與協力廠商共同協力合作,整合 Web GIS 技術以支援資料共享和分析。此三層式應用程式的系統架構包含後端數據層、應用程式伺服器層、以及前端展示層:
-
後端數據層
由於本子計畫在數據資料的需求上,同時具有一般的數據資料、空間資料、以及地理圖資的需求,因此同時規劃需使用三種不同的開放原始碼程式,分別是關聯式資料庫 PostgreSQL、架構於 PostgreSQL 之上的空間資料庫擴充套件 PostGIS、以及以開放標準提供圖資的 GeoServer。
PostgreSQL https://www.postgresql.org/ 是一個強大且開放原始碼的關聯式資料庫管理系統(RDBMS)。它以其可靠性、資料完整性和 可擴充性而聞名。PostgreSQL 遵循 SQL 標準,同時也加入許多獨特的增強功能,使其在眾多資料庫系統中脫穎而出。PostgreSQL 的主要特點如下:
- 高度可擴展性:無論是資料量或使用者數量增加,PostgreSQL 都能保持高效能。
- 豐富的資料類型:除了常見的資料類型外,PostgreSQL 還支援如 JSON、XML、陣列、複合類型等多種資料類型,能靈活處理各種資料。
- ACID:完整支援 ACID (原子性、一致性、隔離性、持久性) 特性,確保資料即使在如停電、當機等異常狀況發生時,仍能保持交易的正確性和可靠性。
- 高安全性:提供嚴格的存取控制和加密功能,保護資料安全。
- 開放原始碼:免費使用,並擁有活躍的社群支援,能快速獲得解答和資源。
- 跨平台支援:可在各種作業系統上運行,如 Linux、Windows、macOS 等。
而為儲存管理使用地理空間相關的資料,本計畫擬使用 PostGIS 作為空間資料庫,用於儲存和管理多重來源資料,例如雨量、國土功能分區、災害潛勢圖資等等。本計畫中選擇 PostGIS 的原因主要基於其強大的空間資訊處理能力、標準化的地理資訊儲存方式,以及與其他 GIS 平台的良好互通性。隨著 GIS 應用的發展,地理資訊的規模與複雜度持續增加,傳統的關聯式資料庫難以有效儲存與查詢這些數據。因此,專門為地理資訊設計的空間資料庫變得不可或缺。PostGIS https://postgis.net/ 是 PostgreSQL 資料庫的擴充套件,PostgreSQL 為開放原始碼關聯式資料庫中的翹楚,提供了PostGIS 良好的基礎,並能夠讓 GIS 資料的儲存、查詢、分析及管理更有效率,且支援各種標準的地理資訊格式,如 GeoJSON, ESRI Shapefile (*.shp) 等。採用 PostGIS 作為 GIS 空間資料庫的解決方案,能夠有效提升地理空間資訊的管理與分析能力。因此本子計畫中擬採用PostGIS 作為空間資料庫,並搭配 Web GIS 介面以提供高效、準確且具擴展性的災害風險潛勢展示資訊平臺。
而為滿足 WebGIS 以網頁展示地理資訊上,本子計畫除可能介接政府公開資料來源如內政部國土測繪中心提供的國土測繪圖資服務雲外,並需要有自己的圖資來源,目前擬使用 GeoServer https://geoserver.org/ 達此目的。GeoServer 是開放原始碼的地理資料伺服器,專門用來發佈與分享 GIS 資料。它支援多種開放標準,如 Web Map Service (WMS)、Web Feature Service (WFS)、Web Coverage Service (WCS) 等,使得 GIS 資料能夠透過標準化的方式,在不同系統之間流通與應用。GeoServer 能夠讀取來自 PostGIS、Shapefile、GeoTIFF、CSV 等多種資料來源,並將其轉換為可視化的地圖圖層,供 WebGIS 應用程式或其他 GIS 軟體存取。在本子計畫中,GeoServer 可即時發佈與更新風險地圖,提供決策者可操作的視覺資訊,並可搭配 Google Earth Engine 或 PostGIS 進行分析,將計算結果直接透過 GeoServer 發佈,提高應變速度。
-
應用程式伺服器層
應用程式伺服器層主要提供網頁伺服器功能,供使用者透過網頁瀏覽器連線使用本計畫所開發的系統,其上主要即為一網頁伺服器軟體 (web server) 以及程式執行時期環境 (runtime environment)。本子計畫預計選擇使用以下兩種成熟方案中的一種:
- 方案一:Apache 網頁伺服器 https://httpd.apache.org/ + PHP 程式開發環境 https://www.php.net/ + Laravel 網頁應用程式開發框架 https://laravel.com/。Apache 網頁伺服器是最受使用的 Web 伺服器之一,常用於 LAMP(Linux + Apache + MySQL + PHP)開發環境,透過 mod_php 或 FastCGI 提供高效能的PHP 動態網頁運行處理。Laravel 是一款現代化的 PHP 框架,基於 MVC 架構,具備強大的 Eloquent ORM、路由系統、Blade 模板引擎 及 API 開發工具,並內建 CSRF 防護與身份驗證機制,大幅提升開發效率與安全性。Apache 與 Laravel 的組合適用於企業級後台、電子商務、政府機構資訊系統及 RESTful API,提供穩定、安全且可擴展的應用開發環境。
- 方案二:Nginx 反向代理伺服器 https://nginx.org/ 配合 NodeJS 程式開發環境 https://nodejs.org/en 與 ExpressJS 網頁應用程式開發框架 https://expressjs.com/。Nginx 是一款高效能的反向代理伺服器,適合處理高併發請求,常用於負載均衡與靜態資源快取,並能與 NodeJS 無縫整合,提升 Web 應用的效能與安全性。NodeJS 是基於 Google 所開發 V8 引擎的非同步事件驅動 JavaScript 執行環境,適合即時應用與高併發系統開發。ExpressJS 是 NodeJS 上最流行的 Web 應用框架,提供輕量級 MV 架構、中介軟體(Middleware)機制以及 RESTful API 支援,使開發者能快速構建可擴展的後端服務。Nginx 搭配 NodeJS 和 ExpressJS,適用於微服務架構、即時通訊系統、API 伺服器及高流量 Web 應用,提供穩定且高效的開發與部署環境。
以上兩方案皆可應用於本子計畫,由於上一個學期在個人開授的軟體工程課程中介紹學生以 NodeJS + ExpressJS 進行網頁應用程式的開發,故目前偏向使用此方案進行本案的開發,待本計畫有幸獲得補助,將再作詳細的評估比較以決定最適合的方案。
-
前端展示層
前端展示層即為在使用者的瀏覽器上運行之前端展示系統,用以供使用者查詢本計畫所收集的資料與相關成果。此系統之建構除基本的網頁開發技術如 HTML、CSS、JavaScript 之外,將整合適合於地理資訊展示的平台或是第三方程式庫,如 Google Earth Engine https://earthengine.google.com/、Leaflet https://leafletjs.com/、或是 OpenLayer https://openlayers.org/。此三個解決方案根據 OpenAI 的 ChatGPT 整理比較如下:
表一、不同 Web 前端解決方案的比較 (ChatGPT) 特性 Google Earth Engine Leaflet OpenLayers 主要用途 遙感資料分析、大規模地理運算 輕量級互動地圖視覺化 進階 GIS 地圖應用與資料視覺化 數據處理能力 具備強大雲端運算能力,適合大規模數據分析 無內建資料處理功能,需依賴外部 API 或客製化程式 支援空間分析與渲染,需額外後端處理 資料來源 內建 NASA、NOAA、MODIS、Landsat 等全球遙感資料 需手動載入外部資料(GeoJSON、WMS 等) 支援多種資料來源(WMS、WFS、GeoJSON) 即時互動 限制較多,偏向批次運算 具備互動功能但較基本 提供完整 GIS 互動與進階操作 客製化 API 受限,無法深度自訂 易用、靈活,但提供功能較少 功能豐富,適合高度客製化需求 效能表現 適用大規模計算,雲端處理速度快 輕量,適用前端簡單地圖顯示 需依賴後端,適合處理大數據 離線使用 依賴 Google 雲端,無法離線使用 可支援離線地圖 可支援離線快取與 WMS 快取 適合開發者類型 GIS 研究者、環境分析人員 前端開發者、地圖應用開發者 GIS 開發者、專業空間分析應用 適用場景 大規模環境監測、災害分析、時序數據分析 Web 應用中的簡單地圖顯示 進階 GIS 互動地圖、空間數據分析 學習成本 中高,需要熟悉 Google API 和 GIS 基礎 低,適合初學者快速上手 高,需具備 GIS 開發經驗 根據以上比較,Google Earth Engine 內含資料較多,但依賴於 Google 所提供之雲端資源與服務,並可能產生額外的雲端運算費用,故暫不考慮使用它。由於本計畫目前預期系統呈現之地圖與資料較為單純,故暫以 Leaflet 作為地圖呈現顯示的方案,預計計畫通過後將再詳細評估 Leaflet 與 OpenLayers。
三、系統部署
本系統採用 Docker https://www.docker.com/ 容器化部署,其必要性來自於對於運行環境一致性、可移植性、擴展性、資源隔離及高效維運的需求。在本子計畫中牽涉到了多個不同的伺服器軟體 (GeoServer, PostgreSQL/PostGIS, NodeJS/ExpressJS),不同伺服器軟體通常建議安裝於不同的(虛擬)機器或容器中,以避免對於不同伺服器軟體對於運行環境的不同需求或系統升級或安全性更新後造成的故障事件。此外,在不同開發人員的環境或不同的伺服器上,軟體的版本差異可能導致系統運行異常,甚至出現無法重現的系統運行錯誤。透過 Docker 容器技術,我們能夠確保每個服務在獨立的環境中運行,並且所有相依性皆封裝在容器內,避免系統相依性衝突與手動配置的錯誤,從而提高開發與部署的一致性與穩定性。
在本系統架構中,本計畫擬使用 Docker Compose 來管理多個服務的部署流程,這使得開發人員只需執行一個簡單的命令,即可快速啟動整個系統,而無需逐步安裝和設定各個元件。例如,GeoServer 容器會自動連接 PostGIS 容器以存取地理空間數據,ExpressJS 則提供 API 介面來處理數據查詢和用戶請求,而 Nginx 作為反向代理伺服器負責負載平衡與安全管理,Leaflet 則作為前端應用進行地圖視覺化展示。這種架構不僅使各個組件的管理變得更加簡單,也確保了不同環境(如開發、測試、正式部署)之間的一致性,減少開發與生產環境的錯誤差異,提高了系統的可靠性。
此外,使用 Docker 容器化還帶來更高的 可移植性與靈活性,這使得系統可以無縫部署至雲端服務 (如 Amazon AWS、Google GCP、Microsoft Azure) 或機構內部伺服器,而無需重新調整環境配置。此外,由於 Docker 容器是輕量級的虛擬化解決方案,其資源管理比傳統虛擬機更加高效,能夠有效降低硬體資源的消耗,提升系統整體運行效率。
在安全性方面,Docker 容器化部署也帶來顯著優勢。例如,Nginx 可作為反向代理處理 HTTPS 加密與流量控制,防止惡意攻擊與未授權存取。此外,透過 Docker 的 網路隔離機制,我們可以將不同的容器放置在受嚴格控制的網路環境中,確保只有必要的服務能夠相互訪問,提升系統的安全性。同時,使用 Docker Volume 儲存管理需持久保存的資料,以確保 GeoServer、PostGIS 等服務的地理資料在容器重啟或更新後仍然存在,避免資料遺失或需要重新匯入的問題,進一步提升系統的可靠性與資料管理能力。
綜合而言,Docker 容器技術為本計畫擬開發平臺帶來環境一致性、高可移植性、靈活擴展、效能優化及安全管理等諸多優勢,使系統能夠快速適應不同環境需求,減少部署與維護成本,並確保長期運行的穩定性與可擴展性。
另由於 Docker 為商業公司所提出與維護的容器化軟體,其中 Docker Desktop 針對 250 人以上或年營業額超過 1000 萬美金的企業需收費,可能不利於相關政府機關使用,因此也將評估轉向使用由美國紅帽公司 (Redhat) 所開發維護的 Podman。
四、可能資料來源
臺灣目前有以下政府機構提供公開資料與圖可直接應用於系統之開發,而部份圖資則需要經過申請後方可使用。未來待計畫執行時會再與團隊成員以及外部專家討論後決定需要介接那些資料,並依需求進行資料介接或取得之申請。
| 單位 | 網址 | 公開資料 |
|---|---|---|
| 國土測繪中心(TGOS) | https://www.tgos.tw/ | 正射影像、地形圖、行政區界、道路、水系、土地利用與變遷、海岸線等 |
| 內政部國土管理署(NLMA) | https://www.nlma.gov.tw/ | 國土計畫、土地使用分區、都市計畫圖資、土地資源與環境永續發展等 |
| 中央氣象署(CWA) | https://www.cwa.gov.tw/ | 即時氣象資料(降雨量、溫度、風速等)、颱風路徑、氣象雷達影像、地震資訊 |
| 經濟部水利署 水文水資源開放資料 | https://data.wra.gov.tw/ | 即時水位、雨量觀測、河川水流量、水庫水情、水利設施與防洪資訊 |
| 農業部農村發展及水土保持署(SWCB) | https://www.swcb.gov.tw/ | 土石流潛勢區、坡地災害風險圖、農地利用、森林與生態保育 |
| 災害防救科技中心(NCDR) | https://www.ncdr.nat.gov.tw/ | 災害潛勢圖、歷史災害記錄、即時災害監測(地震、洪水、颱風等) |
| 臺北市政府開放資料平臺 | https://data.taipei/ | 台北市交通、建設、環境、災害應變等開放數據 |
| 臺灣開放資料平臺(政府資料開放平臺) | https://data.gov.tw/ | 全國範圍內的開放數據(交通、環境、經濟等) |
五、執行進度規劃
本計畫預計執行三年,並採用漸增模式逐年擴展適用地區與適用災害類型。第一年以雙北為目標,並以坡地崩塌為主進行所需資料的收集與雛型系統的開發,並持續與團隊成員溝通討論以了解各災害類型所需的資料、圖資、以及各子計畫預計的產出成果,並於第二年持續收集其它地區的資料與圖資,並將與桃園、台中相關機構與政府單位接觸以推廣第一年的研發成果與收集相關資料,且加入土石流災害之考量以持續擴展改善系統。第三年則持續擴展系統適用地區至臺南與高雄並加入液化災害考量,持續收集各地區相關資料與圖資以及使用者的意見回饋,以持續擴展系統功能與適用性,最終辦理相關成果發表會或將其發表於國內專業刊物如營建知訊等,以期能將成果落實於防災應用。
六、預期成果
本計畫透過 GeoServer + PostGIS + ExpressJS + Nginx + Leaflet 的架構,並透過 Docker → Podman 的部署策略,確保系統高效、靈活且具備可持續發展性,以支援未來災害預警與國土規劃的需求。
- 完成一個功能完整且基於開放原始碼技術的 Web GIS 平台,用於展示氣候變遷與災害風險評估結果。
- 建立跨部門合作框架,提高資源共享效率並促進科學研究成果轉化為實務應用。
- 提出具體政策建議,支持國土空間規劃及災害調適策略的制定。
開發
使用 Docker 部署一個結合 GeoServer + PostGIS + ExpressJS + Nginx + Leaflet 的 Web GIS 架構。
一、架構簡介
二、目錄結構
三、啟動專案
- 確保已安裝 Docker 和 Docker Compose。
-
在專案根目錄下,使用以下命令啟動所有服務:
docker-compose up --build -
等待所有容器啟動完成後,訪問以下網址以查看應用程式:
服務 網址 Web GIS 專案介紹 http://localhost Web GIS 服務 http://localhost/map GeoServer 管理 http://localhost/geoserver pgAdmin 管理 http://localhost:5050
四、pgAdmin 使用方式
- 開啟 pgAdmin 網頁介面:http://localhost:5050
-
登入帳密(可以在 .env 中修改):
- 使用者名稱:
admin@example.com - 密碼:
admin123
- 使用者名稱:
- 新增伺服器連線:
| 欄位 | 值 |
|---|---|
| 名稱 | WebGIS |
| 主機名稱/地址 | postgis |
| 連接埠 | 5432 |
| 維護資料庫 | gisdb |
| 使用者名稱 | gis |
| 密碼 | gis |
五、WMTS 與 WMS 圖層設定
在本專案中,使用了國土測繪中心提供的 WMTS 與 WMS 圖層來展示地理資訊。以下設定整理自國土測繪圖資服務雲 https://maps.nlsc.gov.tw/S09SOA/homePage.action?Language=ZH#tab-1 介接服務說明。這些圖層提供了臺灣地區的地形、行政區界、道路、水系等重要地理資訊,對於災害風險評估與國土規劃具有重要意義。以下是相關圖層的設定資訊:
-
網路地圖圖磚服務(WMTS)
網路地圖圖磚服務,可使用以下介接網址:
- EPSG:3857:https://wmts.nlsc.gov.tw/wmts
- TWD97:https://wmts.nlsc.gov.tw/97/wmts
- 1/1000地形圖:https://maps.nlsc.gov.tw/wmtsTOPO01K/
- 1/5000地形圖:https://maps.nlsc.gov.tw/wmtsTOPO05K/
- UAS:https://maps.nlsc.gov.tw/wmtsUAS/
使用範例,以 Leaflet 為例:
以下是 EPSG:3857 各圖層的設定資訊,包含圖層介接代碼、圖磚樣式、圖磚矩陣集、輸出格式與最大圖磚層級等。
-
臺灣通用電子地圖
圖層介接代碼:
EMAP圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:19 -
臺灣通用電子地圖(套疊等高線)
圖層介接代碼:
EMAP5圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:19 -
臺灣通用電子地圖(不含等高線)
圖層介接代碼:
EMAP6圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:19 -
臺灣通用電子地圖(套疊等高線)OpenData, 最大比例尺一萬八千分之一
圖層介接代碼:
EMAP5_OPENDATA圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:15 -
臺灣通用電子地圖(不含等高線)OpenData, 最大比例尺一萬八千分之一
圖層介接代碼:
EMAP6_OPENDATA圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:15 -
臺灣通用電子地圖透明
圖層介接代碼:
EMAP2圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:19 -
臺灣通用電子地圖EN
圖層介接代碼:
EMAP8圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:19 -
地段外圍圖
圖層介接代碼:
LANDSECT圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:18 -
國土利用現況調查成果圖
圖層介接代碼:
LUIMAP圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:18 -
1/5000圖幅框
圖層介接代碼:
MB5000圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:16 -
正射影像圖(臺灣通用)
圖層介接代碼:
PHOTO2圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/jpg最大圖磚層級:19 -
各級學校範圍圖
圖層介接代碼:
SCHOOL圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:19 -
便利商店(超商)
圖層介接代碼:
ConvenienceStore圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:19 -
縣市界
圖層介接代碼:
CITY圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:17 -
鄉鎮區界
圖層介接代碼:
TOWN圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:17 -
村里界
圖層介接代碼:
Village圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:19 -
1/5000基本地形圖
圖層介接代碼:
B5000圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:18 -
1/25000 經建版地形圖
圖層介接代碼:
B25000圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:16 -
1/50000 經建版地形圖
圖層介接代碼:
B50000圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:15 -
1/100000 經建版地形圖
圖層介接代碼:
B100000圖磚樣式:default
圖磚矩陣集:GoogleMapsCompatible
輸出格式:image/png最大圖磚層級:14
-
網路地圖服務(WMS)
網路地圖服務,可使用以下介接網址:
使用範例,以 Leaflet 為例:
以下是各圖層的設定資訊,包含圖層名稱、圖層介接代碼、輸出格式與最大圖磚層級等。
-
臺灣通用電子地圖
圖層介接代碼:
EMAP
輸出格式:image/jpg -
臺灣通用電子地圖(套疊等高線)
圖層介接代碼:
EMAP5
輸出格式:image/jpg -
臺灣通用電子地圖(不含等高線)
圖層介接代碼:
EMAP6
輸出格式:image/jpg -
臺灣通用電子地圖(套疊等高線)OpenData, 最大比例尺一萬八千分之一
圖層介接代碼:
EMAP5_OPENDATA
輸出格式:image/jpg -
臺灣通用電子地圖(不含等高線)OpenData, 最大比例尺一萬八千分之一
圖層介接代碼:
EMAP6_OPENDATA
輸出格式:image/jpg -
臺灣通用電子地圖透明
圖層介接代碼:
EMAP2
輸出格式:image/png -
臺灣通用電子地圖EN
圖層介接代碼:
EMAP8
輸出格式:image/jpg -
地段外圍圖
圖層介接代碼:
LANDSECT
輸出格式:image/png -
國土利用現況調查成果圖
圖層介接代碼:
LUIMAP
輸出格式:image/png -
1/5000圖幅框
圖層介接代碼:
MB5000
輸出格式:image/png -
正射影像圖(臺灣通用)
圖層介接代碼:
PHOTO2
輸出格式:image/jpg -
各級學校範圍圖
圖層介接代碼:
SCHOOL
輸出格式:image/png -
便利商店(超商)
圖層介接代碼:
ConvenienceStore
輸出格式:image/png -
縣市界
圖層介接代碼:
CITY
輸出格式:image/png -
鄉鎮區界
圖層介接代碼:
TOWN
輸出格式:image/png -
村里界
圖層介接代碼:
Village
輸出格式:image/png -
1/5000基本地形圖
圖層介接代碼:
B5000
輸出格式:image/png -
1/25000 經建版地形圖
圖層介接代碼:
B25000
輸出格式:image/png -
1/100000 經建版地形圖
圖層介接代碼:
B100000
輸出格式:image/png
-