覆盖主要内容
版本: 6.1.0

配置学区地图区域热力层交互

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

前提条件​

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

背景信息​

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

切换展示学校基本信息​

需要实现的交互：鼠标滑过学校区域时，在大屏左下角切换展示学校的基本信息，包括学校的名称、地址和属性。 实现方案：划过地图的区域热力层子组件时，获取当前区域内对应学校的全量数据，将数据字段导入对应的组件中，并显示在大屏左下角。

  1. 在节点编程配置页面，将左侧学校信息弹窗-L下的单张图片-L、name-L、children-L、address和type这五个节点拖至画布中。

  1. 将公办小学的鼠标移入区域触发事件分别与上一步中添加的五个节点的导入接口动作连线。
  2. 在连线中各添加一个串行数据处理节点，分别命名为logo、name-L、children、address和type。
  3. 将公办初中的鼠标移入区域触发事件分别与上一步中添加的五个串行数据处理节点连线。

  1. 配置串行数据处理节点
  • 单击名称为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":""
}
  • 使用同样的方式，配置其他四个节点，示例代码如下。
    • name-L节点：
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全量数据。

  1. 配置串行数据处理节点，设置临时变量的数据结构。

  • 一号标记：临时变量名。
  • 二号标记：学校对应的ID。
  • 三号标记：学区信息。
  1. 在蓝图编辑器页面，将左侧成交量 > NO.1、成交量 > NO.2和成交量 > NO.3文件夹下的name、average和count共九个节点都拖至画布中。
  2. 将公办小学或公办初中与上一步中拖入的任意一个节点连线。
  3. 在连线中添加串行数据处理节点，并命名为top3。
  4. 按照以下说明完成top3节点的连线。
  5. 在上一步的九条连线中各添加一个串行数据处理节点，分别命名为name-1、count-1、average-1、name-2、count-2、average-2、name-3、count-3和average-3。

连线完成后，结果如下图所示。（此处为部分截图）

  1. 配置串行数据处理节点。
    • 配置top3节点

let res = getLocalValue("sale_detail")[data.id] ? getLocalValue("sale_detail")[data.id].list : [];
return res;
  • 配置name-1节点
return data.length >= 1 ? [
  {
    value: `${data[0].district}区 ${data[0].name}`
  }
] : [{ value: "" }];
  • 配置count-1节点
return data.length >= 1 ? [
  {
    value: `成交量：${data[0].count}`
  }
] : [{ value: "" }];
  • 配置average-1节点
return data.length >= 1 ? [
  {
    value: `平均单价：${(data[0].sumPrice / data[0].area).toFixed(2)}万`
  }
] : [{ value: "" }];
  • 配置name-2节点
return data.length >= 2 ? [
  {
    value: `${data[1].district}区 ${data[1].name}`
  }
] : [{ value: "" }];
  • 配置count-2节点
return data.length >= 2 ? [
  {
    value: `成交量：${data[1].count}`
  }
] : [{ value: "" }];
  • 配置average-2节点
return data.length >= 2 ? [
  {
    value: `平均单价：${(data[1].sumPrice / data[1].area).toFixed(2)}万`
  }
] : [{ value: "" }];
  • 配置name-3节点
return data.length >= 3 ? [
  {
    value: `${data[2].district}区 ${data[2].name}`
  }
] : [{ value: "" }];
  • 配置count-3节点
return data.length >= 3 ? [
  {
    value: `成交量：${data[2].count}`
  }
] : [{ value: "" }];
  • 配置average-3节点
return data.length >= 3 ? [
  {
    value: `平均单价：${(data[2].sumPrice / data[2].area).toFixed(2)}万`
  }
] : [{ value: "" }];
信息

说明 此步骤使用到了节点编程的数据分发功能，详情请参见 如何通过合并请求进行数据分发。

最后一次更新 更新于