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

- 边线选项
- 颜色:数据value值最大、最小、为空时对应的线的颜色,可参考颜色选择器说明进行修改。处于最大值和最小值之间的线,根据value值映射成最大值到最小值之间的渐变颜色。
注意 如果数据中设置了 color字段,则线的颜色以 color字段为准。 - 粗细:热力线的粗细。
- 虚线:热力线的类型。
- 颜色:数据value值最大、最小、为空时对应的线的颜色,可参考颜色选择器说明进行修改。处于最大值和最小值之间的线,根据value值映射成最大值到最小值之间的渐变颜色。
- 交互配置
- 悬停:单击眼睛图标,可控制悬停交互功能的开启或关闭。开启后可设置悬停颜色和悬停时线的粗细,仅在预览或发布时才能看到效果。
- 弹窗:勾选后,单击热力线,显示线的详细信息,该信息可在数据的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(虚线)等字段,那么会优先使用这些属性来对关联的线进行渲染,如下图所示。