基于VUE 3與WebGL的三維不動(dòng)產(chǎn)管理平臺(tái)的搭建

摘 ?要：針對(duì)傳統(tǒng)不動(dòng)產(chǎn)管理平臺(tái)以文字形式描述不動(dòng)產(chǎn)以及周邊環(huán)境信息，而文字描述存在抽象、不具體等問(wèn)題，構(gòu)建一個(gè)直觀、可視、地理位置精確的不動(dòng)產(chǎn)管理平臺(tái)。采用BIM技術(shù)及傾斜攝影技術(shù)創(chuàng)建實(shí)景模型數(shù)據(jù)，通過(guò)VUE 3.0前端庫(kù)進(jìn)行頁(yè)面設(shè)計(jì)，利用WebGL技術(shù)進(jìn)行功能開發(fā)，建立不動(dòng)產(chǎn)區(qū)的實(shí)景三維模型。該模型可以實(shí)現(xiàn)屬性查詢、可視域分析、二三維疊加聯(lián)動(dòng)分析等功能，輔助管理者進(jìn)行決策。

關(guān)鍵詞：傾斜攝影；WebGL技術(shù)；VUE 3.0；BIM

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

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

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

1 ?BIM在不動(dòng)產(chǎn)管理方面的應(yīng)用

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

2 ?VUE 3.0介紹

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

3 ?三維不動(dòng)產(chǎn)管理平臺(tái)搭建

3.1 ?系統(tǒng)架構(gòu)

要想實(shí)現(xiàn)模型的測(cè)量、光照分析、可視域分析以及屬性查詢等功能，就需要在模型的基礎(chǔ)上進(jìn)行二次開發(fā)，本文中的桃花島三維可視化管理基礎(chǔ)平臺(tái)基于B/S架構(gòu)實(shí)現(xiàn)，系統(tǒng)架構(gòu)如圖1所示，服務(wù)端包括應(yīng)用服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器、三維模型瓦片數(shù)據(jù)服務(wù)器、高程瓦片數(shù)據(jù)服務(wù)器、影像瓦片數(shù)據(jù)服務(wù)器，通過(guò)服務(wù)代理將客戶端的請(qǐng)求轉(zhuǎn)發(fā)到對(duì)應(yīng)的服務(wù)器上，界面端使用VUE 3.0進(jìn)行頁(yè)面設(shè)計(jì)，包括登錄頁(yè)面、操作頁(yè)面等。用戶使用支持WebGL的瀏覽器訪問(wèn)系統(tǒng)，通過(guò)互聯(lián)網(wǎng)請(qǐng)求系統(tǒng)數(shù)據(jù)，可進(jìn)行用戶管理、規(guī)劃編輯、規(guī)劃展示、戶型管理、信息查詢、可視域分析和量測(cè)分析等操作。

3.2 ?技術(shù)選擇

本系統(tǒng)前端使用Cesium作為三維場(chǎng)景可視化引擎，使用VUE 3.0界面庫(kù)用作頁(yè)面設(shè)計(jì)。系統(tǒng)后端使用SuperMap iDesktop作為模型Web端服務(wù)發(fā)布，應(yīng)用系統(tǒng)運(yùn)行在Node.js環(huán)境下，supermap-iserver作為代理服務(wù)和瓦片數(shù)據(jù)服務(wù)，數(shù)據(jù)庫(kù)使用MongoDB。

3.3 ?關(guān)鍵問(wèn)題研究

3.3.1 ?模型數(shù)據(jù)生產(chǎn)

為了在瀏覽器中高效加載和展示構(gòu)建好的房屋三維模型，將房屋三維模型簡(jiǎn)化處理后轉(zhuǎn)換為S3MB格式并進(jìn)行發(fā)布。具體處理步驟為：

1）BIM模型構(gòu)建，將模型導(dǎo)入到sketchup中，利用該軟件生產(chǎn)出建筑物的BIM模型；在sketchup中將建好的BIM模型導(dǎo)出為obj格式的數(shù)據(jù)。

2）用Photoshop對(duì)導(dǎo)出的紋理貼圖進(jìn)行壓縮，以減小模型數(shù)據(jù)量，提高模型加載的效率；將用Photoshop壓縮的數(shù)據(jù)導(dǎo)入到SuperMap iDesktop中，利用其自帶的轉(zhuǎn)換工具將obj格式的模型轉(zhuǎn)換為S3MB格式，并進(jìn)行發(fā)布。

3）利用supermap-iserver對(duì)模型進(jìn)行管理。

3.3.2 ?二維矢量數(shù)據(jù)屬性掛接

通過(guò)對(duì)不動(dòng)產(chǎn)相關(guān)數(shù)據(jù)的收集處理后，將收集整理好的資料制作成Excel表格；通過(guò)Cass-3D軟件將不動(dòng)產(chǎn)進(jìn)行二維矢量化，將二維矢量數(shù)據(jù)導(dǎo)入到SuperMap iDesktop軟件中并將Excel的屬性信息掛接到矢量數(shù)據(jù)中去，這樣就實(shí)現(xiàn)了將房屋屬性信息與二維矢量化的掛接。

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

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

3.3.4 ?功能開發(fā)

針對(duì)業(yè)主方其他的需求，實(shí)現(xiàn)桃花島不動(dòng)產(chǎn)管理平臺(tái)的功能包括：可視域分析、信息查詢、二維、三維聯(lián)動(dòng)分析、專題圖表達(dá)、天跡線分析等功能設(shè)計(jì)。從而達(dá)到更好的管理桃花島不動(dòng)產(chǎn)以及用于輔助規(guī)劃設(shè)計(jì)的效果。利用Java Script語(yǔ)言來(lái)實(shí)現(xiàn)功能的二次開發(fā)，代碼編輯器選用vscode。

3.4 ?系統(tǒng)簡(jiǎn)介

基于實(shí)景三維模型的不動(dòng)產(chǎn)三維管理平臺(tái)設(shè)計(jì)，利用VUE 3.0與WebGL技術(shù)將實(shí)景三維模型數(shù)據(jù)與BIM模型進(jìn)行結(jié)合，使用開源技術(shù)手段二次開發(fā)出實(shí)景三維模型不動(dòng)產(chǎn)管理平臺(tái)，實(shí)現(xiàn)對(duì)綿陽(yáng)桃花島不動(dòng)產(chǎn)在線展示管理平臺(tái)的開發(fā)，滿足其規(guī)劃設(shè)計(jì)以及管理等方面的需求。其部署上線后系統(tǒng)的登錄頁(yè)如圖2所示。

3.5 ?系統(tǒng)功能

系統(tǒng)以綿陽(yáng)市桃花島數(shù)據(jù)為例，采用B/S架構(gòu)設(shè)計(jì)的桃花島三維可視化管理基礎(chǔ)平臺(tái)，它的計(jì)算處理流程如圖3所示。首先通過(guò)格式轉(zhuǎn)換將采集處理后的模型數(shù)據(jù)、地形數(shù)據(jù)、影像數(shù)據(jù)轉(zhuǎn)化為瓦片格式的數(shù)據(jù)，以提高瀏覽器端三維模型數(shù)據(jù)的加載速度和顯示效率；再將瓦片數(shù)據(jù)上傳到服務(wù)器，發(fā)布為數(shù)據(jù)服務(wù)，通過(guò)數(shù)據(jù)索引獲取相應(yīng)的模型瓦片數(shù)據(jù)；用戶使用瀏覽器訪問(wèn)系統(tǒng)，通過(guò)互聯(lián)網(wǎng)獲取瓦片數(shù)據(jù)，基于規(guī)劃參數(shù)進(jìn)行規(guī)劃數(shù)據(jù)的編輯，查看數(shù)據(jù)加載和顯示后出現(xiàn)的規(guī)劃效果，實(shí)現(xiàn)規(guī)劃效果的在線展示，對(duì)于不動(dòng)產(chǎn)管理可通過(guò)點(diǎn)擊查詢?cè)撃Ｐ偷膶傩砸约捌潢P(guān)聯(lián)屬性等。

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

2）可視域分析，可在建筑物上任意點(diǎn)模擬人的視角，查看在該位置哪些區(qū)域可以看見，哪些是視野盲區(qū)，對(duì)于用戶來(lái)說(shuō)可以不用到現(xiàn)場(chǎng)就能大致判斷出人們?cè)诖说母鱾€(gè)角度的可視域范圍，其具體效果如圖5所示，圖中綠色部分為可視區(qū)域，紅色部分為不可視區(qū)域。

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

用戶在瀏覽器端瀏覽桃花島三維不動(dòng)產(chǎn)管理系統(tǒng)時(shí)，直觀所見是已建立好的一個(gè)完整場(chǎng)景顯示，包括光照、地形、三維模型、BIM模型以及影像等，隨著用戶的操作，場(chǎng)景也發(fā)生改變，所顯示出來(lái)的屬性數(shù)據(jù)也在改變。本課題旨在通過(guò)研究?jī)A斜三維模型在Web端加載與顯示，實(shí)現(xiàn)在Web端進(jìn)行模型展示及功能實(shí)現(xiàn)進(jìn)而滿足對(duì)不動(dòng)產(chǎn)進(jìn)行管理規(guī)劃的需求。

4 ?結(jié) ?論

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

參考文獻(xiàn)：

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

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

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

[4] 曹浩澤.3D Tiles定義解析與生產(chǎn)規(guī)范設(shè)計(jì) [D].武漢：武漢大學(xué)，2018.

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

[6] 李敏勇.傾斜攝影技術(shù)在鄉(xiāng)村景觀規(guī)劃設(shè)計(jì)中的應(yīng)用 [J].福建商學(xué)院學(xué)報(bào)，2018（5）：87-94.

[7] 柳婷，陳小松，張偉.無(wú)人機(jī)傾斜攝影輔助BIM+GIS技術(shù)在城市軌道交通規(guī)劃選線中的應(yīng)用 [J].測(cè)繪通報(bào)，2017（S1）：197-200.

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

作者簡(jiǎn)介：于鵬（1987—），男，漢族，四川資陽(yáng)

人，中級(jí)工程師，碩士，主要研究方向：無(wú)人機(jī)航測(cè)、三維建模、點(diǎn)云處理等工作。