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

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端零代码应用构建器，快速构建一个炫酷的智慧城市展示大屏，是不是十分的便捷高效呢？大家平时看到或是构建过的又是哪类大屏呢？欢迎在评论区留言！