基于WebGL的三維GIS平臺快速構建方法

摘 要：隨著WebGL技術和GIS技術的發(fā)展與應用，基于網(wǎng)絡的三維地理信息可視化技術以其立體、直觀的特點，迅速成為研究熱點。為了快速構建功能完備、穩(wěn)定可靠的三維GIS平臺，本研究首先提出一種基于Cesium等技術設計的三維WebGIS可視化方案;然后從場景構建、系統(tǒng)功能設計與實現(xiàn)兩方面展開探討，詳細介紹三維可視化的相關技術和系統(tǒng)主要功能的實現(xiàn)手段;最后對三維WebGIS快速構建方法進行總結。本研究所采用的技術可靠、交互設計友好，平臺設計具有較強的通用性，可為多種應用場景的三維GIS平臺設計提供參考。

關鍵詞：網(wǎng)絡地理信息系統(tǒng);三維可視化;虛擬場景;空間測量

中圖分類號：P208 ? ?文獻標志碼：A ? ?文章編號：1003-5168（2022）7-0020-04

DOI：10.19968/j.cnki.hnkj.1003-5168.2022.07.004

Abstract： With the development and application of WebGL technology and GIS technology， the 3D geographic information visualization based on web has become a hot research quickly because of its stereoscopic and intuitive characteristics. In order to build a fully functional quickly， stable and reliable three-dimensional visualization platform of geographic information， a fast method to build 3D GIS platform based on WebGL was offered. Firstly， the architecture design of 3D GIS platform was introduced， and a 3D WebGIS visualization scheme based on Cesium and other technologies was proposed.Second， the 3D scene construction and system function design and implementation were discussed， and the relevant technologies of 3D visualization and the completion methods of system interactive functions were explained. Finally， the rapid construction method of 3D WebGIS was summarized， the results show that the technology adopted in this paper is reliable， the interaction design is friendly， and the platform design has strong universality.The research content of this paper can provide reference for the design and construction of 3D GIS platform of various topics.

Keywords： WebGIS; 3D visualization; virtual scene; spatial measurement

0 引言

當前，基于二維地圖的網(wǎng)絡地理信息可視化技術已經(jīng)發(fā)展到相對成熟的階段。針對不同的需求，二維GIS平臺可以提供多元化、個性化和可交互的地理信息展示方式[1]，但其尚不能對地形、實體模型和三維實景等三維信息進行有效的表達。隨著WebGL技術的興起與發(fā)展，在瀏覽器上三維圖形的渲染與交互可以不再借助額外插件，使得圖形的展示效果和用戶體驗均得到增強[2]。在三維環(huán)境中能夠展示更豐富的空間地理信息，基于網(wǎng)絡的信息傳輸又能提高應用的便捷性和靈活性，因而基于WebGL的三維GIS技術在智慧景區(qū)建設、礦山和流域三維可視化、地下管網(wǎng)及鐵路和列車虛擬仿真等應用場景被廣泛應用[3]。面對日益增多的需求，結合當前主流技術，探討具有可移植性、高拓展性、功能完備的三維GIS設計思路和基于WebGL平臺的快速實現(xiàn)方法，并對其中關鍵技術展開研究。

1 總體架構設計

為了能夠迅速構建適用于不同應用場景的地理信息系統(tǒng)，平臺需要提供空間信息展示、交互查詢等基礎模塊。其中，空間信息展示的主要功能包括影像地圖的載入，高精度地形模型的使用，對矢量數(shù)據(jù)、三維模型、實景模型等數(shù)據(jù)在線瀏覽的支持;交互功能包括對圖層的選擇切換設置，對各類要素的空間和屬性信息查詢，在虛擬場景內(nèi)進行圖形繪制，對空間位置、距離和面積的計算等。面對由實景三維模型構建的應用，平臺還應具有單體化功能，用于建筑物（如樓群）的分棟、分層、分戶的可視化與交互查詢。三維GIS平臺功能設計如圖1所示。

三維GIS平臺是基于瀏覽器/服務器架構（Browser/Server Architecture）進行設計的。其中，瀏覽器端以Vue作為其前端基礎框架，在此之上借助Cesium數(shù)據(jù)庫開發(fā)相關三維功能。Vue是用于構建用戶界面的漸進式框架，Vuex是其狀態(tài)管理模塊，Vue Router是其官方路由器，Element Plus是基于Vue 3的組件庫，它們用于網(wǎng)站前端基本結構的技術實現(xiàn);Axios是一個基于promise的HTTP庫，用于對前端與后臺的數(shù)據(jù)進行交互;Cesium是構建三維場景的核心庫;Threejs用于Web端渲染三維模型;OpenLayers則輔助開發(fā)更豐富的二維地圖功能;ECharts用于地理數(shù)據(jù)及其他數(shù)據(jù)的圖表可視化。

服務器端以高性能的Nginx作為反向代理服務器，用于集群服務的拓展。在數(shù)據(jù)存儲上，使用特性齊全的對象-關系型數(shù)據(jù)庫管理系統(tǒng)PostgreSQL，PostGIS是其對空間數(shù)據(jù)存儲與操作的擴展;GeoServer是OpenGIS Web服務器規(guī)范的J2EE實現(xiàn)，集成輕量級應用服務器Tomcat與GeoServer則用于GIS數(shù)據(jù)發(fā)布與交互操作;Redis是一個支持網(wǎng)絡的Key-Value數(shù)據(jù)庫，用于提高查詢數(shù)據(jù)的效率;Django是一個基于Python的開源Web應用，功能健全、易維護且拓展性高。三維GIS平臺的架構設計及相關技術如圖2所示。除對空間數(shù)據(jù)進行相關操作外，平臺還對用戶、權限、任務等管理系統(tǒng)的功能進行設計，但在此不展開具體討論。

2 三維場景構建

Cesium是基于WebGL技術的JS庫，支持在二維、三維及哥倫布視圖（2.5D）下進行操作，可接入多種地圖數(shù)據(jù)源和數(shù)據(jù)交換格式[4]，是一種高效的三維GIS可視化平臺。

2.1 影像地圖和地形模型

影像地圖可直觀反映空間信息。Cesium可支持Cesium Ion、ArcGIS Server和符合OGC標準的WMS、WMTS等十余種影像服務類型，還提供UrlTemplateImagery Provider模板，用于如高德、騰訊等廠商自主實現(xiàn)影像服務。

數(shù)字地形模型的使用可有效增強三維場景可視化效果，Cesium Terrain、GoogleEarth Terrain和VRTheWorld Terrain等接口可為GIS平臺接入不同數(shù)據(jù)源的地形瓦片數(shù)據(jù)。

2.2 地理要素圖層

在三維場景中如何有效呈現(xiàn)點、線、面狀地理要素至關重要?？蓪hapefile文件轉存為Cesium支持的GeoJSON格式[5]，或通過GeoServer發(fā)布并在后臺解析后傳送到前端使用[6]。此外，CZML也是常用的描述動態(tài)場景的數(shù)據(jù)格式，其可用于表達標識、模型等圖元，也可用于描述與時間有關的動畫場景;還可以通過直接實例化繪制的方式對地理數(shù)據(jù)進行展示。

2.3 三維模型

Cesium支持加載glTF（GL Transmission Format）格式和3D Tiles格式的三維模型。glTF是一個描述模型結構和組成等信息的JSON文件。由于Cesium不直接支持.obj格式，在使用前需要先將模型進行格式轉換才能使用。glTF格式不具備分級加載的能力，因而在有復雜模型和大場景時，可以利用基于瓦片金字塔模型設計的3D Tiles格式，其能夠隨地圖比例尺的放縮，針對性地加載不同層次的細節(jié)展示模型[7]。根據(jù)使用場景的不同，3D Tiles有Batched 3D Model（.b3dm） 、Instanced 3D Model（.i3dm） 和Point Cloud等類型。

3 交互查詢功能實現(xiàn)

3.1 位置查詢

通過監(jiān)聽鼠標移動、點擊等操作，并分別做相應的響應處理，是實現(xiàn)位置查詢功能的基礎。Cesium定義的ScreenSpaceEventHandler類封裝了用戶輸入事件的處理，其中setInputAction函數(shù)可設置觸發(fā)的事件類型及觸發(fā)時執(zhí)行的功能。ScreenSpaceEventType類對鼠標的多種事件進行分類與定義。據(jù)此設計坐標查詢交互，關鍵代碼如圖3所示。坐標拾取有以下三種方式：①Camera.pickEllipsoid（）：通過屏幕坐標獲取橢球體上該點的三維笛卡爾坐標;②Globe.pick（）：找到射線與渲染的地球表面之間的交點的三維笛卡爾坐標;③Scene.pickPosition（）：返回從深度緩沖區(qū)和窗口位置重構的三維笛卡爾坐標。

3.2 空間測量

在三維場景中進行距離和面積的測量是三維GIS平臺中一項必要且實用的功能。測量（以距離測量為例）流程如下。

①移除對所有鼠標事件的監(jiān)聽，重新對鼠標移動、左鍵單擊、右鍵單擊和左鍵雙擊事件觸發(fā)的響應進行定義，然后進入監(jiān)聽狀態(tài)。

②當監(jiān)聽到鼠標移動事件時，根據(jù)鼠標指針的位置重新繪制出折線段。當監(jiān)聽到鼠標左鍵單擊事件時，執(zhí)行步驟③;當監(jiān)聽到鼠標右鍵單擊事件時，執(zhí)行步驟④;當監(jiān)聽到鼠標左鍵雙擊事件時，執(zhí)行步驟⑤。

③如果本次點擊是首次點擊，則繪制該折點;否則除繪制該點外，再繪制出該點與上一相鄰點所連線段，并在該點上標注出折線的長度。

④如果此時已經(jīng)繪制了部分折點與折線段，則清除最后一段線段和最后一個折點;如果此時已是雙擊完成狀態(tài)，則清除所有繪制的折線段和折點。

⑤繪制末尾折點和最后一段折線，顯示折線總長度，距離測量完成。

距離測量的流程如圖4所示。

距離測量和面積測量的結果如圖5所示。據(jù)此流程方法，可實現(xiàn)對線狀要素和面狀要素的繪制功能。

3.3 單體化

通過傾斜攝影測量技術獲得的實景三維模型不能對道路、建筑等地物進行區(qū)分，因而需要把傾斜模型拆分為獨立、可識別的單體對象，即單體化過程[8]。經(jīng)過單體化處理的傾斜攝影模型可加入鼠標監(jiān)聽事件，從而實現(xiàn)高亮標記、屬性查詢等功能。

通過實例化GeometryInstance類，然后創(chuàng)建ClassificationPrimitive函數(shù)，從而實現(xiàn)對三維實景的單體化，最后將其添加至場景中。為了增強交互效果，添加鼠標響應事件流程如下：當鼠標移動至單體模型時，將該模型高亮顯示，并顯示出該單體模型的屬性表;當鼠標左鍵單擊選中單體時，鎖定被選中的單體并移除鼠標移動監(jiān)聽;鼠標左鍵單擊至非單體化實體或鼠標右鍵單擊時，重新監(jiān)聽鼠標移動;鼠標左鍵雙擊單體時，跳轉至該樓層俯視圖（樓體分層單體化使用）。模型單體分類和鼠標事件監(jiān)聽響應邏輯關系如圖6所示。

當拾取到單體模型時，通過單體模型的id、primitive、show和color等屬性控制動態(tài)交互性。

4 結語

本研究提出了一種基于WebGL的三維GIS平臺快速構建方案，介紹了以Cesium為核心的三維虛擬地理環(huán)境搭建框架及實現(xiàn)關鍵功能的技術。結果表明，本研究提出的方案與方法具有較好的通用性與可移植性，可為多種應用場景的三維WebGIS平臺設計提供參考。

參考文獻：

[1] 魏世軒.基于Cesium的空間數(shù)據(jù)展示與查詢關鍵技術研究[J].城市勘測，2021（3）：5-8.

[2] 孫曉鵬，張芳，應國偉，等.基于Cesium.js和天地圖的三維場景構建方法[J].地理空間信息，2018（1）：65-67，8.

[3] 郭神福，趙孔陽，王孝龍，等.基于WebGL的高速列車在線運行及沿線虛擬地理環(huán)境仿真[J].鐵道科學與工程學報，2020（3）：573-581.

[4] 高云成.基于Cesium的WebGIS三維客戶端實現(xiàn)技術研究[D].西安：西安電子科技大學，2014.

[5] 曹祎楠，王佳，顧大鵬.面向多源數(shù)據(jù)集成的高速公路數(shù)字化方法[J].科學技術與工程，2019（19）：214-221.

[6] 楊明奇，周程，付立軍，等.融合Cesium和Geoserver的地質數(shù)據(jù)形變監(jiān)測可視化方法[J].計算機系統(tǒng)應用，2021（11）： 179-187.

[7] 王逸凱，徐萌，羅建松，等.基于Cesium的WebGIS傾斜三維平臺的實現(xiàn)[J].測繪與空間地理信息，2019（4）：88-89.

[8]陳良超，詹勇，王俊勇.一種傾斜攝影實景三維模型單體化方法[J].測繪通報，2018（6）：68-72，108.