线热力层是基础平面地图的子组件,支持独立的样式、数据和交互配置,包括线的颜色、粗细、鼠标交互事件以及位置信息等,能够以热力线的形式表现地理位置上的线路信息,适用于地图上线路图的大屏展示,例如展示地铁线路图。本文档为您介绍线热力层各配置项的含义,帮助您快速准确地使用线热力层子组件。

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

样式



  • 边线选项
    • 颜色:数据value值最大、最小、为空时对应的线的颜色,可参考颜色选择器说明进行修改。处于最大值和最小值之间的线,根据value值映射成最大值到最小值之间的渐变颜色。


      注意 如果数据中设置了 color字段,则线的颜色以 color字段为准。
    • 粗细:热力线的粗细。
    • 虚线:热力线的类型。
  • 交互配置
    • 悬停:单击眼睛图标,可控制悬停交互功能的开启或关闭。开启后可设置悬停颜色和悬停时线的粗细,仅在预览或发布时才能看到效果。
    • 弹窗:勾选后,单击热力线,显示线的详细信息,该信息可在数据的properties属性中进行配置,仅在预览或发布时才能看到效果。
    • 点击聚焦:勾选后,单击热力线,会根据线的位置进行聚焦,仅在预览或发布时才能看到效果。
    • 聚焦范围比:热力线的聚焦范围比,仅当勾选了点击聚焦配置项,且在预览或发布页面时才能看到效果。
    • 回调ID:设置组件之间数据联动的变量,需要配置为数据中的某一个字段。
      注意 此功能已更新到 交互面板中, 样式面板的该功能将弃用,请尽快升级。新版本的交互功能支持配置多个字段。

数据

该组件需要配置两个数据源, 矢量线数据映射数据

  • 矢量线数据:geojson 类型的数据,要求类型为 LineString。如果需要跟映射数据对应,必须保证有唯一的 link_id 或者 id 字段。关于geojson的标准可以参考http://geojson.org/geojson-spec.html
    可单击此处下载上图中的示例JSON代码,本文仅提供一个简单的代码示例,如下所示:
    {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "link_id": 1,
          "name": "test"
        },
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [
              109.4677734375,
              41.409775832009565
            ],
            [
              117.46582031249999,
              36.31512514748051
            ],
            [
              118.828125,
              32.0639555946604
            ],
            [
              114.9169921875,
              27.566721430409707
            ]
          ]
        }
      }
    ]
    }
    说明 properties字段对应样式面板中的弹窗信息,您可以自定义该字段值进行配置。
  • 映射数据

    上图中的示例JSON代码如下:
    [
      {
        "link_id": 1,
        "value": 1,
        "color": "#ED3229"
      },
      {
        "link_id": 2,
        "value": 1,
        "color": "#36B854"
      },
      {
        "link_id": 3,
        "value": 1,
        "color": "#FFD823"
      },
      {
        "link_id": 4,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 5,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 6,
        "value": 1,
        "color": "#823094"
      },
      {
        "link_id": 7,
        "value": 1,
        "color": "#CF047A"
      },
      {
        "link_id": 8,
        "value": 1,
        "color": "#F3560F"
      }
    ]
    • link_id:线关联id,通过该字段,与矢量线数据进行对应。
    • value:线的权重值,是配置面板中设置最大值、最小值、空值颜色的依据。
    • info:(可选)弹窗内容,如果为空,则弹窗信息显示为对应的矢量线数据中的properties字段的内容。如果不为空,弹窗信息显示为info字段的内容。
    • color:(可选)线热力层支持数据优先的渲染,如果您配置了color(线颜色)、weight(线宽)、dashArray(虚线)等字段,那么会优先使用这些属性来对关联的线进行渲染,如下图所示。

交互

勾选 启用,开启组件交互功能。线热力层子组件拥有交互配置,可单击某个热力线抛出回调值,默认抛出数据中的 link_id字段。具体配置请参考组件回调ID配置