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

高德 开发 数据可视化 JS API 可视化图层 HexagonLayer 蜂窝热力图层

更新时间:2019年07月02日

使用网格热力图展示点数据,并通过热力颜色展示数据权重。

已下为示例代码:

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

const layer = new Loca.HexagonLayer({
    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.HexagonLayer(<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

类型

默认值

说明

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

TextOption

每个蜂窝网格可以新增文字标注,文字配置和 LablesLayer 相同。

Loca.Layer 接口

Text Options

Options

类型

默认值

说明

content

String/Function/<Attr options>

文字内容

其他属性同 Loca.LablesLayer Text Options


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