一种基于WebGIS的实景三维模型分割方法与系统

一种基于webgis的实景三维模型分割方法与系统
技术领域
1.本发明涉及三维实景重建技术领域，更具体地说，本发明涉及一种基于webgis的实景三维模型分割方法与系统。


背景技术：

2.three.js是一款运行在浏览器中的3d引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的api以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
3.webgl(全写webgraphicslibrary)是一种3d绘图协议，这种绘图技术标准允许把javascript和opengles2.0结合在一起，通过增加opengles2.0的一个javascript绑定，webgl可以为html5canvas提供硬件3d加速渲染，这样web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3d场景和模型了，还能创建复杂的导航和数据视觉化。显然，webgl技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3d结构的网站页面，甚至可以用来设计3d网页游戏等等。
4.目前业界缺少一款基于浏览器端的可交互的实景三维模型分割系统，传统实景三维模型分割系统依托于桌面端，并且切割模型的适用范围小，使用难度大，并且对于实景三维模型较难处理。正需要这样一款实景三维模型分割系统满足工业生产的需要。


技术实现要素：

5.为了克服现有技术的上述缺陷，本发明的实施例提供一种基于webgis的实景三维模型分割方法与系统，以解决上述背景技术中提出的问题。
6.为实现上述目的，本发明提供如下技术方案：一种基于webgis的实景三维模型分割系统，包括对象模型数据库、web服务器和web前端，其中，对象模型数据库用于将待处理的倾斜摄影模型数据保存在后端数据库中，web服务器用于基于node.js的koa框架接收来自web前端的请求，并根据axios请求模型信息向对象模型数据库请求模型数据，web前端用于接收用户的交互请求，并通过鼠标操作进行模型分割操作，包括点击、拖动等方式，并记录下用户的操作，生成目标模型切割轮廓文件，并将数据发送给web服务器。
7.在一个优选的实施方式中，所述对象模型数据库，对象模型数据库用于将三维实景模型存储在后端数据库中，并使用mysql数据库保存模型的位置、大小信息和id信息，支持fbx、obj、gltf、glb和3dtiles等多种常见的通用模型格式，并支持对osgb格式模型的格式转化；
8.对象模型数据库中，模型层使用瓦片格式的3dtiles格式文件组成，用于定义信息以及信息的可视化，包括用于建立实验cesium对象基本形式的模型文件，模型json文档格式如下：其中保存为json格式的模型可以使用把模型保存成json字符串只需要.tojson()方法即可，然后在通过json.stringify()方法将json对象转换成json字符串，然后通过
localstorge.setitem()方法将json字符串保存在本地存储中，"metadata"字段包含了模型的版本信息和类型信息，以及其他可选的信息，"geometries"字段包含了模型的几何形状信息，包括模型中使用的点、线、面和体的信息，"materials"字段包含了模型的材质信息，包括模型中使用的纹理、颜色、光照和其他材质信息，"object"字段包含了模型的子物属性信息。
9.在一个优选的实施方式中，所述web服务器，采用基于node.js的koa框架进行开发，包括控制层、业务逻辑层、数据持久层，其中，数据持久层负责与数据库进行连接并获取模型相关的数据，业务逻辑层封装了数据持久层，将数据库中的模型属性信息获取的操作封装成接口供控制层使用，控制层则负责处理来自web前端的请求，并调用业务逻辑层的接口进行处理。
10.在一个优选的实施方式中，所述web前端，包括用户交互界面模块，负责接收用户的交互操作，包括点击、拖动等方式进行模型分割操作，并通过协议和技术与web服务器进行通讯连接，webgis可视化模块，负责将分割后的模型渲染到画布上，使用cesium.js技术，封装函数，实现三维实景模型的分割、人与场景交互、语义标签绑定、模型交互等功能；
11.webgis可视化模块中，首先使用cesium3dtiledatasource类加载3dtiles格式的模型文档，进一步的，web前端中模型分割模块，模型点击事件，在模型分割操作页面中，使用鼠标左键点击屏幕位置，获取到屏幕中点击点的屏幕坐标信息，屏幕坐标转化为经纬度坐标系，其公式为：
12.经度＝(屏幕x坐标-屏幕中心x坐标)*地图宽度/屏幕宽度+地图中心经度
13.纬度＝(屏幕y坐标-屏幕中心y坐标)*地图高度/屏幕高度+地图中心纬度
14.屏幕坐标系的原点在屏幕的左上角，而经纬度坐标系的原点在地图的中心，假设屏幕中心坐标为(x0,y0)，屏幕宽度和高度分别为w和h，地图宽度和高度分别为w和h，地图中心经纬度分别为(lon0,lat0)，那么，屏幕上的某个点(x,y)对应的经纬度，将屏幕坐标转化为经纬度坐标，需要使用地球椭球体模型，假设有一个屏幕坐标点(x,y)，它对应的经纬度坐标点(longitude,latitude)，以及视点(eye)所在的空间位置(ex,ey,ez)，那么可以使用如下公式将屏幕坐标转化为经纬度坐标：
15.longitude＝atan2(x-ex,ey)latitude＝asin((ez-y)/sqrt((x-ex)^2+(ey)^2+(ez-y)^2))
16.其中atan2是反正切函数，asin是反正弦函数，sqrt是平方根函数；
17.当选中模型后，可以得到点击点的三维坐标信息，通过多次点击得到地物的轮廓信息，轮廓数据采用json格式存储，其具体的存储数据结构如下：
18.(1)type：轮廓数据的类型，可以是点、线、面等；
19.(2)coordinates：轮廓数据的坐标信息，具体格式取决于type字段的值。例如，对于点类型的轮廓数据，coordinates字段可以是单个点坐标(例如[longitude,latitude])；对于线类型的轮廓数据，coordinates字段可以是一组点的坐标数组(例如[[longitude1,latitude1],[longitude2,latitude2],...])；对于面类型的轮廓数据，coordinates字段可以是一个线的数组(例如[[longitude1,latitude1],[longitude2,latitude2]])；
[0020]
(3)高程信息：包含轮廓线所在位置的高程信息；
[0021]
(4)轮廓线类型：包含轮廓线的类型(如边界线、楼层分界线等)；
[0022]
(5)其他属性：包含轮廓线的其他属性信息(如线的颜色、线的粗细等)；
[0023]
三维模型分割模块中，通过对轮廓信息和实景三维顶点数据的筛选操作，获取到分割后的三维模型，并且输入地物的语义信息通过语义信息和轮廓信息的绑定，通过用户点击操作可以和分割后的三维实景模型进行交互，并获取其详细信息。
[0024]
一种基于webgis的实景三维模型分割方法，包括上述任意一项所述的一种基于webgis的实景三维模型分割系统，所述基于webgis的实景三维模型分割方法具体步骤如下：
[0025]
步骤一：准备数据：首先，准备三维实景模型数据，包括三维地图、模型属性信息等，将这些数据存储在数据库中；
[0026]
步骤二：配置webgis服务器：接着，使用node.js的koa框架配置webgis服务器，包括数据库连接层、业务逻辑层和控制层；
[0027]
步骤三：编写前端界面：然后，使用html、css和javascript等技术编写前端界面，包括ui接口模块、axios模块和三维可视化模块；
[0028]
步骤四：使用cesium，创建场景，灯光，实现对三维实景模型的渲染，构建虚拟相机，虚拟相机按照用户操作可以自由移动，在模型分割操作页面下，实现鼠标左键点击模型获取模型三维点击位置信息，构建模型轮廓数据文件，存储模型轮廓数据，模型交互页面中，用户通过点击操作，和模型进行交互，查看分割模型的详细信息，位置信息等；
[0029]
步骤五：数据库准备就绪后，录入实景三维模型数据，基于webgis的实景三维模型分割系统开始部署工作。
[0030]
本发明的技术效果和优点：
[0031]
本发明设计了一款基于webgis的实景三维模型分割方法与系统，三维模型分割无需依托于桌面端，切割模型的适用范围大，使用难度低，并且对于实景三维模型较好处理。
附图说明
[0032]
图1为本发明的整体架构图。
[0033]
图2为本发明的web前端架构图。
具体实施方式
[0034]
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0035]
如附图1和附图2所示，本发明提供了一种基于webgis的实景三维模型分割系统，包括对象模型数据库、web服务器和web前端，其中，对象模型数据库用于将待处理的倾斜摄影模型数据保存在后端数据库中，web服务器用于基于node.js的koa框架接收来自web前端的请求，并根据axios请求模型信息向对象模型数据库请求模型数据，web前端用于接收用户的交互请求，并通过鼠标操作进行模型分割操作，包括点击、拖动等方式，并记录下用户的操作，生成目标模型切割轮廓文件，并将数据发送给web服务器。
[0036]
在一个优选的实施方式中，所述对象模型数据库，对象模型数据库用于将三维实
景模型存储在后端数据库中，并使用mysql数据库保存模型的位置、大小信息和id信息，支持fbx、obj、gltf、glb和3dtiles等多种常见的通用模型格式，并支持对osgb格式模型的格式转化；
[0037]
对象模型数据库中，模型层使用瓦片格式的3dtiles格式文件组成，用于定义信息以及信息的可视化，包括用于建立实验cesium对象基本形式的模型文件，模型json文档格式如下：其中保存为json格式的模型可以使用把模型保存成json字符串只需要.tojson()方法即可，然后在通过json.stringify()方法将json对象转换成json字符串，然后通过localstorge.setitem()方法将json字符串保存在本地存储中，"metadata"字段包含了模型的版本信息和类型信息，以及其他可选的信息，"geometries"字段包含了模型的几何形状信息，包括模型中使用的点、线、面和体的信息，"materials"字段包含了模型的材质信息，包括模型中使用的纹理、颜色、光照和其他材质信息，"object"字段包含了模型的子物属性信息。
[0038]
在一个优选的实施方式中，所述web服务器，采用基于node.js的koa框架进行开发，包括控制层、业务逻辑层、数据持久层，其中，数据持久层负责与数据库进行连接并获取模型相关的数据，业务逻辑层封装了数据持久层，将数据库中的模型属性信息获取的操作封装成接口供控制层使用，控制层则负责处理来自web前端的请求，并调用业务逻辑层的接口进行处理。
[0039]
在一个优选的实施方式中，所述web前端，包括用户交互界面模块，负责接收用户的交互操作，包括点击、拖动等方式进行模型分割操作，并通过协议和技术与web服务器进行通讯连接，webgis可视化模块，负责将分割后的模型渲染到画布上，使用cesium.js技术，封装函数，实现三维实景模型的分割、人与场景交互、语义标签绑定、模型交互等功能；
[0040]
webgis可视化模块中，首先使用cesium3dtiledatasource类加载3dtiles格式的模型文档，进一步的，web前端中模型分割模块，模型点击事件，在模型分割操作页面中，使用鼠标左键点击屏幕位置，获取到屏幕中点击点的屏幕坐标信息，屏幕坐标转化为经纬度坐标系，其公式为：
[0041]
经度＝(屏幕x坐标-屏幕中心x坐标)*地图宽度/屏幕宽度+地图中心经度
[0042]
纬度＝(屏幕y坐标-屏幕中心y坐标)*地图高度/屏幕高度+地图中心纬度
[0043]
屏幕坐标系的原点在屏幕的左上角，而经纬度坐标系的原点在地图的中心，假设屏幕中心坐标为(x0,y0)，屏幕宽度和高度分别为w和h，地图宽度和高度分别为w和h，地图中心经纬度分别为(lon0,lat0)，那么，屏幕上的某个点(x,y)对应的经纬度，将屏幕坐标转化为经纬度坐标，需要使用地球椭球体模型，假设有一个屏幕坐标点(x,y)，它对应的经纬度坐标点(longitude,latitude)，以及视点(eye)所在的空间位置(ex,ey,ez)，那么可以使用如下公式将屏幕坐标转化为经纬度坐标：
[0044]
longitude＝atan2(x-ex,ey)latitude＝asin((ez-y)/sqrt((x-ex)^2+(ey)^2+(ez-y)^2))
[0045]
其中atan2是反正切函数，asin是反正弦函数，sqrt是平方根函数；
[0046]
当选中模型后，可以得到点击点的三维坐标信息，通过多次点击得到地物的轮廓信息，轮廓数据采用json格式存储，其具体的存储数据结构如下：
[0047]
(1)type：轮廓数据的类型，可以是点、线、面等；
[0048]
(2)coordinates：轮廓数据的坐标信息，具体格式取决于type字段的值。例如，对于点类型的轮廓数据，coordinates字段可以是单个点坐标(例如[longitude,latitude])；对于线类型的轮廓数据，coordinates字段可以是一组点的坐标数组(例如[[longitude1,latitude1],[longitude2,latitude2],...])；对于面类型的轮廓数据，coordinates字段可以是一个线的数组(例如[[longitude1,latitude1],[longitude2,latitude2]])；
[0049]
(3)高程信息：包含轮廓线所在位置的高程信息；
[0050]
(4)轮廓线类型：包含轮廓线的类型(如边界线、楼层分界线等)；
[0051]
(5)其他属性：包含轮廓线的其他属性信息(如线的颜色、线的粗细等)；
[0052]
三维模型分割模块中，通过对轮廓信息和实景三维顶点数据的筛选操作，获取到分割后的三维模型，并且输入地物的语义信息通过语义信息和轮廓信息的绑定，通过用户点击操作可以和分割后的三维实景模型进行交互，并获取其详细信息。
[0053]
一种基于webgis的实景三维模型分割方法，包括上述任意一项所述的一种基于webgis的实景三维模型分割系统，所述基于webgis的实景三维模型分割方法具体步骤如下：
[0054]
步骤一：准备数据：首先，准备三维实景模型数据，包括三维地图、模型属性信息等，将这些数据存储在数据库中；
[0055]
步骤二：配置webgis服务器：接着，使用node.js的koa框架配置webgis服务器，包括数据库连接层、业务逻辑层和控制层；
[0056]
步骤三：编写前端界面：然后，使用html、css和javascript等技术编写前端界面，包括ui接口模块、axios模块和三维可视化模块；
[0057]
步骤四：使用cesium，创建场景，灯光，实现对三维实景模型的渲染，构建虚拟相机，虚拟相机按照用户操作可以自由移动，在模型分割操作页面下，实现鼠标左键点击模型获取模型三维点击位置信息，构建模型轮廓数据文件，存储模型轮廓数据，模型交互页面中，用户通过点击操作，和模型进行交互，查看分割模型的详细信息，位置信息等；
[0058]
步骤五：数据库准备就绪后，录入实景三维模型数据，基于webgis的实景三维模型分割系统开始部署工作。
[0059]
实施方式具体为：首先，准备三维实景模型数据，包括三维地图、模型属性信息等，将这些数据存储在数据库中，接着，使用node.js的koa框架配置webgis服务器，包括数据库连接层、业务逻辑层和控制层，然后，使用html、css和javascript等技术编写前端界面，包括ui接口模块、axios模块和三维可视化模块，使用cesium，创建场景，灯光，实现对三维实景模型的渲染，构建虚拟相机，虚拟相机按照用户操作可以自由移动，在模型分割操作页面下，实现鼠标左键点击模型获取模型三维点击位置信息，构建模型轮廓数据文件，存储模型轮廓数据，模型交互页面中，用户通过点击操作，和模型进行交互，查看分割模型的详细信息，位置信息等，数据库准备就绪后，录入实景三维模型数据，基于webgis的实景三维模型分割系统开始部署工作。
[0060]
本发明工作原理：
[0061]
参照说明书附图1和附图2，本发明设计了一款基于webgis的实景三维模型分割方法与系统，三维模型分割无需依托于桌面端，切割模型的适用范围大，使用难度低，并且对于实景三维模型较好处理。
[0062]
最后应说明的几点是：首先，在本技术的描述中，需要说明的是，除非另有规定和限定，术语“安装”、“相连”、“连接”应做广义理解，可以是机械连接或电连接，也可以是两个元件内部的连通，可以是直接相连，“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变，则相对位置关系可能发生改变；
[0063]
其次：本发明公开实施例附图中，只涉及到与本公开实施例涉及到的结构，其他结构可参考通常设计，在不冲突情况下，本发明同一实施例及不同实施例可以相互组合；
[0064]
最后：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种基于webgis的实景三维模型分割系统，其特征在于，包括对象模型数据库、web服务器和web前端，其中，对象模型数据库用于将待处理的倾斜摄影模型数据保存在后端数据库中，web服务器用于基于node.js的koa框架接收来自web前端的请求，并根据axios请求模型信息向对象模型数据库请求模型数据，web前端用于接收用户的交互请求，并通过鼠标操作进行模型分割操作，包括点击、拖动等方式，并记录下用户的操作，生成目标模型切割轮廓文件，并将数据发送给web服务器。2.根据权利要求1所述的一种基于webgis的实景三维模型分割系统，其特征在于：所述对象模型数据库，对象模型数据库用于将三维实景模型存储在后端数据库中，并使用mysql数据库保存模型的位置、大小信息和id信息，支持fbx、obj、gltf、glb和3dtiles等多种常见的通用模型格式，并支持对osgb格式模型的格式转化；对象模型数据库中，模型层使用瓦片格式的3dtiles格式文件组成，用于定义信息以及信息的可视化，包括用于建立实验cesium对象基本形式的模型文件，模型json文档格式如下：其中保存为json格式的模型可以使用把模型保存成json字符串只需要.tojson()方法即可，然后在通过json.stringify()方法将json对象转换成json字符串，然后通过localstorge.setitem()方法将json字符串保存在本地存储中，"metadata"字段包含了模型的版本信息和类型信息，以及其他可选的信息，"geometries"字段包含了模型的几何形状信息，包括模型中使用的点、线、面和体的信息，"materials"字段包含了模型的材质信息，包括模型中使用的纹理、颜色、光照和其他材质信息，"object"字段包含了模型的子物属性信息。3.根据权利要求1所述的一种基于webgis的实景三维模型分割系统，其特征在于：所述web服务器，采用基于node.js的koa框架进行开发，包括控制层、业务逻辑层、数据持久层，其中，数据持久层负责与数据库进行连接并获取模型相关的数据，业务逻辑层封装了数据持久层，将数据库中的模型属性信息获取的操作封装成接口供控制层使用，控制层则负责处理来自web前端的请求，并调用业务逻辑层的接口进行处理。4.根据权利要求1所述的一种基于webgis的实景三维模型分割系统，其特征在于：所述web前端，包括用户交互界面模块，负责接收用户的交互操作，包括点击、拖动等方式进行模型分割操作，并通过协议和技术与web服务器进行通讯连接，webgis可视化模块，负责将分割后的模型渲染到画布上，使用cesium.js技术，封装函数，实现三维实景模型的分割、人与场景交互、语义标签绑定、模型交互等功能；webgis可视化模块中，首先使用cesium3dtiledatasource类加载3dtiles格式的模型文档，进一步的，web前端中模型分割模块，模型点击事件，在模型分割操作页面中，使用鼠标左键点击屏幕位置，获取到屏幕中点击点的屏幕坐标信息，屏幕坐标转化为经纬度坐标系，其公式为：经度＝(屏幕x坐标-屏幕中心x坐标)*地图宽度/屏幕宽度+地图中心经度纬度＝(屏幕y坐标-屏幕中心y坐标)*地图高度/屏幕高度+地图中心纬度屏幕坐标系的原点在屏幕的左上角，而经纬度坐标系的原点在地图的中心，假设屏幕中心坐标为(x0,y0)，屏幕宽度和高度分别为w和h，地图宽度和高度分别为w和h，地图中心经纬度分别为(lon0,lat0)，那么，屏幕上的某个点(x,y)对应的经纬度，将屏幕坐标转化为经纬度坐标，需要使用地球椭球体模型，假设有一个屏幕坐标点(x,y)，它对应的经纬度坐
标点(longitude,latitude)，以及视点(eye)所在的空间位置(ex,ey,ez)，那么可以使用如下公式将屏幕坐标转化为经纬度坐标：longitude＝atan2(x-ex,ey)latitude＝asin((ez-y)/sqrt((x-ex)^2+(ey)^2+(ez-y)^2))其中atan2是反正切函数，asin是反正弦函数，sqrt是平方根函数；当选中模型后，可以得到点击点的三维坐标信息，通过多次点击得到地物的轮廓信息，轮廓数据采用json格式存储，其具体的存储数据结构如下：(1)type：轮廓数据的类型，可以是点、线、面等；(2)coordinates：轮廓数据的坐标信息，具体格式取决于type字段的值。例如，对于点类型的轮廓数据，coordinates字段可以是单个点坐标(例如[longitude,latitude])；对于线类型的轮廓数据，coordinates字段可以是一组点的坐标数组(例如[[longitude1,latitude1],[longitude2,latitude2],...])；对于面类型的轮廓数据，coordinates字段可以是一个线的数组(例如[[longitude1,latitude1],[longitude2,latitude2]])；(3)高程信息：包含轮廓线所在位置的高程信息；(4)轮廓线类型：包含轮廓线的类型(如边界线、楼层分界线等)；(5)其他属性：包含轮廓线的其他属性信息(如线的颜色、线的粗细等)；三维模型分割模块中，通过对轮廓信息和实景三维顶点数据的筛选操作，获取到分割后的三维模型，并且输入地物的语义信息通过语义信息和轮廓信息的绑定，通过用户点击操作可以和分割后的三维实景模型进行交互，并获取其详细信息。5.一种基于webgis的实景三维模型分割方法，其特征在于，包括权利要求1-4任意一项所述的一种基于webgis的实景三维模型分割系统，所述基于webgis的实景三维模型分割方法具体步骤如下：步骤一：准备数据：首先，准备三维实景模型数据，包括三维地图、模型属性信息等，将这些数据存储在数据库中；步骤二：配置webgis服务器：接着，使用node.js的koa框架配置webgis服务器，包括数据库连接层、业务逻辑层和控制层；步骤三：编写前端界面：然后，使用html、css和javascript等技术编写前端界面，包括ui接口模块、axios模块和三维可视化模块；步骤四：使用cesium，创建场景，灯光，实现对三维实景模型的渲染，构建虚拟相机，虚拟相机按照用户操作可以自由移动，在模型分割操作页面下，实现鼠标左键点击模型获取模型三维点击位置信息，构建模型轮廓数据文件，存储模型轮廓数据，模型交互页面中，用户通过点击操作，和模型进行交互，查看分割模型的详细信息，位置信息等；步骤五：数据库准备就绪后，录入实景三维模型数据，基于webgis的实景三维模型分割系统开始部署工作。

技术总结
本发明公开了一种基于WebGIS的实景三维模型分割方法与系统，具体涉及三维实景重建技术领域，包括对象模型数据库、web服务器和web前端，其中，对象模型数据库用于将待处理的倾斜摄影模型数据保存在后端数据库中，web服务器用于基于Node.js的koa框架接收来自web前端的请求，并根据axios请求模型信息向对象模型数据库请求模型数据，web前端用于接收用户的交互请求，并通过鼠标操作进行模型分割操作，包括点击、拖动等方式，并记录下用户的操作，生成目标模型切割轮廓文件，并将数据发送给web服务器。本发明进行三维模型分割无需依托于桌面端，切割模型的适用范围大，使用难度低，并且对于实景三维模型较好处理。对于实景三维模型较好处理。对于实景三维模型较好处理。


技术研发人员：王建东 李明霖 李昌令 张志为 李涛 赵双睿 董学文
受保护的技术使用者：西安电子科技大学青岛计算技术研究院
技术研发日：2023.06.15
技术公布日：2023/8/31