万能“子组件”——地图子组件自定义拼接

功能背景

随着可视化业务表达方式的不断拓深，展示形式也越来越丰富多样，充满更多的“个性化”以及“专属定制”的诉求场景。而现在的子组件样式，仅支持固定格式的内容表达，难以满足易知微用户的定制化需求。我们推出「万能“子组件”」，引入全新的机制定义，在“任意拼接”基础上打通组件与平台的逻辑，从 “1*N ” 变为“N*N”，任意组件之间可以互相引用，相互拓展，大大提升可视化的场景覆盖度。

应用场景

1. 地图子组件自定义拼接

支持自定义拼接地图组件的子组件内容，包括所有的图表组件、标题组件，以及更多组件。辅助展现可视化地图的所有个性化形态，丰富地理信息业务数据的表达形式，灵活、直观的融入到地理信息的展示和表达中，让数据可视化元素变得更加丰富多样。

2. 3D轮播容器

通过全新上线的3D轮播容器组件，实现了组件容器功能的“3D进阶”，任意模块都可以以3D轮播、旋转的交互形式进行展示，赋能更多可视化业务场景的表达。

更多应用场景：状态容器等，持续开发中……

使用流程

功能入口

地图类的万能子组件入口在子组件管理的列表中。（注：目前地图类组件仅基础平面地图、3D边界地图开放使用，其他地图组件类型会陆续补充）

样式

万能子组件的基础功能样式与线上地图组件逻辑一致，包括定位点、轮播逻辑、基础配置等等，如果之前没有使用过地图类组件，可以看一下之前的基础介绍文档。通用3D- 信息面板子组件

自定义编辑模式

功能逻辑

万能子组件机制的主要作用是支持自定义拼接组件/信息面板的展示内容，需要进入编辑模式进行自定义拼接。

功能入口

如果我们想要自定义拼接子组件的内容，则需要进入编辑模式进行自定义拼接。

组件展示大小及背景透明度设置

数据接入与分发逻辑 （重要！）

状态标识

可自定义输入状态标识，根据状态标识进行数据的映射和分发。目前万能子组件可以支持多状态的展示形式，这个时候就需要每个状态匹配好对应的标识。基于此进行数据的分发与映射。

数据接入流程

我们的原数据是这样的。现在我们需要把标识一中的数据传入组件里。

1.需要绑定好状态标识。

2.编辑模式里，可将组件数据来源设置为“接收上级数据”，这个时候就能看到我们可以接收到了标识一中的数据。

这个时候，我们根据字段映射，选择相应的字段即可完成数据的接入。

⚠️上面所展示的是可以直接映射的数据，图表类的数据目前则需要放置在对象里，需要做一定的处理，例如我们用data，这里可以进行自定义。【此处目前数据映射需手动处理，后续我们也会继续优化数据处理的映射逻辑】

这里提供大屏模版，可直接进行查看。👉🏻📎图表类数据接入_2847387.screen.zip

同时我们需要在编辑模式的过滤器里进行数据的处理，data处则是我们在数据中定义的对象。如果我们定义了外层为aa,则这里处理成 return data[0].aa || []; （注：需要修改红色的位置即可，前面的return data[0]是固定的）

这样的话就完成了图表类的数据映射和接入。

return data[0].data || [];

3.状态关联（重要‼️）

我们需要关联状态和标识。这个时候我们刚刚配置的就可以正常显示啦！注意⚠️：这里的名称需要写正确，不然组件没办法正常进行渲染。

同时我们也可以配置其他任意的组件，进行数据映射。并且联动定位点与轮播动画进行展示。

如果要进行多组状态的显示，例如点击不同的定位点，需要展示不同的颜色的模块，则需要再做关联。

复杂交互配置

万能子组件内的任意实例都可与内外部完成自定义交互配置，可通过选中特定实例项进行交互。

1.组件交互万能子组件整体

可选择交互对象为万能子组件，可交互动作为平台通用动作。

2.其他组件交互万能子组件内任意实例

例如：点击选项卡A、B、C....F 分别控制万能子组件内各个形状组件的显隐。

首先需要选择万能子组件内的形状组件，然后配置选中交互项。（注：需要在全局进行选择万能子组件内的实例，当前组件只会显示到万能子组件。）

选中交互项：即用来选择交互万能子组件内的哪个实例。

该动作所需要接收的数据，return的值将作为选中的实例的下标。如选择多个实例，return的值需是字符串下标，如‘2,3’ ，如选择某单个实例，return的值可以为数值1。

3.万能子组件内任意实例交互其他组件

如控制万能子组件内各个形状组件交互其他图表组件。

1.给形状组件配置自定义事件，如果控制第一个形状组件交互其他组件，则可以选中形状组件，在选择交互项的index中输入1

index: index即为万能子组件内各个实例的下标，可选中特定实例项进行交互，从1开始。

同时也可以在自定义条件中通过代码配置。如：希望选择 index>1 的所有实例触发交互。

一些小说明：

当未使用万能子组件配置自定义事件时（即平台其他通用组件），不存在选中交互项的配置。当未输入自定义条件时，并点击保存，此时自定义事件是不生效的。

而当万能子组件内，已经配置index的情况下，未设置条件时，此时做了逻辑兼容，可默认条件，完成自定义事件的配置生效。

示例demo

📎万能子组件示例-地图2_2849382.screen.zip