【大屏信息可视化】零代码轻松构建数字大屏应用-以智慧城市大屏为例

1 引言

当我们谈论数字信息的呈现,我们或许习惯于复杂的数据报告和难以捉摸的图表。然而,数字大屏的出现彻底颠覆了这一传统观念。作为现代数据可视化的杰出代表,无论是企业的运营状况、市场的动态趋势,还是城市的发展脉搏,数字大屏都能够为我们提供直观、清晰的视觉体验。

以下图中行业内常见的智慧城市大屏为例,作为城市管理的核心展示平台,集实时数据监控、智能分析预测和直观交互体验于一体。只需轻触智慧城市大屏,城市的脉搏便跃然眼前,各种城市运行数据和信息一目了然。

 那么,有没有一种方法,不需要敲代码,仅仅点击几下鼠标,就能构建出精美、炫酷的Web端大屏应用呢?答案是肯定的,借助GeoScene Experience Builder,能够轻松、快捷地构建出上面的大屏应用。

 


 

2 Experience Builder构建大屏应用的优势

Experience Builder是一款Web端零代码、支持响应式开发的应用构建器,用它来构建大屏应用具有以下几点优势:

2.1 简洁明了的拖拽式构建体验

Experience Builder提供拖拽式构建体验,用户可通过已有微件快速构建定制化的应用。

2.2 提供炫酷的大屏定制类微件

Experience Builder 提供了一系列专用于大屏的定制类微件。例如:

  1. 时间微件
  2. 视频微件
  3. 指标微件
  4. 进度条/进度环微件
  5. 文本列表微件
  6. 大屏图表微件 

用户通过这些微件能够快速构建出符合各类设计风格的数字化大屏,展现炫酷的可视化效果。

2.3 丰富的基础微件支持

除了大屏定制类微件之外,Experience Builder还内置了丰富的基础微件,根据功能的不同可分为与地图交互的微件、与数据交互的微件、负责页面元素的微件、负责布局的微件等类别,涵盖了大屏从UI面板搭建到与地图交互等一系列功能。 

2.4 可扩展性

用户除了可以使用内置的微件之外,还可以自行开发符合标准的自定义微件,部署后只需要简单注册至GeoScene Enterprise中,便可以在Experience Builder中进行使用,提高了模块的可复用性,缩短了开发周期。

2.5 支持响应式开发

Experience Builder是一款支持响应式开发的Web App,支持同时配置不同尺寸、不同类型设备的显示效果。


 

3 如何从零开始构建大屏应用?

接下来,我们聊一聊如何在Experience Builder中从零开始搭建一个智慧城市大屏应用。

3.1 大屏布局搭建

3.1.1 从空白模板开始

打开Experience Builder,选择空白全屏模板,开始创建一个全新的大屏应用。

3.1.2 规划大屏布局

使用Experience Builder中的“固定面板”微件,可以轻松构建出大屏的基本框架。在本例中,我们在最上方构建了1个标题栏,并分别在大屏的左侧和右侧放置了4个功能面板。

3.1.3 添加UI素材和标题

精美的图片素材是大屏构建过程中不可缺少的元素。我们可以提前将各类UI素材上传至GeoScene Portal中,然后在构建过程中通过URL地址来引用这些素材。例如下图为我们上传的功能面板的背景图片素材。

接下来,我们回到构建器中,选择左侧最上方的功能面板,在右侧展开的配置面板中选择背景-影像-浏览,并在打开的窗口中输入我们需要引用的素材图片。简单几步就能在构建器中添加UI素材,并实时查看效果。

我们采用相同的方法,将所有需要引用的UI素材都添加到我们的大屏应用中。

最后,使用Experience Builder中的“文本”微件为标题栏和各个功能区加上标题。

 完成上述操作后,大屏的骨架已经搭好了,接下来我们需要往里面填充更多的功能微件。

3.2 添加地图

在本例中,我们构建的大屏主题是智慧城市,在大屏中央插入一幅对应城市的地图或三维场景,能提升大屏整体美感与功能性。


3.2.1 添加地图微件

将Experience Builder中的“地图“微件添加到构建器中央,选择提前制作好的对应城市Web地图,并调整到合适大小即可。

3.3 添加大屏微件


接下来是大屏构建过程的核心工程,我们需要根据各功能区展示内容的不同,选取合适的大屏微件进行搭建。


3.3.1 添加视频微件

视频微件支持播放mp4格式的视频,可用于在大屏上显示监视器拍摄到的画面。

只需将视频微件从左侧的微件列表中拖入到画布中,选择合适的大小和位置,并输入视频的URL地址即可完成配置。视频微件还支持循环播放、自动播放等高阶设置。

3.3.2 添加指标微件

指标微件支持用户快速设置大屏中常见的各类指标,支持设置包含指标标题、指标数据和指标单位的完整指标或部分指标。

指标微件支持用户自定义样式以及连接到已有数据进行显示。

3.3.3 添加进度条微件

进度条微件支持用户快速构建大屏中常见的各类进度条,支持百分比显示。

进度条微件支持用户自定义样式以及连接到已有数据进行显示。


3.3.4 添加进度环微件

进度环微件支持用户快速构建顺时针/逆时针进度条,支持显示百分比和指标名称。

进度环微件支持用户自定义样式以及连接到已有数据进行显示。

3.3.5 添加文本列表微件

文本列表微件支持用户从发布的数据中,选取多个字段,快速构建炫酷的可滚动文本列表,且支持对背景颜色、显示行数等参数进行调整。

3.3.6 添加大屏图表微件

大屏图表微件包含了四种符合大屏显示风格的图表类型:南丁格尔玫瑰图、立体柱状图、散点图和折线图。

四种图表能展现出不同数据所独有的特征,例如散点图和折线图能展示不同年份或不同类别数据的变化趋势,南丁格尔玫瑰图和立体柱状图则更能展现组内各分量之间的差异。


3.3.7 添加时间微件

时间微件可用于快速设置大屏中时间显示。支持多种不同的时间显示格式,以及自定义样式。

至此,我们的智慧城市大屏就已经全部搭建完成,接下来,只需点击右上方的“发布”按钮即可完成发布过程。

查看发布后的大屏应用:

 


 

4 模板快速复用,大屏构建更轻松

构建好的大屏还可以直接保存为模板,并在GeoScene Enterprise中共享。其他用户可直接使用该模板,只需替换底层的数据,即可快速构建出一个全新的大屏应用。

在下面的视频中我们展示了这一更加快捷的构建过程:


 

5 在GeoScene Online中使用模板

如果您拥有 GeoScene Online 的账号,可以直接使用我们上传至 GeoScene Online 中  易智瑞-智慧城市大屏 模板。具体有以下两种方式:

5.1 在项目详情页中根据模板创建Web体验

访问易智瑞-智慧城市大屏模板项目详情页,点击右侧的 “创建 Web 体验” 按钮,即可依据模板在当前账户生成一个完全相同的台风监测大屏,用户替换成自己的数据后即可发布分享。

5.2 在 Experience Builder 中根据模板创建Web体验

用户在 Experience Builder 中新建一个Web体验时,在选择模板以开始页面中,选择 “我的组织”标签页,即可看到 GeoScene Online 中成员目前共享的所有模板,选择相应模板并点击 “创建” 按钮开始创建新的Web体验。


 

6 小结

在这篇文章中,我们展示了如何使用Experience Builder这一款Web端零代码应用构建器,快速构建一个炫酷的智慧城市展示大屏,是不是十分的便捷高效呢?大家平时看到或是构建过的又是哪类大屏呢?欢迎在评论区留言!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值