参考地图容器添加区域热力层子组件,并配置其参数。

样式



  • 标注
    • 标注字段:需要与地理数据中字段名称匹配。
    • 颜色:参考颜色选择器说明,修改标注的颜色。
    • 阴影色:参考颜色选择器说明,修改标注的阴影色。
    • 字体:单击下拉框,选择标注的字体。
      说明 请选择您系统中的字体,如果您的系统中没有所选的字体,标注会使用默认字体。
    • 字号:单击+-号或手动输入数值,调整标注文字的大小。
  • 填充颜色:参考颜色选择器说明,修改数据中最大、最小及为空的 value 值对应区域的颜色。
  • 边线选项:修改区域热力层各区域边线的颜色、粗细和线型。
  • 交互配置
    • 悬停颜色:参考颜色选择器说明,修改鼠标悬停区域的颜色,仅在预览或发布时可以看到效果。
    • 点击聚焦:勾选后,启动点击聚焦功能。
    • 聚焦范围比:拖动滑块或手动输入数值,修改所点击区域的聚焦范围。
    • 回调 ID:设置组件回调 ID 的变量。
      说明 此功能已更新到 交互面板中, 样式面板的该功能将弃用,请尽快升级。新版本的交互功能支持配置多个字段。

数据

  • 区域面:通过配置区域面数据,可将提取到的区域 GeoJSON 边界数据应用到 DataV 中,配置方法如下:
    1. 选择区域热力层 > 数据 > 区域面
    2. 选择数据源类型API
    3. 获取区域边界数据的 GeoJSON API,粘贴到数据输入区,如下图所示。

    4. 发布大屏项目,可以看到配置的区域热力层。
    在数据配置的过程中,可能会出现 区域文字标注有偏移的问题,解决方法如下:
    • 查看下您的区域热力层版本,目前可以使用的区域热力层组件包括区域热力层 v0.2.4 及以上版本。如果您使用的区域热力层版本较低,需要先删除该层,再重新添加。
    • 您提取到的数据已更新,请使用最新的区域数据。
    • 修改参数:
      1. 通过 geojson.io 工具,在您区域边界数据的 API 中添加 customLabelPosition 属性参数。
        在数据源中找到文字偏移区域的 properties 参数,添加自定义 customLabelPosition 属性,如 "customLabelPosition": [112.500801,22.927694]

      2. 将修改后的 API 保存到您的服务器上。
      3. 选择 区域热力层 > 数据 > 区域面
      4. 选择数据源类型API
      5. 将修改后的 JSON API 地址粘贴到数据输入区。
  • 映射数据:您可以通过配置映射数据,自定义区域热力层的样式。区域热力层支持数据优先渲染。
    1. 选择 区域热力层 > 数据 > 映射数据
    2. 选择数据源类型静态数据,参数说明如下:

      • area_id:区域的 adcode。
      • value:表示地区的值。与样式面板中填充颜色的最大最小值配置配合使用,可控制对应区域的颜色。
        说明 根据数据的 value 区间得出 scale 区间,从而计算从最大到最小的颜色渐变区间。
      • info:弹窗内容,为可选参数。
    3. 在数据源中配置 color(线颜色)、weight(线宽)、dashArray(虚线)、fillColor(填充颜色)等字段。

      地图中对应的区域将根据您设置的参数进行渲染。其中 fillColor 支持 red#fff000rgba(0,256,0,0.5) 三种形式设置参数。

交互

区域被点击触发:勾选启用,开启组件交互功能。区域热力层子组件拥有交互配置,可单击某个区域,触发数据请求,抛出回调值,实现在单击某个区域时,动态加载不同区域的数据。

默认抛出所单击区域的 area_id 值,具体配置请参考组件回调 ID 配置