基于VUE 3與WebGL的三維不動產管理平臺的搭建

摘 ?要：針對傳統不動產管理平臺以文字形式描述不動產以及周邊環境信息，而文字描述存在抽象、不具體等問題，構建一個直觀、可視、地理位置精確的不動產管理平臺。采用BIM技術及傾斜攝影技術創建實景模型數據，通過VUE 3.0前端庫進行頁面設計，利用WebGL技術進行功能開發，建立不動產區的實景三維模型。該模型可以實現屬性查詢、可視域分析、二三維疊加聯動分析等功能，輔助管理者進行決策。

關鍵詞：傾斜攝影；WebGL技術；VUE 3.0；BIM

中圖分類號：TP393 ? 文獻標識碼：A ? 文章編號：2096-4706（2023）14-0029-05

Construction of 3D Real Estate Management Platform Based on VUE 3 and WebGL

YU Peng

（Sichuan Institute of Geological Surveying and Mapping Co.， Ltd.， Chengdu ?610017， China）

Abstract： In response to the traditional real estate management platform's textual description of real estate and surrounding environmental information， which is abstract and not specific， build an intuitive， visual， and geographically accurate real estate management platform. Using BIM technology and oblique photography technology to create realistic model data， page design is carried out through VUE 3.0 front-end library， functional development is carried out using WebGL technology， and a realistic 3D model of the real estate area is established. This model can achieve functions such as attribute query， viewshed analysis， 2D and 3D overlay linkage analysis， and assist managers in decision-making.

Keywords： oblique photography; WebGL technology; VUE 3.0; BIM

0 ?引 ?言

城市的迅猛發展，帶來城市不動產信息的不斷更新，傳統的不動產信息管理系統，只是通過文字信息將不動產的屬性信息、地理位置信息和周邊環境情況表現給使用者[1]。由于文字描述的位置、周邊環境及其屬性信息的直觀性和可視性差，用戶無法形象直觀的了解不動產的各種信息，包括周邊狀況、距離位置等信息[2，3]。因此本文在傾斜攝影測量模型的基礎上引入BIM模型，使模型更加美觀且可掛接屬性信息于BIM模型中，再通過GIS技術，主要包括利用VUE 3.0進行Web前端頁面設計，利用WebGL技術實現平臺的功能開發，達到對不動產信息資源進行有效整合的效果，進而輔助管理者進行決策。在不動產管理中的應用具有極大的現實意義，為領導審定方案提供了可靠的現實依據，更好地推動了不動產的管理。2022年2月，為全面推進實景三維中國建設，自然資源部印發《自然資源部辦公廳關于全面推進實景三維中國建設的通知》。《通知》明確，到2025年，5米格網的地形級實景三維實現對全國陸地及主要島嶼覆蓋，5厘米分辨率的城市級實景三維初步實現對地級以上城市覆蓋，國家和省市縣多級實景三維在線與離線相結合的服務系統初步建成，地級以上城市初步形成數字空間與現實空間實時關聯互通能力，為數字中國、數字政府和數字經濟提供三維空間定位框架和分析基礎，50%以上的政府決策、生產調度和生活規劃可通過線上實景三維空間完成，政策的出臺推升了實景三維模型的應用，綿陽市政府也在積極推進本地的實景三維的建設，本課題選用綿陽桃花島區域數據為基礎數據進行研究。

綿陽桃花島位于涪江、安昌江、芙蓉溪三江交匯口的江心地帶，桃花島東鄰綿陽三江大壩，西鄰綿陽涪江三橋，南緊臨南山，北與筆架山、富樂山遙相對望。小島空氣清新，氣候宜人，環境優美，島內坐落著綿陽桃花島國際度假酒店，生活小區，各種娛樂休閑設施應有盡有，是一座集休閑、娛樂、居住于一體的美麗島嶼。為了便于島內的不動產管理，提出了通過實景三維模型疊加BIM模型并在Web端平臺中進行展示，以實現通過屏幕就能對桃花島的狀況有所了解。

1 ?BIM在不動產管理方面的應用

BIM技術是一種建筑信息模型，BIM具有可視化、協調性、模擬性、優化性和可出圖性等特點，將規劃設計好的BIM模型疊加真三維模型，建立區域的實景三維環境，實現區域內的模型展示，并可實現屬性查詢，房屋可視域分析，城市天際線分析，二維、三維疊加分析以及距離測量等功能設計[4-6]。使用戶在屏幕中就能360度的觀看不動產的場景同時可查看模型所附帶的屬性，如在實景三維模型中通過點擊模型就能彈出彈框，就能知道這是哪一個小區，住了有多少戶人、戶型、建筑面積、綠化率等信息[7，8]。對于規劃設計、管理等方面都能提供很好的輔助作用。

2 ?VUE 3.0介紹

VUE是用于構建瀏覽器用戶界面的框架技術手段。與其他界面框架設計手段不同的是，VUE采用自底向上的方法進行開發設計。VUE易于學習且他的核心庫只關注于視圖層，界面效果簡潔美觀，與其他庫的結合也是很方便，便于項目的整合。VUE 3.0在VUE 2.0的基礎上進行了升級，其中setup（）函數是VUE 3.0中，專門為組件提供的新函數。它為我們使用VUE 3.0的Composition API新特性提供了統一的入口，VUE 3.0取消了beforeCreate、created鉤子函數，統一用setup函數代替，該函數相當于一個生命周期函數，VUE中過去的data、methods、watch等全部都用對應的新增API寫在setup（）函數中；VUE 3.0的Template支持多個根標簽，而VUE 2.0不支持；VUE 3.0可以分開渲染父組件與子組件而VUE 2.0必須同時渲染父組件與子組件。因此VUE 3.0提高了VUE2的使用效率，相對于VUE 2.0來說VUE 3.0運行效率更快，體積更小，對于維護上來說也更容易維護，對其他API也更加友好且使用方便。

3 ?三維不動產管理平臺搭建

3.1 ?系統架構

要想實現模型的測量、光照分析、可視域分析以及屬性查詢等功能，就需要在模型的基礎上進行二次開發，本文中的桃花島三維可視化管理基礎平臺基于B/S架構實現，系統架構如圖1所示，服務端包括應用服務器、數據庫服務器、三維模型瓦片數據服務器、高程瓦片數據服務器、影像瓦片數據服務器，通過服務代理將客戶端的請求轉發到對應的服務器上，界面端使用VUE 3.0進行頁面設計，包括登錄頁面、操作頁面等。用戶使用支持WebGL的瀏覽器訪問系統，通過互聯網請求系統數據，可進行用戶管理、規劃編輯、規劃展示、戶型管理、信息查詢、可視域分析和量測分析等操作。

3.2 ?技術選擇

本系統前端使用Cesium作為三維場景可視化引擎，使用VUE 3.0界面庫用作頁面設計。系統后端使用SuperMap iDesktop作為模型Web端服務發布，應用系統運行在Node.js環境下，supermap-iserver作為代理服務和瓦片數據服務，數據庫使用MongoDB。

3.3 ?關鍵問題研究

3.3.1 ?模型數據生產

為了在瀏覽器中高效加載和展示構建好的房屋三維模型，將房屋三維模型簡化處理后轉換為S3MB格式并進行發布。具體處理步驟為：

1）BIM模型構建，將模型導入到sketchup中，利用該軟件生產出建筑物的BIM模型；在sketchup中將建好的BIM模型導出為obj格式的數據。

2）用Photoshop對導出的紋理貼圖進行壓縮，以減小模型數據量，提高模型加載的效率；將用Photoshop壓縮的數據導入到SuperMap iDesktop中，利用其自帶的轉換工具將obj格式的模型轉換為S3MB格式，并進行發布。

3）利用supermap-iserver對模型進行管理。

3.3.2 ?二維矢量數據屬性掛接

通過對不動產相關數據的收集處理后，將收集整理好的資料制作成Excel表格；通過Cass-3D軟件將不動產進行二維矢量化，將二維矢量數據導入到SuperMap iDesktop軟件中并將Excel的屬性信息掛接到矢量數據中去，這樣就實現了將房屋屬性信息與二維矢量化的掛接。

3.3.3 ?屬性信息與三維實景模型相掛接

將掛接好的二維矢量數據通過賦予其高程使其拉伸成三維白模并與三維實景模型相貼合，將白模的透明度設置為100%。點擊白模后程序設置其為高亮顯示，并彈出屬性信息框顯示屬性信息。這樣便實現了點擊模型便彈出屬性信息的功能。

3.3.4 ?功能開發

針對業主方其他的需求，實現桃花島不動產管理平臺的功能包括：可視域分析、信息查詢、二維、三維聯動分析、專題圖表達、天跡線分析等功能設計。從而達到更好的管理桃花島不動產以及用于輔助規劃設計的效果。利用Java Script語言來實現功能的二次開發，代碼編輯器選用vscode。

3.4 ?系統簡介

基于實景三維模型的不動產三維管理平臺設計，利用VUE 3.0與WebGL技術將實景三維模型數據與BIM模型進行結合，使用開源技術手段二次開發出實景三維模型不動產管理平臺，實現對綿陽桃花島不動產在線展示管理平臺的開發，滿足其規劃設計以及管理等方面的需求。其部署上線后系統的登錄頁如圖2所示。

3.5 ?系統功能

系統以綿陽市桃花島數據為例，采用B/S架構設計的桃花島三維可視化管理基礎平臺，它的計算處理流程如圖3所示。首先通過格式轉換將采集處理后的模型數據、地形數據、影像數據轉化為瓦片格式的數據，以提高瀏覽器端三維模型數據的加載速度和顯示效率；再將瓦片數據上傳到服務器，發布為數據服務，通過數據索引獲取相應的模型瓦片數據；用戶使用瀏覽器訪問系統，通過互聯網獲取瓦片數據，基于規劃參數進行規劃數據的編輯，查看數據加載和顯示后出現的規劃效果，實現規劃效果的在線展示，對于不動產管理可通過點擊查詢該模型的屬性以及其關聯屬性等。

1）房屋屬性信息查詢，包括棟屬性信息以及每層每戶的戶屬性信息查詢，用戶通過鼠標點擊棟屬性查詢或分層分戶屬性查詢按鈕，再在模型上點擊想查看的哪一棟或哪一戶的屬性，就會有彈窗顯示該棟或戶的屬性信息，具體效果如圖4所示。

2）可視域分析，可在建筑物上任意點模擬人的視角，查看在該位置哪些區域可以看見，哪些是視野盲區，對于用戶來說可以不用到現場就能大致判斷出人們在此的各個角度的可視域范圍，其具體效果如圖5所示，圖中綠色部分為可視區域，紅色部分為不可視區域。

3）二維、三維聯動分析，通過將二維矢量數據與三維模型數據相關聯，使在轉動三維數據的同時，二維數據也同時發生平時也可以查看它的二維屬性包括平面位置、面積等信息，使用戶可以更加清晰直觀地做出決策。其具體效果如圖6所示。

用戶在瀏覽器端瀏覽桃花島三維不動產管理系統時，直觀所見是已建立好的一個完整場景顯示，包括光照、地形、三維模型、BIM模型以及影像等，隨著用戶的操作，場景也發生改變，所顯示出來的屬性數據也在改變。本課題旨在通過研究傾斜三維模型在Web端加載與顯示，實現在Web端進行模型展示及功能實現進而滿足對不動產進行管理規劃的需求。

4 ?結 ?論

實景三維作為真實、立體、時序化反映人類生產、生活和生態空間的時空信息，是國家重要的新型基礎設施，可以通過“人機兼容、物聯感知、泛在服務”實現數字空間與現實空間的實時關聯互通，為數字中國提供統一的空間定位框架和分析基礎，是數字政府、數字經濟重要的戰略性數據資源和生產要素。本課題旨在創建三維不動產管理平臺，通過三維模型加BIM技術實現不動產管理的立體化、實體化。能夠直觀地看出不動產的實景圖，對于不動產資產的管理與決策有很好的輔助作用。由于人工智能、VR技術的發展，更加直觀的三維展示增強用戶身臨其境的感覺，達到未開發而先感受的效果，將會進一步提高三維模型在不動產管理規劃中的應用。隨著技術的發展，實景三維技術的應用將會越來越廣泛，將實景三維技術與游戲引擎相結合，AR技術、實景導航等應用也將會越來越成熟，本文覺得不久的將來將會是一個三維數據代替二維數據的世界，在三維數據中將會把二維數據中的所有數據給展現出來，且更加直觀方便，當前由于政策的公布，使得全面推進實景三維中國建設成為各級政府部門推廣的主要測繪任務，明確了全面推進實景三維中國建設的目標、任務、要求，因此實景三維模型的應用前景廣闊，是當下的一個主流趨勢。

參考文獻：

[1] 和璇.傾斜攝影在城市規劃管理中的應用研究 [J].測繪與空間地理信息，2022，45（1）：200-202+206.

[2] 蔡周平.基于Cesium的三維智慧社區開發 [J].北京測繪，2020，34（2）：190-193.

[3] 樂世華，張煦，張尚弘，等.基于Cesium的WebGIS流域虛擬場景搭建 [J].水利水電技術，2018，49（5）：90-96.

[4] 曹浩澤.3D Tiles定義解析與生產規范設計 [D].武漢：武漢大學，2018.

[5] 劉培狀，楊秉澍.基于無人機傾斜攝影測量和BIM技術的三維實景模型在水利工程設計中的應用研究 [J].地下水，2019，41（6）：206-207.

[6] 李敏勇.傾斜攝影技術在鄉村景觀規劃設計中的應用 [J].福建商學院學報，2018（5）：87-94.

[7] 柳婷，陳小松，張偉.無人機傾斜攝影輔助BIM+GIS技術在城市軌道交通規劃選線中的應用 [J].測繪通報，2017（S1）：197-200.

[8] 嚴嘉耕，李云飛，馬宏亮.三維傾斜攝影與BIM技術在房建項目中的應用 [J].四川建筑，2022，42（1）：48-50.

作者簡介：于鵬（1987—），男，漢族，四川資陽

人，中級工程師，碩士，主要研究方向：無人機航測、三維建模、點云處理等工作。