开发 数据可视化 JS API 可视化图层 HeatmapLayer 热力图层

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 接口


返回顶部 示例中心 常见问题 智能客服 公众号
二维码