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

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

中圖分類號：TP393 ? 文獻標(biāo)識碼：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 ?引 ?言

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

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

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

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

2 ?VUE 3.0介紹

VUE是用于構(gòu)建瀏覽器用戶界面的框架技術(shù)手段。與其他界面框架設(shè)計手段不同的是，VUE采用自底向上的方法進行開發(fā)設(shè)計。VUE易于學(xué)習(xí)且他的核心庫只關(guān)注于視圖層，界面效果簡潔美觀，與其他庫的結(jié)合也是很方便，便于項目的整合。VUE 3.0在VUE 2.0的基礎(chǔ)上進行了升級，其中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)于一個生命周期函數(shù)，VUE中過去的data、methods、watch等全部都用對應(yīng)的新增API寫在setup（）函數(shù)中；VUE 3.0的Template支持多個根標(biāo)簽，而VUE 2.0不支持；VUE 3.0可以分開渲染父組件與子組件而VUE 2.0必須同時渲染父組件與子組件。因此VUE 3.0提高了VUE2的使用效率，相對于VUE 2.0來說VUE 3.0運行效率更快，體積更小，對于維護上來說也更容易維護，對其他API也更加友好且使用方便。

3 ?三維不動產(chǎn)管理平臺搭建

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

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

3.2 ?技術(shù)選擇

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

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

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

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

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

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

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

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

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

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

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

3.3.4 ?功能開發(fā)

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

3.4 ?系統(tǒng)簡介

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

3.5 ?系統(tǒng)功能

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

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

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

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

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

4 ?結(jié) ?論

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

參考文獻：

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

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

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

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

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

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

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

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

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

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