本文档为您介绍当鼠标划过地图的区域热力层子组件时,切换展示当前区域对应的学校数据的方法。

前提条件

完成配置学区地图单选框交互操作,本文档将在其基础上继续添加节点和连线。

背景信息

本文档包括以下两个场景的配置。

切换展示学校基本信息

需要实现的交互:鼠标滑过学校区域时,在大屏左下角切换展示学校的基本信息,包括学校的名称、地址和属性。

实现方案:划过地图的区域热力层子组件时,获取当前区域内对应学校的全量数据,将数据字段导入对应的组件中,并显示在大屏左下角。

  1. 节点编程配置页面,将左侧学校信息弹窗-L下的单张图片namechildrenaddresstype这五个节点拖至画布中。
    学校信息弹窗-L下的节点
  2. 公办小学鼠标移入区域触发事件分别与上一步中添加的五个节点的导入接口动作连线。
  3. 在连线中各添加一个转换器,分别命名为logonamechildrenaddresstype
    具体操作方法请参见配置节点编程
  4. 公办初中鼠标移入区域触发事件分别与上一步中添加的五个转换器连线。
    连线完成后的结果如下图所示。
    区域面与具体信息组件连线样式
  5. 配置转换器。
    1. 右键单击名称为logo的转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,完成后单击保存
      logo转换器代码
      return [{
        "img": data.logo
      }];
      转换器从上游获取的data结构样式如下显示,转换器代码配置时候可按需选择。
      {
        "id":xxx,
        "name":"xxx小学",
        "distance":"",
        "public_or_private":"",
        "is_primary":1,
        "is_middle":0,
        "is_nursery":0,
        "is_high":0,
        "location":"",
        "address":"",
        "logo":""
      }
    3. 使用同样的方式,配置其他四个转换器,示例代码如下。
      • name转换器:
        return [{
          "value": data.name
        }];
      • children转换器:
        let res = `${data.is_primary && data.is_primary == 1 ? "小学" : ""}${data.is_middle && data.is_middle == 1 ? "/初中" : ""}${data.is_high && data.is_high == 1 ? "/高中" : ""}${data.is_nursery && data.is_nursery == 1 ? "/幼儿园" : ""}`;
        return [{
          "value": `${res[0] == "/" ? res.substring(1) : res}`
        }];
      • type转换器:
        return [{
          "value": `学校属性:${data.public_or_private}`
        }];
      • address转换器:
        return [{
          "value": `学校地址:${data.address}`
        }];

切换展示学校对应的学区房信息

需要实现的交互:鼠标滑过学校区域时,在大屏右上角切换展示对应学区房成交量排行榜信息和房价趋势图。

实现方案:划过地图的区域热力层子组件时,获取当前区域内对应学校的id,从临时变量(全量学区数据)中过滤出对应数据并分发给组件,显示在大屏右上角。

  1. 配置全局节点的临时变量。
    1. 节点编程配置页面,将左侧的全局节点拖至画布中。
    2. 将全局节点的页面初始化完成事件和设置页面临时变量动作进行连线。
    3. 在连线中添加一个转换器,并命名为top3全量数据
      全局连线
    4. 配置转换器,设置临时变量的数据结构。
      全局变量转换器代码
      • 一号标记:临时变量名。
      • 二号标记:学校对应的ID。
      • 三号标记:学区信息。

      可单击此处下载上图中的示例代码。

  2. 节点编程配置页面,将左侧成交量 > NO.1成交量 > NO.2成交量 > NO.3文件夹下的nameaveragecount共九个节点都拖至画布中。
  3. 公办小学公办初中与上一步中拖入的任意一个节点连线。
  4. 在连线中添加转换器,并命名为top3
  5. 按照以下说明完成top3转换器的连线。
    • top3转换器分别与公办小学公办初中鼠标移入区域触发事件连接。
    • top3转换器分别与第二步中所有的nameaveragecount节点的导入数据接口动作连线。
    部分连线结果如下。
    top3转换器连线结果
  6. 在上一步的九条连线中各添加一个转换器,分别命名为1-name1-count1-average2-name2-count2-average3-name3-count3-average
    连线完成后,结果如下图所示。
    学区top3数据分发
  7. 配置转换器。
    • 配置top3转换器。
      top3转换器代码
      let res = getLocalValue("sale_detail")[data.id] ? getLocalValue("sale_detail")[data.id].list : [];
      return res;
    • 配置1-name转换器。
      return data.length >= 1 ? [
        {
          value: `${data[0].district}区 ${data[0].name}`
        }
      ] : [{ value: "" }];
    • 配置1-count转换器。
      return data.length >= 1 ? [
        {
          value: `成交量:${data[0].count}`
        }
      ] : [{ value: "" }];
    • 配置1-average转换器。
      return data.length >= 1 ? [
        {
          value: `平均单价:${(data[0].sumPrice / data[0].area).toFixed(2)}万`
        }
      ] : [{ value: "" }];
    • 配置2-name转换器。
      return data.length >= 2 ? [
        {
          value: `${data[1].district}区 ${data[1].name}`
        }
      ] : [{ value: "" }];
    • 配置2-count转换器。
      return data.length >= 2 ? [
        {
          value: `成交量:${data[1].count}`
        }
      ] : [{ value: "" }];
    • 配置2-average转换器。
      return data.length >= 2 ? [
        {
          value: `平均单价:${(data[1].sumPrice / data[1].area).toFixed(2)}万`
        }
      ] : [{ value: "" }];
    • 配置3-name转换器。
      return data.length >= 3 ? [
        {
          value: `${data[2].district}区 ${data[2].name}`
        }
      ] : [{ value: "" }];
    • 配置3-count转换器。
      return data.length >= 3 ? [
        {
          value: `成交量:${data[2].count}`
        }
      ] : [{ value: "" }];
    • 配置3-average转换器。
      return data.length >= 3 ? [
        {
          value: `平均单价:${(data[2].sumPrice / data[2].area).toFixed(2)}万`
        }
      ] : [{ value: "" }];
    说明 此步骤使用到了节点编程的数据分发功能,详情请参见如何通过合并请求进行数据分发