示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.

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

更新时间:2019年05月20日

该图层使用基本热力图的方式展示点数据,并通过热力颜色展示数据权重。

以下为示例代码:

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


新用户
福利
功能
在线体验
常见
问题