请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 321|回复: 0

[分享] 基于WebGL的三维数据可视化大屏利用 ThingJS

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-11-26 19:41:56 | 显示全部楼层 |阅读模式


三维数据大屏可视化系统包括多源数据毗连、天生二维/三维视图、构建可视化大屏、大屏功用利用等一体化办事,基于多年可视化项目经历,ThingJS平台得出从数据源上传到可视化大屏利用的完整流程,供参考。

基于WebGL的三维数据可视化大屏利用 ThingJS

(1) 多源数据毗连功用

系统供给对数据的多种毗连方式,包括:多种数据库数据源毗连、实时数据表和静态文件数据源,具体可检察数据文件列表页。

(2) 可视化视图构立功用之图形展现

可视化大屏供给丰富的二维及三维图形展现, 平面图表是常见的视图元素。界面侧边栏供给给有尽有的可视化视图列表,包括了太阳图、柱状图、饼图、玫瑰图、折线图、雷达图、静态和静态舆图、环状图、文本标签云等常用图形。用户点击可视化视图选项后,系统会停止视图范例与数据结构婚配。

基于WebGL的三维数据可视化大屏利用 ThingJS

登录ThingJS在线平台,点击上方菜单栏的“图表”图标,由charterbuilder供给二维图表模板(行将接入阿里云dataV全模板),包括了关系、柱形、热力图、仪表盘等常用的可视化监控图形,VIP用户有更丰富的款式挑选。

基于WebGL的三维数据可视化大屏利用 ThingJS

可视化大屏的城市地理数据以2D/3D的视角显现,火柴盒一样堆在舆图上的三维结果不再吸睛,三维城市模子有更高级的表示形式,外形栩栩如生,连路边的绿化带都清楚可见,这正是thingjs的可视化开辟营业。

基于WebGL的三维数据可视化大屏利用 ThingJS


基于WebGL的三维数据可视化大屏利用 ThingJS

ThingJS可视化组件支持模子导入、场景搭建和可视化增效,基于CityBuilder+ThingDepot+3D源码二次开辟轻松实现:
1. 城市级场景搭建工具CityBuilder操纵简单,操纵可视化组件设备参数和交互动画;
2. 3D场景搭建完成后,在线接入ThingJS开辟平台停止代码调试;
3. 基于完整3D源码开辟更炫酷的结果;
4. ThingDepot供给海量甄选3D模子,避免反复建模!

基于WebGL的三维数据可视化大屏利用 ThingJS
ThingJS内部可视化开辟流程

(3) 可视化大屏构立功用之模板挑选

构建可视化大屏时供给分歧的大屏版式挑选,如dataV供给聪明城市、聪明交通、平安监控、贸易智能等场景模板,所需要的数据分析维度各具特点,满足各行各业的营业需求。一切基于可视化组件停止操纵,单击每个子图,间接操纵每类图形的可设置项。

基于WebGL的三维数据可视化大屏利用 ThingJS

(4) 可视化大屏利勤奋用

可视化大屏利用层包括实时大屏、轮播展现和在线拜候等功用。
利勤奋用的首要感化是对已构建完成可视化大屏,供给进一步的大屏利用办事,使得系统不再仅限于对可视化大屏的检察、更新、删除和重命名等治理操纵。首要利用办事为:
  1. 实时大屏。系统采用定阅公布者形式,设想实时数据字典及定阅者信息治理字典,实现数据可视化视图对实时数据的实时响应,从而实现实时大屏。
2. 大屏轮播。用户可自界说轮播大屏数目、轮播间隔和期望轮播大屏设置完成后,可实现大屏轮播展现功用。系统采用提早加载的设想,下降首屏时候进步用户体验。
3. 大屏嵌入。系统公布天生可拜候的URL,用户可经过 iframe标签在其他利用中间接显现,用于在线演示。

基于WebGL的三维数据可视化大屏利用 ThingJS
某批示中心的大屏可视化利用

系统中的构建层位于利用层之下,首要实现可视化大屏的构立功用,其首要感化是经过一系列界面操纵,天生完整美妙的可视化大屏!ThingJS在线平台聚焦于城市大屏可视化利用构建,操纵dataV、Echarts api接口停止优化设置,开放性强,自在定制自己想要的大屏利用结果!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则