基于WebGL 的智慧社區三維可視化應用研究

劉天財　楊宇青　馬繼承　胡鋒

摘要： 智慧社區是智慧城市建設的基本單元，針對基于傳統三維WebGIS 技術開發的智慧社區三維可視化平臺難以滿足大眾需求和社區治理體系治理能力現代化要求的問題，通過對三維可視化技術進行研究，探索WebGL 技術在智慧社區三維可視化中的應用，設計開發三維可視化管理平臺。應用實踐表明，基于WebGL的智慧社區三維可視化管理平臺實現了社區輕便化、可視化、網格化、精細化管理，提升了社區治理體系和治理能力現代化水平。

關鍵詞： 智慧社區 WebGL 傾斜攝影 三維可視化

中圖分類號： P208;TP399 文獻標識碼： A 文章編號： 1672-3791（2023）24-0233-06

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

1 關鍵技術

1.1 WebGL 技術

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

1.2 傾斜攝影

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

1.2.1 攝影機和相機參數標定。

傾斜攝影需要使用具有足夠高精度的攝影機和相機，確保拍攝過程中的實際物體尺寸和形狀不會發生變化。攝影機和相機參數標定是確保攝影成像幾何精度的基礎。

1.2.2 攝影規劃和飛行控制

傾斜攝影需要制訂攝影規劃，選擇適當的攝影高度、攝影方向和飛行速度。攝影規劃應該充分考慮地形變化、地物特征和拍攝要求，避免出現遮擋和重影現象。飛行控制則是在實際拍攝中，保證飛行器沿著預定路徑飛行，拍攝出高質量的傾斜影像。

1.2.3 影像處理和數據處理

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

1.2.4 數據融合和編輯

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

當前，傾斜攝影技術被廣泛應用于智慧城市（社區）建設、城市規劃和土地利用、基礎設施建設、旅游和文化遺產保護、自然資源管理、地質災害防治、應急處突等領域，對經濟社會高質量發展發揮重大作用。

2 平臺設計與實現

2.1 系統結構

智慧社區三維可視化管理平臺基于B/S 結構（Browser/Server Architecture）進行設計開發，B/S 結構是一種常見的軟件架構模式，它將平臺的功能劃分為兩個主要部分：瀏覽器（Browser）和服務器（Server）。瀏覽器作為客戶端，負責向用戶展示平臺的三維可視化交互界面，并接收用戶的輸入操作，通過發送請求到服務器來獲取數據和執行業務邏輯。服務器作為服務端，負責處理瀏覽器發來的請求，執行相關的業務邏輯，從數據庫或其他資源中獲取數據，并將處理結果返回給瀏覽器。該結構通過將業務邏輯的處理和數據的存儲放在服務器端，使得平臺系統具有更加靈活、易于部署和維護，并提高了數據的安全性和可擴展性等優勢，是一種較好軟件架構模式。

2.2 總體架構

智慧社區三維可視化管理平臺按照標準統一性、安全可靠性、創新服務、業務驅動、靈活性、平臺通用性、簡潔易用的原則進行設計，結構采用B/S 結構。總體框架以法律法規與標準規范、安全保障與運行管理兩大保障體系為支撐，以基礎設施層為基礎，社區專題數據和地理空間數據為驅動，構建三維可視化管理平臺。智慧社區三維可視化管理平臺總體框架包括基礎設施層、數據層、支撐層、應用層、表現層，如圖2 所示。

（1）基礎設施層是支撐運行環境，是智慧社區三維可視化管理平臺建設載體，為上層應用和服務的運行和平臺的穩定性、可擴展性和安全性提供保障。包括計算資源、網絡資源、存儲資源等。

（2）數據層包括基礎地理數據庫、實景三維數據庫、單體化數據庫、網格數據庫、專題數據庫等。

（3）支撐層包括GIS 服務器、Web 服務器、數據庫管理系統等，提供地理空間數據服務、Web 應用發布以及數據庫管理等。

（4）應用層在數據層和支撐層的基礎上，根據智慧社區三維可視化管理需求，平臺提供人房一體化管理、監控管理、網格管理、三維可視化分析、運維管理等服務。

（5）表現層是用戶使用系統的窗口，用戶根據相應的權限可以通過PC 端、移動手機端和其他終端進行交互。

2.3 功能設計

智慧社區三維可視化管理平臺聚焦社區可視化、網格化、精細化管理需求，以三維場景數據為底座，地理空間數據和專題數據為驅動，開發智慧社區三維可視化管理平臺，實現社區人房一體化管理，主要功能包括人員信息管理、房屋信息管理、人房一體化管理、三維空間分析、三維可視化分析、網格管理、監控管理、三維地圖基本操作（展示、漫游、放大縮小）、地圖測量（包括測面積、測長度和測高度）等（如圖3所示）。

2.4 數據庫設計

智慧社區三維可視化管理平臺數據主要有人口信息、房屋信息、監控點位數據等關系數據表和傾斜攝影數據、單體化數據、網格數據等空間數據。關系數據用關系數據庫進行存儲，按照標準化和規范化的原則進行設計，采用第三范式標準，在性能、擴展性和數據完整性方面實現了較好平衡。單體化數據、網格數據存儲于空間數據庫中，三維傾斜攝影數據以文件形式進行存儲管理，通過WebGIS 服務器進行服務發布以提供使用。視頻傳感器表包括傳感器的基本信息和三維坐標信息，如區域、設備名稱、設備ID 號、經度、緯度、高程等；房屋信息表包括社區房屋基本信息，如戶主姓名、戶主身份證號、房屋編號、樓棟信息、網格編號等。主要數據及部分數據表結構如表1—表3 所示。

2.5 功能實現

智慧社區三維可視化管理平臺聚焦社區可視化、網格化、精細化管理需求，以地理空間數據和專題數據為驅動，開發了人員信息管理、房屋信息管理、人房一體化管理、三維空間分析、三維可視化分析、網格管理、監控管理、三維模型基本操作等功能模塊。圖4為部分功能截圖。

2.5.1 人員信息管理

人員信息管理主要是對社區內居民基本信息的維護、更新管理，包括戶籍人員、非戶籍人員以及特殊人員的信息錄入、更新，以及按人員年齡、區域、人員類型、所屬網格等進行統計分析。

2.5.2 房屋信息管理

房屋信息管理實現對房屋所屬社區、居委會、網格、樓棟、樓層、房間號等信息進行采集入庫、更新、維護等，并與房屋單體化數據進行關聯，便于社區管理者快速定位到房屋。

2.5.3 人房一體化管理

該功能模塊將人口信息和房屋信息通過ID 進行關聯，以實現“以房找人”“以人查房”。“以房找人”是通過在實景三維場景中點擊房屋，房屋高亮顯示并展示房屋所住人員基本信息。“以人查房”是通過輸入人員姓名，搜索定位到該人員所居住的房屋位置，并展示房屋、住戶屬性信息。

2.5.4 三維空間分析

該模塊在三維模型中實現通視分析、可視域分析等，可用于安防工程中監控選點布設等。

2.5.5 三維可視化分析

在三維模型中，對社區人員進行統計分析并展示分布情況。如按照居委會、網格單元等，對黨員、軍人、殘疾人、低收入人群等特殊人群進行統計分析，并在三維模型中展示各類特殊人群中分布情況。

2.5.6 網格管理

在三維模型中展示社區網格劃分情況及網格信息（網格編號、網格員等）查詢、定位等操作，按照網格范圍進行人員信息的精準查找以及低收入群體、黨員、軍人、殘疾人這四類人員統計分析。

2.5.7 監控管理

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

2.5.8 三維模型操作基本功能

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

3 結語

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

參考文獻

[1] 肖子曇. 南京市仙林社區網格化治理研究[D]. 南京：南京師范大學，2019.

[2] 楊博. 基于WebGIS 的智慧社區管理系統的設計與開發[D]. 重慶：重慶交通大學，2019.

[3] 鄒思雨. 基于WebGIS 的智慧社區平臺設計與實現[D]. 南京：南京師范大學，2019.

[4] 和世開. 社區地圖在社區網格化管理中的應用[J].城市勘測，2019（1）：111-113.

[5] 楊博，馮曉. 重慶市數字社區綜合平臺管理系統的構建[J]. 測繪，2019（2）：18-20.

[6] 王星捷，衛守林.WebGL 技術的三維WebGIS 平臺研究與應用[J]. 遙感信息，2019，34（3）：134-138.

[7] 馬亮，王彬.WebGL 三維技術、建模分析及優化研究[J]. 長春師范大學學報，2022，41（2）：64-69.

[8] 郭建雄. 基于WebGL 的地理信息數據三維可視化方法研究[D]. 南昌：東華理工大學，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] 孫杰，謝文寒，白瑞杰. 無人機傾斜攝影技術研究與應用[J]. 測繪科學，2019，44（6）：145-150.

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

[13] 馮增文，李珂，李梓豪，等. 低空無人機的傾斜攝影測量技術在城市軌道交通建設中的應用[J]. 測繪通報，2020（9）：42-45.

[14] 陳理想. 無人機傾斜攝影實景三維建模及質量評價[J]. 測繪與空間地理信息，2019，42（1）：159-162.