基于WebGL的三维数据可视化大屏开发流 ThingJS

简介: 三维数据大屏可视化系统包含多源数据连接、生成二维/三维视图、构建可视化大屏、大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程。

三维数据大屏可视化系统包含多源数据连接、生成二维/三维视图、构建可视化大屏、大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考。
image.png

多源数据连接功能

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

可视化视图构建功能之图形展现

可视化大屏提供丰富的二维及三维图形展现, 平面图表是常见的视图元素。界面侧边栏提供应有尽有的可视化视图列表,包含了太阳图、柱状图、饼图、玫瑰图、折线图、雷达图、静态和动态地图、环状图、文本标签云等常用图形。用户点击可视化视图选项后,系统会进行视图类型与数据结构匹配。
image.png

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

可视化大屏的城市地理数据以2D/3D的视角呈现,火柴盒一样堆在地图上的三维效果不再吸睛,三维城市模型有更高级的表现形式,外形栩栩如生,连路边的绿化带都清晰可见,这正是thingjs的可视化开发业务。
image.png

image.png

ThingJS可视化组件支持模型导入、场景搭建和可视化增效,基于CityBuilder+ThingDepot+3D源码二次开发轻松实现:

  1. 城市级场景搭建工具CityBuilder操作简单,利用可视化组件设置参数和交互动画;
  2. 3D场景搭建完成后,在线接入ThingJS开发平台进行代码调试;
  3. 基于完整3D源码开发更炫酷的效果;
  4. ThingDepot提供海量甄选3D模型,避免重复建模!
    image.png

ThingJS内部可视化开发流程

可视化大屏构建功能之模板选择

构建可视化大屏时提供不同的大屏版式选择,如dataV提供智慧城市、智慧交通、安全监控、商业智能等场景模板,所需要的数据分析维度各具特色,满足各行各业的业务需求。一切基于可视化组件进行操作,单击每个子图,直接操作每类图形的可配置项。
image.png

可视化大屏应用功能

可视化大屏应用层包括实时大屏、轮播展示和在线访问等功能。
应用功能的主要作用是对已构建完成可视化大屏,提供进一步的大屏应用服务,使得系统不再仅限于对可视化大屏的查看、更新、删除和重命名等管理操作。主要应用服务为:

  1. 实时大屏。系统采用订阅发布者模式,设计实时数据字典及订阅者信息管理字典,实现数据可视化视图对实时数据的及时响应,从而实现实时大屏。
  2. 大屏轮播。用户可自定义轮播大屏数目、轮播间隔和期望轮播大屏配置完成后,可实现大屏轮播展示功能。系统采用延迟加载的设计,降低首屏时间提高用户体验。
  3. 大屏嵌入。系统发布生成可访问的URL,用户可通过 iframe标签在其他应用中直接呈现,用于在线演示。
    image.png

某指挥中心的大屏可视化应用
系统中的构建层位于应用层之下,主要实现可视化大屏的构建功能,其主要作用是通过一系列界面操作,生成完整美观的可视化大屏!ThingJS在线平台聚焦于城市大屏可视化应用构建,利用dataV、Echarts api接口进行优化配置,开放性强,自由定制自己想要的大屏应用效果!

相关文章
|
10月前
|
数据可视化 JavaScript 前端开发
基于Echarts构建停车场数据可视化大屏
基于Echarts构建停车场数据可视化大屏
247 0
|
7月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】智慧医疗可视化大屏(新手必用)
【Echarts大屏】智慧医疗可视化大屏(新手必用)
|
7月前
|
自动驾驶 数据可视化 前端开发
【Echarts大屏】自动驾驶可视化大屏(附源码一键复制)
【Echarts大屏】自动驾驶可视化大屏(附源码一键复制)
|
10月前
|
数据可视化 前端开发 JavaScript
探秘D3.js:数据可视化交互式图表与效果
数据可视化已经成为如今大数据时代的重要工具之一。它不仅可以更直观地呈现数据,还可以帮助人们更好地理解数据背后的含义。而D3.js则作为目前最流行的数据可视化库之一,其强大的功能和灵活性广受开发者青睐。本文将介绍如何使用D3.js创建交互式图表和可视化效果,以及如何利用其强大的API来进行个性化定制。
519 0
|
数据可视化 前端开发 JavaScript
基于Echarts实现可视化数据大屏大数据可视化的方法和流程
基于Echarts实现可视化数据大屏大数据可视化的方法和流程
651 0
|
数据可视化
漏刻有时数据可视化Echarts组件开发(17):值域漫游图
漏刻有时数据可视化Echarts组件开发(17):值域漫游图
78 0
|
前端开发 数据可视化 容器
数据可视化大屏的页面布局以及自适应
数据可视化大屏的页面布局以及自适应
578 0
|
数据可视化 安全 图形学
实时云渲染技术应用之三维可视化部署
实时云渲染技术是以上两个方案的升级方案,该方案是纯B/S架构,将三维可视化、UE\Unity模型放置在服务器上,通过云渲染软件系统流化出可以在手机、电脑、平板、智慧屏等设备上可以直接访问的URL地址。程序运行是在云端服务器上,本地设备无需提供任何算力,用户也不需安装任何插件,而且在网络OK的情况下在任何设备任何地点(办公室、家里等)都可随时打开。在模型建设的阶段也可以选择多种引擎,无论是精美度更高的UE5还是unity、3dmax 或者其他设计软件都是OK的。因为云流化的原理其实不改变程序的指令执行过程,而是把整个执行过程画面以视频流的方式传回给用户终端设备。
471 0
实时云渲染技术应用之三维可视化部署
|
存储 数据可视化 搜索推荐
Tableau可视化之多变地图
导读:可视化地图在描述地理位置相关度量时效果直观、优势明显,Tableau制作地图非常方便,而且支持多种可视化地图形式。本文介绍几种经典的可视化地图形式。
461 0
Tableau可视化之多变地图
|
SQL 数据可视化 前端开发
基于echarts组件制作数据可视化大屏
什么是数据可视化: 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。在实际工作中,数据分析能够帮助管理者进行判断和决策,以便采取适当策略与行动。 数据可视化分析有什么作用: 1.现状分析 告诉你过去发生了什么,告诉你企业现阶段的整体运营情况,通过各个经营指标的完成情况来衡量企业的运营状态,以说明企业整体运营是更好了还是坏了,好的程度是如何,坏的程度又到哪里。 2.原因分析 告诉你某一现状为什么发生,经过第一阶段的现状分析,我们对企业的运营情况有了一个基本的了解,但是不知道运营情况具体好在哪里,差在哪里,是什么原因引起的。这时候我们就需要开展原因分析,以进一步确定业务变动的
基于echarts组件制作数据可视化大屏