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

高德 开发 数据可视化 JS API 可视化图层 GridLayer 网格热力图层

更新时间:2019年07月02日

使用网格热力图展示点数据,并通过热力颜色展示数据权重,半径单位:米。

以下为示例代码:

const map = new AMap.Map('container');

const layer = new Loca.GridLayer({
    map: map
});

layer.setData(heatdata, {
    lnglat: 'lnglat'
});

layer.setOptions({
    style: {
        // 网格热力半径,单位:米
        radius: 300,
        opacity: [0.1, 0.8],
        // 热力聚合模式,count 为点数量加和
        mode: 'count',  // 聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数)
        // 颜色范围
        color: [
           '#f0f9e8',
           '#bae4bc',
           '#7bccc4',
           '#43a2ca',
           '#0868ac',
        ],
        text: {
            content: '文字',  // 文字内容
            direction: 'center',  // 文字方位 
            offset: [10, -10],  // 偏移大小
            fontSize: 16,  // 文字大小
            fillColor: '#E67E22',  //文字颜色
            strokeColor: "rgba(255,255,255,0.85)",  // 文字描边颜色
            strokeWidth: 1,  // 文字描边宽度
        }
    }
});

// 渲染
layer.render();

1. 构造函数

构造函数

说明

Loca.GridLayer(<LayerOptions> options)

创建可视化图层

未列出参数,同 Loca.Layer

2. 基本方法

操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。

未列出接口,同 Loca.Layer


DataSet Options 数据配置

Options

类型

默认值

说明

value

string

必填

指定热力映射的字段名

Loca.Layer 接口


Visual Options 样式配置

Options

类型

默认值

说明

mode

String

'count'

聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数)

Loca.Layer 接口

Style Options

Options

Type

Default

Description

radius

number/Function/<Attr options>

0

网格热力半径,单位:米

gap

number

0

网格间距,单位:米

color

Object

必填

热力颜色填充。key-value结构,

例如:

 { 

    0.1: ‘blue’, 

    0.5: ‘yellow’,

    0.9: ‘red’

 }。

opacity

Array

[0, 1]

透明度范围,最冷到最热的透明度过度区间。

text

Text Options

四边形网格文字标注配置。

Loca.Layer 接口

Text Options 文字标注配置

Options

类型

默认值

说明

content

String/Function

文字内容

其他属性同 Loca.LabelsLayer TextOptions


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