WebGIS在水系綜合治理工程規劃可視化中的應用研究

朱喬利，何成威，談 政

(湖北省水利水電規劃勘測設計院，湖北 武漢 430070)

水系連通綜合治理是水利部提出的治理新模式，是貫徹落實建設生態文明的一項重要措施，各地政府結合當地實際開展了一系列的水系綜合治理工程建設[1-3]。水系綜合治理工程更多的關注水系整體治理方式，治理過程中結合區域特征，綜合考慮水資源、水安全、水環境、水生態等多目標需求，因此，水系綜合治理工程具有長線路、廣區域、多要素、多主體等復雜特征。以某水系綜合治理工程為例，該工程行政區劃涉及4個地市、13個縣市區，工程受益區自然面積約8562km2，工程水利要素包括115條連通渠、27條河流、34個湖泊等，工程主要建設內容包括水系連通工程、河道治理工程和湖泊整治工程3大部分。傳統工程方案設計主要在二維平面空間設計總體及各片區布局圖，分區域劃分工程任務和建設內容，規劃設計方案呈現的方式比較單一，難以直觀地展示工程設計的系統性與整體性。隨著數字化、可視化、智慧化等技術的飛速發展，為內容豐富的綜合治理工程提供了多樣化的可視化方法，傳統的設計方法需要結合新技術探索一條更加高效的設計思路，融合地理空間信息，構建多維度、全方位的二三維一體可視化場景，使水系綜合治理工程規劃達到數字化、信息化交互展示效果。

WebGIS(網絡地理信息系統)技術是目前分布最廣、最普遍的GIS應用技術之一，具有更好的視覺效果與交互效果展現[4]。WebGIS通過網絡對地理空間數據進行發布和應用，以實現空間數據的共享和互操作，本文基于WebGIS技術，對水系綜合治理工程規劃的可視化技術框架進行研究，實現了工程多要素在統一空間的可視化呈現與交互。

1 WebGIS技術分析

1.1 WebGIS特點

WebGIS是呈現在網絡上的地理信息系統，在線集成地理空間信息、用戶和應用3個組成部分，通過瀏覽器實現用戶層與服務層之間的信息交互。隨著瓦片和AJAX(異步JavaScript和XML)等新一代互聯網技術的產生與發展，網絡地理數據服務的響應時間得到極大的縮短[5]，高互動、多來源的Web地圖服務提升了用戶與空間數據的交互體驗感。與傳統基于桌面端或局域內網的GIS相比，WebGIS具有跨平臺、易共享、維護方便等特點，能夠為水系綜合治理工程規劃的可視化提供極大的便利。

(1)跨平臺。WebGIS以瀏覽器為主要客戶端，基本兼容各主流操作系統，因此相對于桌面應用具有更好的跨平臺性。另一方面，由于采用通用的Web瀏覽器，對用戶而言，不再受限于服務器/客戶端機器以及服務器端所配置的GIS軟件，而可以方便地訪問WebGIS數據。針對水系綜合治理工程跨行政區域、跨專業等特征，為各管理單位、設計人員提供便捷地查看方式。

(2)易共享。采用分布式存儲技術[6]，多源數據、程序可以分別存儲部署在不同的服務器上，很好地解決數據異構問題，實現數據共享。用戶可同時訪問不同服務器上的最新數據，實現綜合治理工程多要素數據的集成展示與互操作。

(3)維護方便。系統管理員對服務器進行更新，用戶即能獲得最新的程序和數據，降低了系統維護的復雜性，隨時可以調整系統要素，適用于對數據時效性要求較高的應用場景。例如水系綜合治理工程規劃方案的變更、各要素實際數據的更新，均可通過在服務器端的數據維護快速實現。

1.2 工程規劃可視化的WebGIS框架

水系綜合治理工程的建設內容繁多，涵蓋河湖連通、引水工程整治、河道治理、湖泊生態補水和水生態保護與修復等多個方面，涉及的數據種類豐富，包含治理區域的影像、地形和工程規劃的點、線、面矢量數據等基礎地理數據，還有工程主體要素相關的傾斜攝影模型、BIM等三維數據，以及各要素的屬性和業務等關系型數據。因此其工程規劃可視化采用WebGIS典型的3層B/S框架(如圖1所示)：①底層為數據層，提供基礎數據支撐；②中層為服務層，包含Web服務和GIS服務；③頂層為客戶端，使用WebGIS應用開發，通過瀏覽器呈現給用戶。

圖1 工程規劃可視化的WebGIS框架

(1)數據層主要有以文件方式存儲的切片文件，如BIM、傾斜攝影模型處理后的3DTiles文件和地形、影像切片文件，以及空間數據庫存儲的點、線、面圖形數據和關系數據庫存儲的要素特征數據。

(2)服務層包括提供業務邏輯處理的網站服務器(Tomcat、Ngnix、IIS等)和提供基礎GIS服務資源的GIS服務器，有諸如GeoServer的開源平臺和超圖iServer、中地IGServer等商業平臺。

(3)客戶端即瀏覽器應用程序，提供可視化的界面環境便于用戶與系統之間的交互。

1.3 WebGIS可視化技術

基于計算機圖形學和互聯網前端可視化技術，逐漸涌現出一批架構輕、性能優的前端框架，Web平臺的可視化標準也日趨完善，為WebGIS數據可視化表達以及界面交互友好的可視化系統構建提供了技術支撐。現階段，二三維一體化是WebGIS可視化的主要特征之一：①二維圖形可視化包括W3C標準下的SVG技術和HTML5中的Canvas標簽[7]；②三維場景渲染則是以WebGL為基礎，使用JavaScript實現3D繪圖技術，客戶端即瀏覽器無需插件支持，研發人員通過JavaScript調用相關API(應用程序編程接口)，借助GPU(系統圖形處理器)進行代碼編寫實現三維場景的Web前端渲染[8]。本文水系綜合治理工程規劃可視化就是運用基于WebGL的地圖引擎開展研究并實現應用。

1.3.1地理空間數據服務

WebGIS可視化的核心對象包括多源地理數據和BIM數據，需要將不同類型的專題數據整合至客戶端進行可視化交互，而Web服務為此提供了技術途徑。OGC(開放地理空間信息聯盟)提供了WebGIS常用的3種地理數據服務規范[9]：Web地圖服務(WMS)、Web矢量服務(WFS)和Web柵格服務(WCS)，GIS服務器則可用于提供這些GIS服務。常用的GIS服務器分為商業和開源2類，其中商業平臺有ArcGIS for Server、Supermap iServer、MapGIS IGServer等，開源平臺有MapServer、GeoServer等。其中GeoServer是一款基于Java語言編寫的開源GIS服務器，可將地理數據發布為符合OGC標準規范的數據服務，同時可對數據進行增刪改查等操作[10]。

1.3.2WebGL引擎

WebGL最大的優勢是跨平臺、開放式，以Three.js和Cesium.js為代表。Three.js是基于WebGL架構之上的開源三維繪圖框架js庫，針對WebGL進行了二次封裝與擴展[11]。Cesium.js同樣使用JavaScript語言編寫，但與GIS結合更加緊密，可以在瀏覽器創建三維場景繪制三維地球，并且性能、精度和渲染效果質量較高，由于其支持加載多種GIS服務，并提供3D Tiles[12]標準規范，支持3D Tiles數據加載，滿足三維模型的Web呈現，當前很多三維WebGIS平臺都是基于Cesium.js進行的二次開發[13]。

2 水系綜合治理工程規劃可視化實現

2.1 數據內容

水系綜合治理工程規劃覆蓋多個行政區域，工程水利要素包括連通渠、河流、湖泊等，工程主要建設內容包括水系連通工程、河道治理工程和湖泊整治工程3部分，因此，工程規劃時需要可視化呈現的對象可以分為建設范圍和建設內容2大類，涉及的數據對應多種表現形式(見表1)。

表1 水系綜合治理工程規劃可視化數據內容

其中建設范圍主要作為工程規劃的基礎地理底圖呈現，可以按照行政區域和工程片區2種方式將工程建設范圍在地理空間上進行分區展示；建設內容中水系連通工程包含渠首引水工程和河湖連通工程，既有工程建筑設施如水閘、泵站、水利樞紐等要素的更新改造和新建，也有引水線路的規劃，對應數據有工程建筑的空間點位、引水線路的空間位置以及建筑物的BIM模型等；河道治理工程與湖泊治理工程需要呈現工程規劃中需要治理或整治的河道及湖泊的空間布局特征。

2.2 數據處理

上述數據內容的數據源總體可分為矢量數據、BIM數據和表格數據3類。其中二維矢量數據通過GIS數據處理軟件制作水系綜合治理工程規劃的水系專題圖層，將特征屬性的表格數據導入對應矢量數據的屬性表，并配置shp格式文件的樣式，包括色彩和符號的設計，然后通過GeoServer發布數據服務。另外，為滿足Web端數據的動態渲染效果，實現河流、渠系的不同動態效果，可將相應矢量數據格式轉換為Json格式，數據文件存儲到Tomcat服務文件夾。二維矢量數據處理流程如圖2所示。

圖2 二維矢量數據處理流程示意圖

三維BIM數據在加載前需轉換為Cesium原生支持的3DTiles數據格式，轉換過程中根據模型原點經緯度進行坐標設置，保證BIM數據地理空間位置的準確性。然后將3DTiles數據文件存儲到Tomcat服務文件夾下，方便數據調用。三維BIM數據處理流程如圖3所示。

圖3 三維BIM數據處理流程示意圖

2.3 可視化實現

本文基于Cesium+Vue構建WebGIS三維場景實現數據可視化，從水系綜合治理工程規劃實際展示需求出發，集成數據交互可視化、管理等功能。整體前端以Vue.js框架為基本Web架構，引入Cesium.js作為三維地圖引擎，同時支持二維矢量數據和三維BIM數據的加載，并加載在線影像和矢量地圖服務作為基本的地圖組件。利用編寫好的Vue功能組件，完成整體可視化界面布局設計，實現基礎的圖層管理，方便輕巧的實現GIS全局場景和BIM細節在Web端可視化展示。

2.3.1地理底圖加載

地理底圖包括公共地圖服務和工程規劃建設范圍底圖。目前公共地圖服務主要引用天地圖系列地圖服務如影像底圖、矢量底圖、三維地形等，以及其它樣式的矢量底圖如藍色系底圖，這類地理底圖以地圖API即服務地址的方式供開發者調用，采用OGC WMTS標準。

工程規劃建設范圍底圖則將處理好的矢量數據由GeoServer發布為WMS服務供前端調用。使用Cesium API加載地理底圖，使用WebMapTileServiceImageryProvider加載公共地圖服務，使用WebMapServiceImageryProvider加載建設范圍底圖服務。

2.3.2專題圖層加載

專題圖層具有靜態和動態2種可視化實現方式。水系綜合治理工程規劃涉及的河湖、渠系、水利工程等要素以點線面矢量數據的方式分層組織，配置好樣式后由GeoServer發布服務，可視化加載方法與建設范圍底圖方法類似。動態可視化通過加載Json格式的要素矢量數據，并在前端進行動態渲染來實現，使用GeoJsonDataSource加載本地Json文件或Tomcat中的文件服務地址，利用GeoJsonDataSource的參數設置不同要素的表現形式，包括顏色、發光效果、材質等。

2.3.3BIM數據加載

水利工程的三維模型即BIM數據經過數據轉換和坐標配準后，Cesium提供專門的API針對3DTiles模型數據的加載，使用Cesium3DTileset讀取3DTiles數據文件夾中的tileset.json文件，即可實現三維模型的加載。由于水利工程三維模型需要貼合實際地形完整顯示，在進入三維模型細節展示時需要開啟地形，即同時加載三維地形服務，BIM數據加載效果如圖4所示。

圖4 BIM數據加載效果圖

3 可視化應用功能

在水系綜合治理工程規劃階段，需要對工程總體布局、各片區布局及建設內容、具體工程布置和建筑物、機電及金屬結構等多個方面進行展示介紹。傳統方式是通過第三方地圖軟件在地理空間位置上呈現，這種方式需要桌面端軟件支持，只能加載或繪制簡單的點線面疊加到影像底圖進行展示，缺乏動態效果和三維模型的精細化展示。基于WebGIS的二三維場景實現可視化應用功能，滿足工程規劃階段全面、直觀、靈活的展示介紹需求。

3.1 綜合展示瀏覽

以影像底圖或矢量底圖為背景，疊加專題圖層，實現在Web瀏覽器端查看工程布局情況及建設內容。結合基本GIS功能如移動、縮放等，在總體與局部、片區與片區之間快速切換瀏覽，展示工程布局情況。

3.2 自動漫游展示

工程規劃跨區域且線路長，根據瀏覽地理坐標設置固定的漫游線路，通過按鈕觸發自動漫游功能，即可按照設置的路線自動游覽整個工程區域。該功能可用于規劃方案匯報時自動演示，生動介紹工程整體情況。

3.3 二三維切換

綜合展示瀏覽中以點、線、面的方式在二維底圖上呈現工程規劃總體布局及建設內容，點狀圖標表示工程中水利工程閘站要素，通過點擊要素圖標，可切換進入閘站三維模型場景，進一步查看建筑物、機電及金屬結構等的設計詳情。

3.4 數據圖層管理

圖層管理以目錄樹的形式將地理底圖、專題圖層、三維模型等數據的具體內容分類列表顯示在頁面左側，通過勾選控制圖層的顯隱(如圖5所示)，如地理底圖的切換、河流或渠系要素的專題展示等。另外，鼠標左鍵雙擊某數據圖層，視角即縮放至該數據所在空間位置，如各片區的切換。

圖5 數據圖層管理功能

4 結語

本文基于WebGIS技術實現了水系綜合治理工程規劃建設內容各要素對象的Web端二三維數據可視化呈現，并實現了GIS平移、縮放、自動漫游、二三維切換、圖層管理等可視化應用功能，基本滿足水系綜合治理工程規劃階段多方面展示介紹需求，為傳統方案匯報提供了更加靈活、便捷、生動直觀的方式。本研究主要針對水系綜合治理工程規劃階段所涉及的數據內容，實現基本可視化需求，后續可以此為基礎，集成工程相關的建設、施工乃至運維階段的各項數據，為水系綜合治理工程全生命周期管理提供可視化平臺支撐。