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

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

中圖分類號(hào)：P208 ? ?文獻(xiàn)標(biāo)志碼：A ? ?文章編號(hào)：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 引言

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

1 總體架構(gòu)設(shè)計(jì)

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

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

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

2 三維場景構(gòu)建

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

2.1 影像地圖和地形模型

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

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

2.2 地理要素圖層

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

2.3 三維模型

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

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

3.1 位置查詢

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

3.2 空間測量

在三維場景中進(jìn)行距離和面積的測量是三維GIS平臺(tái)中一項(xiàng)必要且實(shí)用的功能。測量（以距離測量為例）流程如下。

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

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

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

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

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

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

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

3.3 單體化

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

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

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

4 結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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