配置学区地图单选框交互

本文档为您介绍通过单选框实现不同类型学校的图标散点层数据的切换展示，以及Tab列表和单选框的双重触发判断方法。例如Tab列表选择小学，单选框选择公办，那么最终实现在大屏上展示所有公办小学的散点层信息。

前提条件

完成 配置学区地图Tab列表交互 操作，本文档将在其基础上继续添加节点和连线。

背景信息

需要实现的交互：通过控制组件单选框内的全选/公办/私办选项和Tab列表内的小学/初中选项，控制目标组件图标散点层的显隐效果。 可实现方案有两种：

• 使用逻辑节点控制对应散点层的显隐样式，本文使用此方案，操作步骤如下。
• 切换散点层内的数据data/[]，比较复杂，不建议使用此方案。

操作步骤

1. 在蓝图编辑器中，将左侧地图&固定内容下的单选框节点拖至画布中。
2. 单击添加两个分支判断节点到画布中，分别命名为小学和初中。具体操作方法请参见 逻辑节点配置 。
3. 在小学与初中节点后分别再增加三个分支判断节点用于判断学校办学类型，分别命名为公办、民办、全选。具体操作方法请参见 逻辑节点配置 。
4. 按照以下说明连线。
   1. 将单选框的当点击单选按钮时事件分别与小学、初中节点连线。
   2. 将小学、初中的满足事件分别与公办、民办、全选相连。
   3. 公办、民办、全选满足事件分别与各类型学校的显隐动作相连。
   4. 使用同样的方式对初中触发器进行连线并添加触发器，最终连线效果如下。

连线的原理为：全选触发器同时连接公办和民办的显示动作；公办触发器连接公办的显示动作和民办的隐藏动作；民办触发器连接公办的隐藏动作和民办的显示动作。

5. 设置小学、初中分支节点需要判断的tab列表的回调id值为全局节点中的临时变量
   • 单击全局节点添加到画布中，详情请见 全局节点。
   • 单击串行数据处理节点添加到画布中，并命名为获取tabID临时变量，连接Tab列表->获取tabID临时变量->全局节点，连线效果如下。

• 配置获取tabID临时变量节点，在右侧配置面板中处理方法的脚本编辑器中输入代码。

示例代码如下

return {
  data: [{
    name: "tabID",
    value:data.id
  }]
};

6. 配置分支判断节点。
   • 配置小学节点

return getLocalValue("tabID") && getLocalValue("tabID") == "1";

以上代码用于获取Tab列表中小学的触发判断条件。在当前小学触发条件下，小学相关的散点层组件都显示在大屏相应位置；初中相关的散点层组件不显示在大屏中。

• 配置初中节点

return getLocalValue("tabID") && getLocalValue("tabID") == "2";

以上代码用于获取单选框组件中全选状态的触发判断条件。在当前全选触发条件下，全部散点层都显示在大屏相应位置，反之则显示部分散点层。

• 配置全选节点

return data.value == "全选"; 

• 配置公办节点

return data.value == "公办"; 

• 配置民办节点

return data.value == "民办"; 

以上配置实现了双重触发判断，即首先判断Tab列表中选择的是小学还是中学，在此基础上再判断单选框中选择的是民办、公办还是全选，最终组合筛选出对应的散点显示在大屏的地图区域中。