基于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—），男，汉族，四川资阳

人，中级工程师，硕士，主要研究方向：无人机航测、三维建模、点云处理等工作。