实现传递动态参数

本文为您介绍,如何在请求数据接口时传递动态参数,实现Tab列表和基础平面地图下的区域热力层联动。

效果展示2024-12-05_11-15-26

操作步骤

  1. 登录DataV控制台

  2. 选择任一数据看板,单击编辑,进入画布编辑器页面。

  3. 添加Tab列表组件和基础平面地图组件到画布中。

  4. 单击Tab列表组件,选择数据源面板,修改静态数据。

    [
      {
        "id": 1,
        "content": "610000"
      },
      {
        "id": 2,
        "content": "330000"
      },
      {
        "id": 3,
        "content": "320000"
      }
    ]
  5. 选择全局变量页签,单击新建变量,重命名为code

  6. 单击基础平面地图组件下的区域热力层子组件,选择数据源面板下的地理边界geojson数据接口,设置数据源为API,输入URL地址。image.png

    https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=:code//使用全局变量code替换":code"
  7. 切换到蓝图编辑器。

  8. 将区域热力层节点、Tab列表节点、全局变量节点和逻辑节点页签下的1个串行数据处理节点添加到蓝图主画布中。

  9. 连接组件。image.png

  10. 配置串行数据处理节点的处理方法。

    return data.content;
  11. 单击页面右上角的预览图标,预览展示结果。2024-12-05_11-15-26