超实用!三维地图标记点,一键联动二维图表

19 阅读2分钟

在制作包含三维地图的项目时,我们有时候需要通过点击三维地图上的标记点来切换两边二维看板上的数据,使其显示标记点对应的数据。今天我们就一起来看一下,应该如何设置这样的效果。

一、添加组件

首先,我们添加一个三维地图和二维数据图表,这里演示使用的是山海鲸资源中心里的 “区域发展指挥中心” 模板,并对其进行了修改。

image

接着,我们将数据添加到项目中,本次演示中我们将使 “T型分组柱状图” 组件显示对应地区标记点弹窗中的数据。

image

然后双击鲸孪生组件,进入编辑模式,在三维地图上添加标记点。

image

最后添加弹窗组件,并根据需要填充其中的内容。

image

二、组件设置

由于这里需要在点击不同标记点时,弹窗中展示不同的数据,因此我们需要为弹窗中需要根据不同地区变化的组件设置动态数据字段。

image

例如这里,我们需要弹窗中的小标题根据所选区域动态展示不同地区名称,因此为 “单行文本组件” 的文本设置了动态数据字段,并将 “区域名称” 的数据字段添加进去,这样我们在开启 “受其他组件联动” 后,这里的区域名称就会动态显示所选区域名称。

image

其他需要动态变化的数据,都依此进行设置。

image

然后进入鲸孪生编辑模式,为标记点设置标记面板,将刚才设置完成的弹窗组件添加进去。

image

同时,在标记点的 “数据” 设置中开启 “联动其他组件” ,这样在点击标记点时,就会与前面弹窗中设置 “受其他组件联动” 的组件产生联动效果。

image

接下来退出鲸孪生编辑模式,选中 “T型分组柱状图” 组件,添加组件数据字段。

image

同样开启 “受其他组件联动” ,这样在点击标记点时, “T型分组柱状图” 组件就会同时产生联动效果。

image

三、效果演示

这样我们就完成了全部的设置,下面我们来演示一下最终效果:

标记点联动