基于WebGL 的智慧社區(qū)三維可視化應(yīng)用研究

劉天財(cái)　楊宇青　馬繼承　胡鋒

摘要： 智慧社區(qū)是智慧城市建設(shè)的基本單元，針對(duì)基于傳統(tǒng)三維WebGIS 技術(shù)開發(fā)的智慧社區(qū)三維可視化平臺(tái)難以滿足大眾需求和社區(qū)治理體系治理能力現(xiàn)代化要求的問(wèn)題，通過(guò)對(duì)三維可視化技術(shù)進(jìn)行研究，探索WebGL 技術(shù)在智慧社區(qū)三維可視化中的應(yīng)用，設(shè)計(jì)開發(fā)三維可視化管理平臺(tái)。應(yīng)用實(shí)踐表明，基于WebGL的智慧社區(qū)三維可視化管理平臺(tái)實(shí)現(xiàn)了社區(qū)輕便化、可視化、網(wǎng)格化、精細(xì)化管理，提升了社區(qū)治理體系和治理能力現(xiàn)代化水平。

關(guān)鍵詞： 智慧社區(qū) WebGL 傾斜攝影 三維可視化

中圖分類號(hào)： P208;TP399 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 1672-3791（2023）24-0233-06

我國(guó)在城市化持續(xù)快速推進(jìn)的過(guò)程中取得了巨大的成績(jī)，也面臨著人口膨脹、重點(diǎn)人員及流動(dòng)人口管理和服務(wù)難、公共安全瓶頸等諸多城市治理問(wèn)題，社區(qū)作為人們社會(huì)生活的基本場(chǎng)域，這些問(wèn)題隨之下沉到社區(qū)［1］。為解決社區(qū)治理中的問(wèn)題，學(xué)者們從治理機(jī)制和技術(shù)手段上提出了創(chuàng)新治理模式［2-5］。三維WebGIS技術(shù)可將海量的三維數(shù)據(jù)快速的可視化呈現(xiàn)，展示出社區(qū)的實(shí)景三維地圖、網(wǎng)格圖，以及各種重要物聯(lián)網(wǎng)設(shè)備的運(yùn)行狀況等信息，為智慧社區(qū)的智慧化管理提供強(qiáng)大的三維地理空間時(shí)空基底，使社區(qū)管理人員更好地進(jìn)行人員管理、房屋管理、網(wǎng)格管理，監(jiān)控社區(qū)整體安全狀況等，是智慧社區(qū)建設(shè)的重要技術(shù)手段之一。但基于傳統(tǒng)WebGIS 技術(shù)的智慧社區(qū)系統(tǒng)存在開發(fā)成本高、依賴插件、兼容性差、擴(kuò)展性差、運(yùn)行速度慢等問(wèn)題［6］，難以有效滿足大眾的需求和社區(qū)治理體系治理能力現(xiàn)代化的要求。隨著瀏覽器技術(shù)創(chuàng)新發(fā)展和計(jì)算機(jī)硬件性能的不斷提升，無(wú)須安裝插件即可在網(wǎng)絡(luò)瀏覽器中進(jìn)行三維圖形渲染和交互的WebGL 技術(shù)日益成熟，可綜合利用WebGL、傾斜攝影、物聯(lián)網(wǎng)等技術(shù)，整合社區(qū)各類資源，開發(fā)輕便化的智慧社區(qū)三維可視化管理平臺(tái)，賦能社區(qū)治理與服務(wù)，打造社區(qū)治理新模式。

1 關(guān)鍵技術(shù)

1.1 WebGL 技術(shù)

WebGL（Web Graphics Library）是由Khronos Group發(fā)布的一項(xiàng)可在瀏覽器中繪制和渲染三維圖形，并可實(shí)現(xiàn)三維場(chǎng)景漫游和交互的技術(shù)，經(jīng)頂點(diǎn)著色器、圖元裝配、光柵化、片段著色器、像素處理、繪制緩存等步驟和流程完成三維圖形的繪制［7］。WebGL 的出現(xiàn)開啟了無(wú)插件的三維可視化時(shí)代，這種繪圖技術(shù)基于OpenGL ES 2.0 標(biāo)準(zhǔn)，能夠使用JavaScript 與GPU 進(jìn)行交互，瀏覽器直接調(diào)用顯卡GPU 進(jìn)行三維渲染，創(chuàng)建并流暢地展示復(fù)雜的三維場(chǎng)景和模型［8-10］。WebGL 技術(shù)被廣泛用于虛擬現(xiàn)實(shí)、數(shù)據(jù)可視化、科學(xué)計(jì)算等領(lǐng)域，與其他技術(shù)相比，它的優(yōu)點(diǎn)在于高效、跨平臺(tái)、強(qiáng)大和易于使用。該技術(shù)在不需要插件或其他依賴的情況下，通過(guò)瀏覽器內(nèi)核直接調(diào)用計(jì)算機(jī)的GPU 硬件進(jìn)行三維圖形渲染，具有高效的渲染性能；不受平臺(tái)限制，能夠在任何支持WebGL 標(biāo)準(zhǔn)的瀏覽器上運(yùn)行，支持WebGL 1.0 和WebGL 2.0 兩個(gè)版本，同時(shí)也支持OpenGL ES 2.0 標(biāo)準(zhǔn)；WebGL 技術(shù)是以開放源代碼形式發(fā)布的，因此對(duì)于開發(fā)者來(lái)說(shuō)是免費(fèi)的，具有開放性。架構(gòu)如圖1 所示。

1.2 傾斜攝影

傾斜攝影技術(shù)（機(jī)載多角度傾斜攝影測(cè)量技術(shù)的簡(jiǎn)稱）是國(guó)際航空攝影測(cè)量領(lǐng)域發(fā)展起來(lái)的一項(xiàng)高新技術(shù)，該技術(shù)突破了傳統(tǒng)航空攝影測(cè)量只能從一個(gè)垂直方向拍攝的局限，通過(guò)無(wú)人機(jī)、直升機(jī)等飛行平臺(tái)搭載5 個(gè)傳感器（相機(jī)），從1 個(gè)垂直、4 個(gè)傾斜不同的視角同步采集影像，獲取到豐富、完整、準(zhǔn)確的地物信息，通過(guò)先進(jìn)的定位、融合、建模等技術(shù)，生成真實(shí)的三維模型，很大程度降低了三維建模的成本［11-14］。通過(guò)該技術(shù)生成的三維模型具有夠真實(shí)地反映地物情況、單張影像可測(cè)量、建筑物側(cè)面紋理可采集等特點(diǎn)。傾斜攝影主要技術(shù)包括攝影機(jī)和相機(jī)參數(shù)標(biāo)定、攝影規(guī)劃和飛行控制、影像處理和數(shù)據(jù)處理、數(shù)據(jù)融合和編輯等。

1.2.1 攝影機(jī)和相機(jī)參數(shù)標(biāo)定。

傾斜攝影需要使用具有足夠高精度的攝影機(jī)和相機(jī)，確保拍攝過(guò)程中的實(shí)際物體尺寸和形狀不會(huì)發(fā)生變化。攝影機(jī)和相機(jī)參數(shù)標(biāo)定是確保攝影成像幾何精度的基礎(chǔ)。

1.2.2 攝影規(guī)劃和飛行控制

傾斜攝影需要制訂攝影規(guī)劃，選擇適當(dāng)?shù)臄z影高度、攝影方向和飛行速度。攝影規(guī)劃應(yīng)該充分考慮地形變化、地物特征和拍攝要求，避免出現(xiàn)遮擋和重影現(xiàn)象。飛行控制則是在實(shí)際拍攝中，保證飛行器沿著預(yù)定路徑飛行，拍攝出高質(zhì)量的傾斜影像。

1.2.3 影像處理和數(shù)據(jù)處理

影像處理是將所獲取的傾斜影像數(shù)據(jù)進(jìn)行處理和優(yōu)化，得到高質(zhì)量的影像成果。處理內(nèi)容包括影像糾正、建立相對(duì)定向和絕對(duì)定向模型等。數(shù)據(jù)處理是指將處理后的傾斜影像數(shù)據(jù)進(jìn)行數(shù)值計(jì)算、分析和測(cè)量，得到地面三維信息和地物特征。

1.2.4 數(shù)據(jù)融合和編輯

傾斜攝影在執(zhí)行過(guò)程中會(huì)得到大量的影像和數(shù)據(jù)信息。要將這些數(shù)據(jù)信息高效、準(zhǔn)確地整合起來(lái)，需要進(jìn)行數(shù)據(jù)融合和編輯。數(shù)據(jù)融合包括將不同時(shí)刻、不同視角和不同光譜范圍的傾斜影像數(shù)據(jù)進(jìn)行組合和疊加，生成全方位、高分辨率的影像。數(shù)據(jù)編輯則是依據(jù)應(yīng)用要求，對(duì)傾斜影像數(shù)據(jù)進(jìn)行裁切、分割、分類等處理，得到符合應(yīng)用需求的數(shù)據(jù)成果。

當(dāng)前，傾斜攝影技術(shù)被廣泛應(yīng)用于智慧城市（社區(qū)）建設(shè)、城市規(guī)劃和土地利用、基礎(chǔ)設(shè)施建設(shè)、旅游和文化遺產(chǎn)保護(hù)、自然資源管理、地質(zhì)災(zāi)害防治、應(yīng)急處突等領(lǐng)域，對(duì)經(jīng)濟(jì)社會(huì)高質(zhì)量發(fā)展發(fā)揮重大作用。

2 平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)結(jié)構(gòu)

智慧社區(qū)三維可視化管理平臺(tái)基于B/S 結(jié)構(gòu)（Browser/Server Architecture）進(jìn)行設(shè)計(jì)開發(fā)，B/S 結(jié)構(gòu)是一種常見(jiàn)的軟件架構(gòu)模式，它將平臺(tái)的功能劃分為兩個(gè)主要部分：瀏覽器（Browser）和服務(wù)器（Server）。瀏覽器作為客戶端，負(fù)責(zé)向用戶展示平臺(tái)的三維可視化交互界面，并接收用戶的輸入操作，通過(guò)發(fā)送請(qǐng)求到服務(wù)器來(lái)獲取數(shù)據(jù)和執(zhí)行業(yè)務(wù)邏輯。服務(wù)器作為服務(wù)端，負(fù)責(zé)處理瀏覽器發(fā)來(lái)的請(qǐng)求，執(zhí)行相關(guān)的業(yè)務(wù)邏輯，從數(shù)據(jù)庫(kù)或其他資源中獲取數(shù)據(jù)，并將處理結(jié)果返回給瀏覽器。該結(jié)構(gòu)通過(guò)將業(yè)務(wù)邏輯的處理和數(shù)據(jù)的存儲(chǔ)放在服務(wù)器端，使得平臺(tái)系統(tǒng)具有更加靈活、易于部署和維護(hù)，并提高了數(shù)據(jù)的安全性和可擴(kuò)展性等優(yōu)勢(shì)，是一種較好軟件架構(gòu)模式。

2.2 總體架構(gòu)

智慧社區(qū)三維可視化管理平臺(tái)按照標(biāo)準(zhǔn)統(tǒng)一性、安全可靠性、創(chuàng)新服務(wù)、業(yè)務(wù)驅(qū)動(dòng)、靈活性、平臺(tái)通用性、簡(jiǎn)潔易用的原則進(jìn)行設(shè)計(jì)，結(jié)構(gòu)采用B/S 結(jié)構(gòu)?？傮w框架以法律法規(guī)與標(biāo)準(zhǔn)規(guī)范、安全保障與運(yùn)行管理兩大保障體系為支撐，以基礎(chǔ)設(shè)施層為基礎(chǔ)，社區(qū)專題數(shù)據(jù)和地理空間數(shù)據(jù)為驅(qū)動(dòng)，構(gòu)建三維可視化管理平臺(tái)。智慧社區(qū)三維可視化管理平臺(tái)總體框架包括基礎(chǔ)設(shè)施層、數(shù)據(jù)層、支撐層、應(yīng)用層、表現(xiàn)層，如圖2 所示。

（1）基礎(chǔ)設(shè)施層是支撐運(yùn)行環(huán)境，是智慧社區(qū)三維可視化管理平臺(tái)建設(shè)載體，為上層應(yīng)用和服務(wù)的運(yùn)行和平臺(tái)的穩(wěn)定性、可擴(kuò)展性和安全性提供保障。包括計(jì)算資源、網(wǎng)絡(luò)資源、存儲(chǔ)資源等。

（2）數(shù)據(jù)層包括基礎(chǔ)地理數(shù)據(jù)庫(kù)、實(shí)景三維數(shù)據(jù)庫(kù)、單體化數(shù)據(jù)庫(kù)、網(wǎng)格數(shù)據(jù)庫(kù)、專題數(shù)據(jù)庫(kù)等。

（3）支撐層包括GIS 服務(wù)器、Web 服務(wù)器、數(shù)據(jù)庫(kù)管理系統(tǒng)等，提供地理空間數(shù)據(jù)服務(wù)、Web 應(yīng)用發(fā)布以及數(shù)據(jù)庫(kù)管理等。

（4）應(yīng)用層在數(shù)據(jù)層和支撐層的基礎(chǔ)上，根據(jù)智慧社區(qū)三維可視化管理需求，平臺(tái)提供人房一體化管理、監(jiān)控管理、網(wǎng)格管理、三維可視化分析、運(yùn)維管理等服務(wù)。

（5）表現(xiàn)層是用戶使用系統(tǒng)的窗口，用戶根據(jù)相應(yīng)的權(quán)限可以通過(guò)PC 端、移動(dòng)手機(jī)端和其他終端進(jìn)行交互。

2.3 功能設(shè)計(jì)

智慧社區(qū)三維可視化管理平臺(tái)聚焦社區(qū)可視化、網(wǎng)格化、精細(xì)化管理需求，以三維場(chǎng)景數(shù)據(jù)為底座，地理空間數(shù)據(jù)和專題數(shù)據(jù)為驅(qū)動(dòng)，開發(fā)智慧社區(qū)三維可視化管理平臺(tái)，實(shí)現(xiàn)社區(qū)人房一體化管理，主要功能包括人員信息管理、房屋信息管理、人房一體化管理、三維空間分析、三維可視化分析、網(wǎng)格管理、監(jiān)控管理、三維地圖基本操作（展示、漫游、放大縮?。⒌貓D測(cè)量（包括測(cè)面積、測(cè)長(zhǎng)度和測(cè)高度）等（如圖3所示）。

2.4 數(shù)據(jù)庫(kù)設(shè)計(jì)

智慧社區(qū)三維可視化管理平臺(tái)數(shù)據(jù)主要有人口信息、房屋信息、監(jiān)控點(diǎn)位數(shù)據(jù)等關(guān)系數(shù)據(jù)表和傾斜攝影數(shù)據(jù)、單體化數(shù)據(jù)、網(wǎng)格數(shù)據(jù)等空間數(shù)據(jù)。關(guān)系數(shù)據(jù)用關(guān)系數(shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，按照標(biāo)準(zhǔn)化和規(guī)范化的原則進(jìn)行設(shè)計(jì)，采用第三范式標(biāo)準(zhǔn)，在性能、擴(kuò)展性和數(shù)據(jù)完整性方面實(shí)現(xiàn)了較好平衡。單體化數(shù)據(jù)、網(wǎng)格數(shù)據(jù)存儲(chǔ)于空間數(shù)據(jù)庫(kù)中，三維傾斜攝影數(shù)據(jù)以文件形式進(jìn)行存儲(chǔ)管理，通過(guò)WebGIS 服務(wù)器進(jìn)行服務(wù)發(fā)布以提供使用。視頻傳感器表包括傳感器的基本信息和三維坐標(biāo)信息，如區(qū)域、設(shè)備名稱、設(shè)備ID 號(hào)、經(jīng)度、緯度、高程等；房屋信息表包括社區(qū)房屋基本信息，如戶主姓名、戶主身份證號(hào)、房屋編號(hào)、樓棟信息、網(wǎng)格編號(hào)等。主要數(shù)據(jù)及部分?jǐn)?shù)據(jù)表結(jié)構(gòu)如表1—表3 所示。

2.5 功能實(shí)現(xiàn)

智慧社區(qū)三維可視化管理平臺(tái)聚焦社區(qū)可視化、網(wǎng)格化、精細(xì)化管理需求，以地理空間數(shù)據(jù)和專題數(shù)據(jù)為驅(qū)動(dòng)，開發(fā)了人員信息管理、房屋信息管理、人房一體化管理、三維空間分析、三維可視化分析、網(wǎng)格管理、監(jiān)控管理、三維模型基本操作等功能模塊。圖4為部分功能截圖。

2.5.1 人員信息管理

人員信息管理主要是對(duì)社區(qū)內(nèi)居民基本信息的維護(hù)、更新管理，包括戶籍人員、非戶籍人員以及特殊人員的信息錄入、更新，以及按人員年齡、區(qū)域、人員類型、所屬網(wǎng)格等進(jìn)行統(tǒng)計(jì)分析。

2.5.2 房屋信息管理

房屋信息管理實(shí)現(xiàn)對(duì)房屋所屬社區(qū)、居委會(huì)、網(wǎng)格、樓棟、樓層、房間號(hào)等信息進(jìn)行采集入庫(kù)、更新、維護(hù)等，并與房屋單體化數(shù)據(jù)進(jìn)行關(guān)聯(lián)，便于社區(qū)管理者快速定位到房屋。

2.5.3 人房一體化管理

該功能模塊將人口信息和房屋信息通過(guò)ID 進(jìn)行關(guān)聯(lián)，以實(shí)現(xiàn)“以房找人”“以人查房”?！耙苑空胰恕笔峭ㄟ^(guò)在實(shí)景三維場(chǎng)景中點(diǎn)擊房屋，房屋高亮顯示并展示房屋所住人員基本信息?！耙匀瞬榉俊笔峭ㄟ^(guò)輸入人員姓名，搜索定位到該人員所居住的房屋位置，并展示房屋、住戶屬性信息。

2.5.4 三維空間分析

該模塊在三維模型中實(shí)現(xiàn)通視分析、可視域分析等，可用于安防工程中監(jiān)控選點(diǎn)布設(shè)等。

2.5.5 三維可視化分析

在三維模型中，對(duì)社區(qū)人員進(jìn)行統(tǒng)計(jì)分析并展示分布情況。如按照居委會(huì)、網(wǎng)格單元等，對(duì)黨員、軍人、殘疾人、低收入人群等特殊人群進(jìn)行統(tǒng)計(jì)分析，并在三維模型中展示各類特殊人群中分布情況。

2.5.6 網(wǎng)格管理

在三維模型中展示社區(qū)網(wǎng)格劃分情況及網(wǎng)格信息（網(wǎng)格編號(hào)、網(wǎng)格員等）查詢、定位等操作，按照網(wǎng)格范圍進(jìn)行人員信息的精準(zhǔn)查找以及低收入群體、黨員、軍人、殘疾人這四類人員統(tǒng)計(jì)分析。

2.5.7 監(jiān)控管理

該功能模塊主要對(duì)監(jiān)控視頻的位置信息（地理坐標(biāo)）、鏈接屬性等基本信息進(jìn)行更新和維護(hù)。在三維模型中根據(jù)監(jiān)控視頻的地理坐標(biāo)進(jìn)行定位、符號(hào)化并展示分布情況，單擊監(jiān)控視頻符號(hào)即可查看實(shí)時(shí)監(jiān)控畫面。

2.5.8 三維模型操作基本功能

包括3D 地圖展示、漫游、放大縮小、地圖測(cè)量（包括測(cè)面積、測(cè)長(zhǎng)度和測(cè)高度）等功能。

3 結(jié)語(yǔ)

本文充分利用WebGL、傾斜攝影、互聯(lián)網(wǎng)等技術(shù)，對(duì)智慧社區(qū)三維可視化進(jìn)行研究，研發(fā)了智慧社區(qū)三維可視化管理平臺(tái)，主要功能包括人員信息管理、房屋信息管理、人房一體化管理、三維空間分析、三維可視化分析、網(wǎng)格管理、監(jiān)控管理、三維地圖基本操作、地圖測(cè)量等，實(shí)現(xiàn)了社區(qū)可視化、網(wǎng)格化、精細(xì)化管理。應(yīng)用實(shí)踐表明，基于WebGL 技術(shù)開發(fā)的智慧社區(qū)三維可視化管理平臺(tái)無(wú)須安裝渲染插件，具有跨平臺(tái)、跨瀏覽器、兼容性好、使用輕便簡(jiǎn)潔等特點(diǎn)，能夠滿足社區(qū)治理體系和治理能力現(xiàn)代化技術(shù)要求，可為智慧社區(qū)三維可視化建設(shè)提供新的技術(shù)方法和模式參考，對(duì)智慧社區(qū)的建設(shè)具有重要現(xiàn)實(shí)意義。

參考文獻(xiàn)

[1] 肖子曇. 南京市仙林社區(qū)網(wǎng)格化治理研究[D]. 南京：南京師范大學(xué)，2019.

[2] 楊博. 基于WebGIS 的智慧社區(qū)管理系統(tǒng)的設(shè)計(jì)與開發(fā)[D]. 重慶：重慶交通大學(xué)，2019.

[3] 鄒思雨. 基于WebGIS 的智慧社區(qū)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[D]. 南京：南京師范大學(xué)，2019.

[4] 和世開. 社區(qū)地圖在社區(qū)網(wǎng)格化管理中的應(yīng)用[J].城市勘測(cè)，2019（1）：111-113.

[5] 楊博，馮曉. 重慶市數(shù)字社區(qū)綜合平臺(tái)管理系統(tǒng)的構(gòu)建[J]. 測(cè)繪，2019（2）：18-20.

[6] 王星捷，衛(wèi)守林.WebGL 技術(shù)的三維WebGIS 平臺(tái)研究與應(yīng)用[J]. 遙感信息，2019，34（3）：134-138.

[7] 馬亮，王彬.WebGL 三維技術(shù)、建模分析及優(yōu)化研究[J]. 長(zhǎng)春師范大學(xué)學(xué)報(bào)，2022，41（2）：64-69.

[8] 郭建雄. 基于WebGL 的地理信息數(shù)據(jù)三維可視化方法研究[D]. 南昌：東華理工大學(xué)，2019.

[9] WATTERS A R. Shader-like Computations in WebGL for Advanced Graphics and General Purposes[J]. Computing in Scicence and Engineering，2021，23（2）：54-63.

[10] RODRIGUES R， MATOS T， DE CARVALHO A V， et al.Computer Graphics Teaching Challenges：Guidelines for Balancing Depth， Complexity and Mentoring in a Confinement Context[J].Graphics and Visual Computing，2021，4：200021.

[11] 孫杰，謝文寒，白瑞杰. 無(wú)人機(jī)傾斜攝影技術(shù)研究與應(yīng)用[J]. 測(cè)繪科學(xué)，2019，44（6）：145-150.

[12] 于麗麗.基于無(wú)人機(jī)傾斜攝影測(cè)量技術(shù)的城市三維實(shí)景建模研究[J].測(cè)繪與空間地理信息，2021，44（5）：86-88.

[13] 馮增文，李珂，李梓豪，等. 低空無(wú)人機(jī)的傾斜攝影測(cè)量技術(shù)在城市軌道交通建設(shè)中的應(yīng)用[J]. 測(cè)繪通報(bào)，2020（9）：42-45.

[14] 陳理想. 無(wú)人機(jī)傾斜攝影實(shí)景三維建模及質(zhì)量評(píng)價(jià)[J]. 測(cè)繪與空間地理信息，2019，42（1）：159-162.