本文档为您介绍通过单击Tab列表选项，切换展示小学和初中的统计信息（包括学校数量、区位占比等）和地理位置信息的方法。

背景信息

Tab列表切换小学和初中的统计信息

需要实现的交互：当单击Tab列表的选项时，大屏中切换小学和初中2类学校的统计信息。

可实现方案：
  1. 在节点编程配置页面，将左侧地图&固定内容中的Tab列表、小学组和初中组节点拖至画布中。
  2. 按照以下说明进行连线。
    将Tab列表的当Tab点击时事件分别与小学组和初中组的显示在指定位置动作连线。
  3. 在连线中添加两个转换器，分别命名为小学位置判断和初中位置判断。
    具体操作方法请参见配置节点编程。转换器添加完成的效果如下图所示。
    位置连线样式
  4. 配置转换器。
    1. 右键单击名称为小学位置判断的转换器，选择编辑。
    2. 在转换器设置对话框的转换器脚本编辑区域，输入转换条件，完成后单击保存。
      小学位置判断转换器编辑
      当前转换器的示例代码如下。 
      if (data.id == 1) {     //小学位置判断。
  return {
    "x": -16,
    "y": 160            //x,y轴数据代表目标位置处。
  };
} else {
  return {
    "x": -16,
    "y": 1080          //这个数据下的位置将被被移除画布范围。
  };
}
    3. 使用同样的方式配置初中位置判断转换器，示例代码如下。 
      if (data.id == 2) {     //初中位置判断。
  return {
    "x": -16,
    "y": 160            //x,y轴数据代表目标位置处。
  };
} else {
  return {
    "x": -16,
    "y": 1080          //这个数据下的位置将被被移除画布范围。
  };
}

Tab列表切换小学和初中的地理位置信息

需要实现的交互：当单击Tab列表的选项时，大屏中的基础平面地图组件切换小学和初中2个区域热力层样式，并显示对应的散点。

实现方案：使用Tab列表和触发器控制地图子组件的显隐样式，具体操作步骤如下。您也可以通过转换器实现，详情请参见如何使用Tab列表控制组件显隐。

  1. 在节点编程配置页面，将左侧地图&固定内容 > 基础平面地图中的公办小学、公办初中、公办小学点、公办初中点、民办小学和民办初中六个节点拖至画布中。
    说明 Tab列表节点在上一步中已经添加至画布中，不需要重复添加，可在下文的步骤中继续使用。
  2. 按照以下说明进行节点连线，并添加触发器。
    1. 将Tab列表中的当Tab点击时事件与公办小学的显示动作连线。
    2. 在上述连线中添加触发器，命名为id=1：小学。
      详细操作方法请参见配置节点编程。
    3. 将Tab列表中的当Tab点击时事件与公办初中的显示动作连线。
    4. 在上述连线中添加触发器，命名为id=2：初中。
      详细操作方法请参见配置节点编程。
  3. 按照以下说明完成触发器和节点之间的连线。
    • 将id=1：小学触发器与公办小学点和民办小学点的显示动作连线；与公办初中点和民办初中点的隐藏动作连线。
    • 将id=2：初中触发器与公办小学点和民办小学点的隐藏动作连线；与公办初中点和民办初中点的显示动作连线。
    连线完成后的样式如下图所示（截图中只包含了部分节点与连线）。
    控制地图子组件显隐
  4. 配置触发器。
    1. 右键单击名称为id=1：小学的触发器，选择编辑。
    2. 在触发器设置对话框的触发器脚本编辑区域，输入转换条件，完成后单击保存。
      小学子组件触发器代码
      当前触发器的示例代码如下。 
      return data.id == 1;
      说明 以上触发条件的原理是：单击小学Tab时，三个小学相关的地图子组件显示在大屏相应位置；三个初中相关的地图子组件隐藏不显示在大屏中。
    3. 使用同样的方式配置id=2：初中的触发器，示例代码如下。 
      return data.id == 2;
    由于Tab列表控制地图子组件显隐的同时要考虑到和单选框选项内的数据保持一致，因此需要继续执行以下步骤进行配置。
  5. 在id=1：小学触发器与公办小学点和民办小学的连线中分别添加两个触发器，并分别命名为schooltype=公办和schooltype=民办。
  6. 在id=2：初中的触发器与公办初中点和民办初中的连线中分别添加两个触发器，并分别命名为schooltype=公办和schooltype=民办。
    触发器添加完成后，最终效果实现双重判断标准，部分截图如下所示。
    双重判断连线
  7. 使用同样的方式，按照以下说明，配置用于单选框判断的触发器。
    schooltype=公办单选框判断代码
    注意
    在进行以下配置前，您需要首先在大屏编辑器内配置单选框组件的交互事件。
    设置变量值

    在单选框组件的交互面板中，勾选单选框变化响应事件右侧的启用，在value字段对应的绑定到变量输入框中输入schooltype。

    • schooltype=公办触发器的触发条件为： 
      return getCallbackValue('schoolType') && (getCallbackValue('schoolType') == "全选" || getCallbackValue('schoolType') == "公办");

      以上代码的作用是获取单选框中全局变量的值，判断当前单选框的状态。

    • schooltype=民办触发器的触发条件为： 
      return getCallbackValue('schoolType') && (getCallbackValue('schoolType') == "全选" || getCallbackValue('schoolType') == "民办");