分享
查看: 1609|回复: 0

[分享] 地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

[复制链接]

地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

发表于 2020-12-11 17:18:30 来自 分享 阅读模式 倒序浏览
zzv_icon1609 zzr_icon0 查看全部

#三维可视化##3D开发#

  1. 1. WebGL 3D技术框架-ThingJS
  2. 2. 三维管线基础数据收集
  3. 3. 三维管线模型分类创建
  4. 4. 三维管线可视化系统开发

地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

基于ThingJS的通用架构设计随着社会经济的不断发展,城市中的各类地下管线数量不断增加,逐渐构成了结构复杂的地下管网。
传统二维平面管线管理系统,对于地下管线应急事件的处置历来是一个痛点。提高应急处置现场的可视性,更直观地反映地下管网的空间分布情况,三维可视化技术能够很好解决这一问题。近年来,地下管线管理系统逐步由传统C/S架构向B/S架构过渡,现阶段的监控管理对于复杂场景的轻量化展示是一个主要趋势。

WebGL 3D框架-ThingJS

WebGL是基于OpenGL(开放图形库)协议在Web浏览器中进行3D渲染的API,是一个基于纯B/S架构开发的技术。ThingJS是基于WebGL的3D框架,【官方注册地址】用于制作基于场景的轻量化三维可视化对象;将地下管线场景在Web环境中进行重构渲染、着色化,通过ThingJS技术引擎开发三维动画和交互功能,实现了地下管线的漫游及模型的交互控制。
本文梳理了ThingJS的地下管线可视化应用构建方法,简单说明这一实现过程。
三维管线可视化工作主要分为基础数据收集、三维模型建立和三维管线系统建设三大部分。

1. 三维管线基础数据收集

三维建模基础数据主要包括矢量数据、影像数据及管线数据等相关数据。
1) 矢量数据:主要使用地形图及局部修测的带状地形图,确定各自的比例。
2) 影像数据:采用了彩色卫星影像图,选择最近的更新版本,其分辨率为0.8m。
3) 管线数据:管线图及管线信息调查表。
本项目将城市地下管线分为给水、排水、燃气、热力、工业、电力和电信管线7大类。各大类还可以细分,如给水管线包括工业给水、生活给水和消防给水管线;排水管线包括污水和雨水管线。管线的基本几何数据可归纳为管线端点、结合点、变径点与附属设施特征点,此后统称为管点数据。
管线形状多为树枝状、环状或辐射状,每一条管线可以根据交叉点和变径点分解成若干条管线段,交叉点处模拟现实情况,以三通、四通、阀门或变径接头等附属设施相连接。管线段由相应管点数据连接,组成一条不间断的管线段。因此,每一条管线可以抽象为由管线段和附属设施组成。

地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

2. 三维管线模型分类创建

结合具体城市地形,我们将三维模型分为地形模型、道路模型和管线模型三大类。
1) 地形模型
地形模型主要是指表示地表起伏形态的三维模型。通过3DSMAX可以构建不规则三角格网(TIN),并将等高线生成三维模型,最后与一一对应的正射影像数据叠加生成分块的地形模型。注意将三维模型细分成若干块,可以应对后期制作范围不断扩大、数据不断更新的问题。
2) 道路模型
道路模型是指制作区域内所有等级公路及主次干道的模型。由于最终要将道路模型与管线模型进行叠加故对道路模型的精度要求较高。先按属性码筛选出等级公路及主次干道,并对同一道路进行封闭面处理,然后将数据导入CityBuilder直接进行转为面的操作,形成道路面的平面模型;再利用高程点对平面模型进行高度控制,形成道路的三维模型。
3) 管线模型
3DSMAX中导入相应的管线DWG文件利用管道建模命令直接生成带管径的各类管线模型,最后按各类管线颜色要求创建的贴图,分别赋予不同类型的管线模型;而对于管点模型由于重覆度较高,且每一个独立的模型面数较多,我们采用了利用数据库的建模方法,这样既减少了数据量,又在很大程度上提高了工作效率。
本项目建立了地下管线数据库,设计了管点、管段、官网层等数据结构。

地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

3. 三维管线可视化开发案例

基于B/S架构设计地下管线三维管理系统,利用ThingJS搭建浏览器端的三维场景,在场景中加载三维管线模型,搭建渲染管线模型、地形模型、双向选择、鼠标拾取等基础功能;同时实现了用户的交互操作,包括模型加载、管线编辑、管线的查询与分析、管线定位等交互功能。技术路线图如下:

地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

现在还原一个小区水,电,天然气管线可视化,【官方注册地址】,在线查看demo:

3D演示 - 三维地下管线的可视化应用 ThingJSwww.thingjs.com
地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS

第一步,利用
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t