基于iPortal制作疫情大屏

疫情大屏"/>

基于iPortal制作疫情大屏

作者：LX

SuperMap iPortal为大家提供了开箱即用的SuperMap iPortal WebApp——MapDashboard，便捷的拖拽式组件，可以帮助大家轻松构建精美的大屏。MapDashboard能够展现GIS时空数据可视化的魅力，同时帮助GISer轻松搭建专业美观的地图大屏应用，支持多种数据类型，满足你的不同可视化需求，只需像制作PPT一样动动鼠标，就可得到精美大屏。本文将基于二月份全国的疫情数据，带领大家利用iPortal MapDashboard快速的制作疫情大屏。

地图大屏功能介绍

• 丰富的地图组件和模板
  地图大屏内置了丰富的地理组件和模板，支持二维地图和三维场景的展示，同时提供了多种类图表和可视化组件，为我们带来了丰富的地理可视化表达方式。
• 轻松编辑，一键换色
  全拖拽式编辑方式，让我们可以轻松构建应用；同时内置了多套配色主题，可以对应用一键换色。
• 多屏适配，手机随心看
  制作的应用天生适配多种分辨率的屏幕，手机上也能随心浏览和分享。
• 多源数据接入
  支持静态动态等多种类地理数据，支持视频、图片、网页等多源数据。

大屏制作流程

下面将通过iPortal MapDashboard来快速构建疫情大屏。
先看效果：

构建大屏步骤

数据准备
本文的数据来源于国家以及各省市卫健委官网（PS：可能会由于计算问题导致有些数据有误，仅做范例数据演示，不做官方参考数据）
1、获取到疫情数据生成CSV文件

2、在iDesktop中创建一个数据源，把全国行政区划数据和获取的疫情数据都导入到数据源中

3、将疫情数据都导入到数据源中并将各省的疫情数据追加到行政区划数据集中

4、将全行政区划数据添加到地图上制成一幅地图，然后保存工作空间，并压缩成zip包
5、在iPortal数据资源中上传工作空间压缩包并且发布成服务
数据上图
在构建大屏时需要进行地图添加，因此我们首先用SuperMap iPortal数据上图进行地图构建。
1、 添加行政区划图层：这里通过搜索添加，搜索到发布的疫情数据地图服务，然后添加到地图中。


2、 添加疫情专题图层：通过搜索添加发布的疫情数据服务，然后添加到地图中

3、 通过对分段法、分段颜色、标签显示、轮廓、图例、字段过滤等设置，我们可以按需配置出一副漂亮的分段专题地图。

4、 最后，保存地图

大屏构建
这里通过地图组件和多个图表组件来进行可视化表达二月份各省疫情的分布情况以及每天的疫情变化。
1、 打开一个空白的大屏模板、然后添加容器组件给整个页面布局并且给容器一个合适的边框，这里我选中“边框6”

2、 添加大屏标题
添加一个文本组件，在“文本内容”里面写入文本标题，并设置合适的字体样式

3、 添加地图组件
1） 将地图组件添加到容器中
2） 选择地图，这里选中之前在数据上图中制作好的地图

3） 添加地图子组件
在右侧“地图属性设置”中将需要设置的子组件设置为可见，这里将“缩放”、“比例尺”、“图例”组件设置为显示状态
4） 添加点选查询组件，设置需要显示的字段以及要素高亮样式和弹窗的显示样式
5） 添加文字信息
到此整个地图组件就制作完成了：

图中通过地图反映出以湖北为中心，全国分布趋势基本呈空间散射状态，逐级递减。我们通过添加地图子组件来丰富地图的可视化效果，通过添加点选查询组件加入图层字段设置，支持在地图中进行各省疫情数据的点选查询。

4、 添加图表组件
这里主要是添加折线图、柱状图、环形图来表达疫情信息，这几种图表制作方法相似，就不一一介绍了，这里仅以折线图为例给大家介绍一下图表的制作流程：
首先，添加图表标题，直接在组件中将文本组件拖到布局窗口的适当位置，然后输入文本内容、修改字体颜色和大小即可；
其次，选择之前发布好的数据

分别设置X轴和Y轴显示字段

折线图效果：

通过折线图可以直观的反应二月份每天全国疫情的变化趋势，例如，通过图表我们很明显的看出2月份中12日的确诊病例最多。
柱状图效果：

通过柱状图，我们可以很直观的对比出二月份哪些省份确诊病例较多，哪些省份较少。
环形图效果：

通过环形图，我们明显的看出二月份全国涉疫人数中，确诊、治愈、死亡以及密切接触人数的一个占比情况。
5、 添加大屏的文本信息
这里主要是添加累计确诊病例以及累计治愈和死亡病例。

到这里，我们的大屏就制作完成了，点击保存和发布就可以预览大屏效果了：

同时大屏也支持在移动端浏览，将发布出来的地址在移动端打开即可看到效果:

注意事项：
1、在添加组件之前先添加容器做好布局，不要直接添加组件，这样做可以防止在移动端浏览的时候布局错乱。
2、移动端浏览的时候组件的前后顺序是按照先上下后左右的顺序。

本文测试数据：