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

HexagonLayer 蜂窝热力图层 最后更新时间: 2021年01月22日

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

已下为示例代码:

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

Array/Function

必填

热力颜色填充。数组或者函数回调,

例如:

 ['red', 'yellow', 'blue'] 或者 function(data){

    return 'red';

}

opacity

Array

[0, 1]

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

text

TextOption

无

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

同 Loca.Layer 接口

Text Options

Options

类型

默认值

说明

content

String/Function/<Attr options>

无

文字内容

其他属性同 Loca.LablesLayer Text Options


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