HeatmapLayer 热力图层 最后更新时间: 2021年01月22日
该图层使用基本热力图的方式展示点数据,并通过热力颜色展示数据权重。
以下为示例代码:
const map = new AMap.Map('container');
const layer = new Loca.HeatmapLayer({
map: map
});
layer.setData(heatdata, {
lnglat: 'lnglat'
});
layer.setOptions({
style: {
// 热力半径,单位:像素
radius: 30,
opacity: [0.1, 0.8],
// 颜色范围
color: {
1: '#f0f9e8',
0.8: '#bae4bc',
0.6: '#7bccc4',
0.4: '#43a2ca',
0.2: '#0868ac',
}
}
});
// 渲染
layer.render();
1. 构造函数
构造函数 | 说明 |
---|---|
Loca.HeatmapLayer(<LayerOptions> options) | 创建可视化图层 |
未列出参数,同 Loca.Layer
2. 基本方法
操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。
未列出接口,同 Loca.Layer
DataSet Options 数据配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
value | string | 必填 | 指定热力映射的字段名 |
同 Loca.Layer 接口 |
Visual Options 样式配置
Options | 类型 | 默认值 | 说明 |
---|---|---|---|
同 Loca.Layer 接口 |
Style Options
Options | Type | Default | Description |
---|---|---|---|
radius | number/Function/<Attr options> | 0 | 热力半径,单位:像素。 |
color | Object | 必填 | 热力颜色填充。key-value结构, 例如: { 0.1: ‘blue’, 0.5: ‘yellow’, 0.9: ‘red’ }。 |
opacity | Array | [0, 1] | 透明度范围,最冷到最热的透明度过度区间。 |
同 Loca.Layer 接口 |