地图大屏提供了丰富的交互功能,支持组件、数据和页面之间的联动,让用户能多维度、动态地探索和分析数据。
交互流程包含四个核心要素:触发组件、触发器、目标和目标操作。其工作原理可以概括为:用户在触发组件上执行操作(激活触发器),进而驱动目标执行相应的目标操作。
- 触发组件:发起交互行为的组件,也是用户直接操作的对象,如被点击的地图、被筛选的图表
- 触发器:交互的触发条件或事件,当触发组件发生特定事件(如点击、选择等)时,触发器被激活,从而驱动目标完成相应目标操作
- 目标:接收交互指令并作出响应的对象,可以是触发组件本身、其他组件、数据或当前页面,从而实现多种联动效果:
- 组件:实现单个组件与单个组件间的联动,如点击地图,图表同步高亮。注意:触发组件和目标组件必须包含相同的数据或者它们的数据可以通过某个字段相互关联
- 数据:实现数据驱动更新,如在图表中过滤数据,所有绑定该数据的组件都将进行过滤
- 页面:实现页面切换或重置当前页面的交互,如点击某个文本,清空当前页面中所有已经触发的交互状态
- 目标操作:当触发组件发生了特定事件后,目标将执行的具体行为,如地图要素高亮显示、数据过滤等
完整的交互流程例如:
- 在地图组件(触发组件)中改变地图显示范围(触发器),图表组件(目标组件)会筛选并显示当前地图范围内的数据(目标操作)
- 在图表组件(触发组件)中点击(触发器)某个数据项,其他使用了该数据源(目标数据)的所有图表组件将过滤显示该数据项(目标操作)
- 点击(触发器)文本组件(触发操作),清空当前页面(目标页面)所有已经触发的交互状态(目标操作)
支持为同一个组件添加多个不同类型的触发器,从而允许用户通过不同的操作方式与同一个组件交互,比如:
- 在地图组件中,可以通过点击选择地图中的要素(触发器1)来实现该要素的高亮显示,也可以通过拖拽改变地图的显示范围(触发器2)来触发范围内数据的重新筛选
也支持为同一个触发器设置多个目标操作,从而可以在一系列不同组件中同时触发目标操作,比如在地图组件中改变地图显示范围后,可以同时实现:
- 柱状图(目标组件1)立即筛选并显示当前地图范围内的统计数据(目标操作1)
- 文本列表(目标组件2)立即筛选并列出当前地图范围内的详细条目(目标操作2)
组件交互设置
在触发组件中配置触发器,即可启动组件间的交互,可参考以下步骤:
-
添加触发器:选中触发组件,在右侧的交互设置面板中,点击“添加触发器”,为触发组件添加一种交互事件,例如:选择要素、改变范围等;
- 配置触发器:在已添加的触发器中,点击“添加操作”,配置如下内容:
- 目标:选择接收触发器行为并响应的组件或数据
- 目标选择具体组件时,仅该组件会执行目标操作,同时还需在“目标数据”中选择该组件所绑定的具体数据来源,以进一步明确目标组件中具体哪一个数据来源参与本次交互
- 目标选择数据源时,目标操作将作用于该数据源本身,即所有使用了该数据源的组件都会执行目标操作,实现批量的业务响应
- 目标选择页面时,目标操作将作用于当前大屏页面
- 目标操作:选择目标组件、数据或页面在响应触发器时执行的具体动作,例如:高亮要素、切换数据等
- 触发数据 / 触发图层:
- 触发数据:当触发组件非地图时的配置项,通常选择触发组件的数据来源
- 触发图层:当触发组件为地图时的配置项,通常选择地图组件地图来源中的某一图层
- 目标:选择接收触发器行为并响应的组件或数据
- 建立数据关联:当目标组件的“目标数据”或“目标”中选择的数据源,与“触发数据 / 触发图层”不一致时,需设置以下“关联字段”,使触发组件和目标组件之间建立数据关联,两个字段中的值需保持一致;
- 触发数据 / 触发图层的字段:选择触发组件数据来源中用于关联的字段
- 目标数据的字段:选择目标组件数据来源中用于关联的字段
最后点击“确定”按钮,即可完成组件交互设置。设置完成后,点击或操作触发组件中的元素,目标组件即会按照配置做出相应的业务响应。
下面对触发组件中的触发器以及触发器中的目标操作进行详细介绍。
触发器
地图大屏支持的触发器有 7 种类型,下面对各种触发器及其使用场景进行具体说明。
- 选择要素后:通过选择地图中的要素,触发相应的操作。例如选中地图中的某一要素后,在图表中对相应数据高亮显示。
- 鼠标点击后:通过点击鼠标,触发相应的操作。例如点击文本后,切换至不同的大屏页面等等。
- 改变范围后:通过改变地图的显示范围,触发相应的操作。例如改变地图在地图组件中的显示范围后,图表会过滤掉该范围外的数据。
- 切换数据后:通过切换组件中的数据,触发相应的操作。例如改变数据切换组件中的数据后,图表会切换其使用的数据源。
- 选择记录后:通过选择某一数据记录,触发相应的操作。例如选中图表中的某一项数据后,在地图中相应的要素会高亮显示。
- 切换幻灯片后:通过切换幻灯片页面,触发相应的操作。例如切换幻灯片页面后,会改变地图的显示范围或文本的显示内容。
- 日期范围变化后:通过改变日期范围,触发相应的操作。例如调整切换日期组件中的起止日期后,会改变图表中显示数据的时间范围。
目标操作
地图大屏支持的目标操作有 10 种类型,下面对各种目标操作及其使用场景进行具体说明。
- 高亮要素:对地图中的指定要素高亮显示。例如在图表中选中了某一数据,可在地图中对该数据所对应的要素高亮显示。
- 添加至地图:将组件中选中的数据添加并显示至地图中。例如在图表中选中了某一数据,可将该数据添加至地图中并显示,此操作不会改变地图所使用的数据本身。
- 缩放至地图:将地图缩放至所选要素或某一范围。例如在图表中选中了某一数据,地图将缩放至该数据所对应要素。支持配置地图的缩放级别。
- 缩放至场景:将场景缩放至某一场景范围。例如改变地图范围后,场景将缩放至相应的地图范围。
- 切换数据:切换组件所使用的数据源。例如改变数据切换组件中的数据后,图表会切换其使用的数据源。
- 追加数据:在地图中追加时序数据,此操作限定时序数据使用。例如在时间轴(点)组件中选中了某一时间节点,会在地图中追加相应的时序数据,此操作不会改变地图所使用的数据本身。
- 显示数据:在组件中显示某一数据内容,例如在图表中选中了某一数据,可以在文本组件中显示该数据内容。
- 过滤数据:对组件中的数据内容进行过滤。例如改变地图在地图组件中的显示范围后,图表会过滤掉该范围外的数据。
- 切换超链接:切换文本的链接跳转地址,限定目标数据的字段为超链接地址。例如在图表中选中了某一数据,可改变文本组件的跳转地址,点击文本可跳转至新的地址。
- 显示:切换显示的页面,此操作限定目标为页面时使用。例如点击文本,会切换显示当前大屏中其他的页面。
- 重置:清空当前页面中所有已经触发的交互状态,还原为初始的交互状态,此操作限定目标为页面时使用。例如点击文本,会清空页面中所有图表选中高亮的要素。
支持交互的对象
在地图大屏中,不同对象所支持的触发器类型和目标操作类型存在差异,支持交互的对象及其所支持的触发器和目标操作如表1所示。
| 交互对象 | 作为触发组件 | 支持的触发器 |
作为目标组件 |
支持的目标操作 | ||
|
组件 |
地图 |
√ |
选择要素后 改变范围后 |
√ |
高亮要素 切换数据 添加至地图 缩放至地图 追加数据 | |
| 场景 |
√ |
改变范围后 |
√ |
缩放至场景 | ||
|
图表 |
柱状图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | |
|
条形图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
|
饼图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
|
散点图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
|
折线图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
|
雷达图 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
|
仪表盘 |
- |
- |
√ |
显示数据 切换数据 | ||
|
水球 |
- |
- |
√ |
显示数据 切换数据 | ||
|
进度条 |
- |
- |
√ |
显示数据 切换数据 | ||
|
进度环 |
- |
- |
√ |
显示数据 切换数据 | ||
| 基础 | 文本 |
√ |
鼠标点击后 |
√ |
显示数据 切换数据 切换超链接 | |
| 文本列表 |
√ |
选择记录后 |
√ |
过滤数据 高亮要素 切换数据 | ||
| 指标 |
- |
- |
√ |
显示数据 切换数据 |
||
| 图片 |
- |
- |
√ |
显示数据 |
||
| 视频 |
- |
- |
√ |
显示数据 |
||
| 幻灯片 |
√ |
切换幻灯片后 |
√ |
切换幻灯片 |
||
| 级联选择 |
√ |
选择记录后 |
- |
- |
||
| 数据 | 时间选择 |
√ |
日期范围变化后 |
- |
- |
|
| 数据切换 |
√ |
切换数据后 |
- |
- |
||
| 数据过滤 |
√ |
切换数据后 |
- |
- |
||
| 时间轴(段) |
√ |
切换数据后 |
- |
- |
||
| 时间轴(点) |
√ |
切换数据后 |
- |
- |
||
| 时间轴(条) |
√ |
切换数据后 |
- |
- |
||
| 数据 |
- |
- |
√ |
过滤数据 高亮要素 | ||
| 页面 |
- |
- |
√ |
显示 重置 | ||
注意:当地图组件的地图来源为地图工作室 WebApp 制作的地图时,采用 3D 热力图、统计图表、OD 图样式的点图层不支持以下目标操作:高亮要素、添加至地图、缩放至地图、切换数据、追加数据。