WebGIS在水系綜合治理工程規(guī)劃可視化中的應(yīng)用研究

朱喬利，何成威，談 政

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

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

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

1 WebGIS技術(shù)分析

1.1 WebGIS特點

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

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

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

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

1.2 工程規(guī)劃可視化的WebGIS框架

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

圖1 工程規(guī)劃可視化的WebGIS框架

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

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

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

1.3 WebGIS可視化技術(shù)

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

1.3.1地理空間數(shù)據(jù)服務(wù)

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

1.3.2WebGL引擎

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

2 水系綜合治理工程規(guī)劃可視化實現(xiàn)

2.1 數(shù)據(jù)內(nèi)容

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

表1 水系綜合治理工程規(guī)劃可視化數(shù)據(jù)內(nèi)容

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

2.2 數(shù)據(jù)處理

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

圖2 二維矢量數(shù)據(jù)處理流程示意圖

三維BIM數(shù)據(jù)在加載前需轉(zhuǎn)換為Cesium原生支持的3DTiles數(shù)據(jù)格式，轉(zhuǎn)換過程中根據(jù)模型原點經(jīng)緯度進(jìn)行坐標(biāo)設(shè)置，保證BIM數(shù)據(jù)地理空間位置的準(zhǔn)確性。然后將3DTiles數(shù)據(jù)文件存儲到Tomcat服務(wù)文件夾下，方便數(shù)據(jù)調(diào)用。三維BIM數(shù)據(jù)處理流程如圖3所示。

圖3 三維BIM數(shù)據(jù)處理流程示意圖

2.3 可視化實現(xiàn)

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

2.3.1地理底圖加載

地理底圖包括公共地圖服務(wù)和工程規(guī)劃建設(shè)范圍底圖。目前公共地圖服務(wù)主要引用天地圖系列地圖服務(wù)如影像底圖、矢量底圖、三維地形等，以及其它樣式的矢量底圖如藍(lán)色系底圖，這類地理底圖以地圖API即服務(wù)地址的方式供開發(fā)者調(diào)用，采用OGC WMTS標(biāo)準(zhǔn)。

工程規(guī)劃建設(shè)范圍底圖則將處理好的矢量數(shù)據(jù)由GeoServer發(fā)布為WMS服務(wù)供前端調(diào)用。使用Cesium API加載地理底圖，使用WebMapTileServiceImageryProvider加載公共地圖服務(wù)，使用WebMapServiceImageryProvider加載建設(shè)范圍底圖服務(wù)。

2.3.2專題圖層加載

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

2.3.3BIM數(shù)據(jù)加載

水利工程的三維模型即BIM數(shù)據(jù)經(jīng)過數(shù)據(jù)轉(zhuǎn)換和坐標(biāo)配準(zhǔn)后，Cesium提供專門的API針對3DTiles模型數(shù)據(jù)的加載，使用Cesium3DTileset讀取3DTiles數(shù)據(jù)文件夾中的tileset.json文件，即可實現(xiàn)三維模型的加載。由于水利工程三維模型需要貼合實際地形完整顯示，在進(jìn)入三維模型細(xì)節(jié)展示時需要開啟地形，即同時加載三維地形服務(wù)，BIM數(shù)據(jù)加載效果如圖4所示。

圖4 BIM數(shù)據(jù)加載效果圖

3 可視化應(yīng)用功能

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

3.1 綜合展示瀏覽

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

3.2 自動漫游展示

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

3.3 二三維切換

綜合展示瀏覽中以點、線、面的方式在二維底圖上呈現(xiàn)工程規(guī)劃總體布局及建設(shè)內(nèi)容，點狀圖標(biāo)表示工程中水利工程閘站要素，通過點擊要素圖標(biāo)，可切換進(jìn)入閘站三維模型場景，進(jìn)一步查看建筑物、機(jī)電及金屬結(jié)構(gòu)等的設(shè)計詳情。

3.4 數(shù)據(jù)圖層管理

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

圖5 數(shù)據(jù)圖層管理功能

4 結(jié)語

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