开发 数据可视化 JS API v1.2 参考手册 VisualLayer 热力类型

VisualLayer 热力类型 最后更新时间: 2021年04月21日

该篇文档主要介绍 type 为「热力图 heatmap」类型的 VisualLayer 配置项。

热力图类型包含:基本热力、正四边形热力、蜂窝热力、行政分级统计热力图,因此该文档只列出属于这四种类型的属性,其他通用配置请参考 通用配置


使用范例

var heatmap = Loca.visualLayer({
    // 指定 Loca 容器
    container: locaMap,
    // 指定热力类型
    type: 'heatmap',
    // 基本热力图
    shape: 'normal'
});

// 热力数据的坐标结构同 Point 类型
var arr = [
    { center: [116.191031, 39.988585], count: 10 },
    // ...
];

heatmap.setData(arr, {
    lnglat: 'center',
    // 指定热力权重所依赖的数据列名
    value: 'count'
});

heatmap.setOptions({
    style: {
        // 热力半径,单位像素
        radius: 10,
        // 基本热力 color 数据为 key-value 值对形式
        color: {
            0.5: '#2c7bb6',
            0.65: '#abd9e9',
            0.7: '#ffffbf',
            0.9: '#fde468',
            1.0: '#d7191c'
        }
    }
});

heatmap.render();
var heatmap = Loca.visualLayer({
    // 指定 Loca 容器
    container: locaMap,
    // 指定热力类型
    type: 'heatmap',
    // 蜂窝热力
    shape: 'hexagon'
});

// 热力数据的坐标结构同 Point 类型
var arr = [
    { center: [116.191031, 39.988585], count: 10 },
    // ...
];

heatmap.setData(arr, {
    lnglat: 'center',
    // 指定热力权重所依赖的数据列名
    value: 'count'
});

heatmap.setOptions({
    // 热力半径单位,meter 为米。默认像素 px
    unit: 'meter',
    // 数据聚合模式,count 为计数模式
    mode: 'count',
    style: {
        // 蜂窝热力半径
        radius: 1000,
        // 正四边形 / 蜂窝 color 数据为数组形式
        color:  ['#ecda9a', '#efc47e', '#f3ad6a', '#f7945d', '#f97b57', '#f66356', '#ee4d5a']
    }
});

heatmap.render();
var heatmap = Loca.visualLayer({
    // 指定 Loca 容器
    container: locaMap,
    // 指定热力类型
    type: 'heatmap',
    // 行政分级统计图
    shape: 'district'
});

// 热力数据的坐标结构同 Point 类型
var arr = [
    { center: [116.191031, 39.988585], count: 10 },
    // ...
];

heatmap.setData(arr, {
    lnglat: 'center',
    // 指定热力权重所依赖的数据列名
    value: 'count'
});

heatmap.setOptions({
    // 数据聚合模式,count 为计数模式
    mode: 'count',
    // 指定行政区 adcode,默认全国 100000
    adcode: 100000,
    style: {
        // 正四边形 / 蜂窝 color 数据为数组形式
        color:  ['#ecda9a', '#efc47e', '#f3ad6a', '#f7945d', '#f97b57', '#f66356', '#ee4d5a']
    }
});

heatmap.render();


1. 构造函数

构造函数/工厂方法

说明

new Loca.VisualLayer(<LayerOptions> options)

创建可视化图层。

通用配置

Loca.visualLayer(<LayerOptions> optitons)

LayerOptions 

图层配置

类型

默认值

说明

type

string

必填

热力类型 heatmap

shape

string

必填

图层显示的形状类型,具体形状和 type 类型有关联。

基本热力图 normal

正四边形热力图 rectangle

蜂窝热力图 hexagon

行政区分级统计热力图 disctrict

container

通用配置

eventSupport

fitView

zIndex

2. 基本方法

以下未列出的属性见 通用配置

方法

返回

说明

setData(<Array> data,

 <DataOptions> options?)

通用配置

setOptions(<VisualOptions> options)

render()

setFitView()

setZIndex(<number> zIndex)

destroy()

DataOptions

数据属性

类型

默认值

说明

lnglat

string

Function

必填

指定坐标数据所在的列名,或者通过自定义函数返回符合格式要求的坐标。

坐标格式同点类型 Point,为字符串 "lng, lat" 和数组 [lng, lat] 形式,经度在前,维度在后,使用字符串的用英文逗号分隔。

value

string

必填

计算热力权重所依赖的数据列名,要求数据为数值型,否则会被强制转换为数值型。

type

string

json

数据格式,默认 JSON 格式,支持格式还有 CSV,TSV。

VisualOptions

可视化属性

类型

默认值

支持该属性的类型

说明

style

StyleOptions

必填

通用

图形显示样式配置项,具体属性请看下表的 StyleOptions。

selectStyle

StyleOptions

选填

基础热力 normal 不支持

其他热力图通用

选中态样式,鼠标悬浮时触发的样式,该属性会和 style 进行合并,因此只需设置需要变化的属性即可,无变化的属性无需设置。

该属性的前提是需要设置 eventSupport 为 true,以保证鼠标事件可以被触发。

selectStyle 仅支持固定样式,不支持AttrOptions类型动态样式。

另外,「基础热力」暂时不支持选中样式设置。

参考示例

unit

string

px

基础热力 normal 不支持

其他热力图通用

图形长度单位,默认像素。支持:米 meter 和像素 px。

可影响 StyleOptions 中的属性有: radius、size。

蜂窝热力如果设置像素单位,每次缩放都会重新分箱计算数据,这点需要特别注意。

参考示例

mode

string

count

热力类型通用

热力数据聚合后的计算方式。

默认为计数 count,还支持最大值 max、最小值 min、算数加和 sum、平均数 mean、中位数 median


举例说明:当前一个蜂窝由如下三条数据聚合而成,

[{ name:'a', val: 10 }, { name:'b', val: 20 }, { name:'c', val: 60 }],

那么 count 下当前热力权重为 3(数据个数),max 为 60,min 为 10,sum 为 90,mean 为 30,median 为 20。

adcode

string

100000

行政分级统计 disctrict

设置需要统计城市的 adcode, 仅限行政分级统计图有效。

默认将数据在全国范围(adcode=100000)内按照省份进行聚合。如果指定 adcode 为省份或城市,则按照该 adcode 的下一级行政区进行聚合。

例如:adcode = 110000 时,则按照北京的各个区进行热力聚合。adcode=440000时,则按照广东的各个地级行政市进行热力聚合。

行政区编码与城市编码表下载

displayBlank

boolean

false

行政分级统计 disctrict

无数据的行政区是否显示颜色,仅限行政分级统计图有效。

默认 false,即无数据时不显示填充颜色。设置 true 时,可由 style.blankFill 设置统一的填充颜色。

StyleOptions  

样式配置

类型

默认值

支持该属性的类型

说明

radius

number

0

基本热力 normal

蜂窝热力 hexagon

正四边形热力 rectangle

热力半径。

基本热力 shape = normal 时,为热力半径。

蜂窝热力 shape = hexagon 时,为六边形的半径。

正四边形热力 shape = rectangle 时,为四边形边长的 1/2。

height

number

[number, number]

[0, 50000]

蜂窝热力 hexagon

正四边形热力 rectangle

热力棱柱的高度,单位 3D 模式下,20级下的像素大小。

支持 number 格式:为棱柱设置统一高度。

和 Array<number, number> 格式:根据聚合后的数据为棱柱设置高度范围[最小高度, 最大高度]。

color

Object<number: string>

Array<string>


通用

热力图形填充颜色,不同热力的颜色格式如下:


1. 基本热力颜色格式仅为 Object<number[0-1]: string>。例如

color: {

  0: "#eff3ff",

  0.2: "#c6dbef",

  0.4: "#9ecae1",

  0.6: "#6baed6",

  0.8: "#3182bd",

  1.0: "#08519c"

}

其中热力的颜色会按照如上配置分布,会出现颜色随着数据渐变过度。


2. 蜂窝、正四边形、行政热力类型颜色格式仅为Array<string>。例如

color: [

    "#eff3ff",

    "#c6dbef",

    "#9ecae1",

    "#6baed6",

    "#3182bd",

    "#08519c"

]

其中颜色会严格落在配置的几种颜色中,不会出现颜色间的过度。

其他类型颜色的映射使用 分位数quantile 算法就行计算,分割的数据区间根据数据及颜色数量的不同而不同。


蜂窝、正四边形热力可以通过 updatelegend 事件获取数据与颜色的映射数据,可以借此来绘制对应的数据图例。

除上面两种热力外,其他热力图暂未提供 updatelegnd 事件。

opacity

number

1

通用

图形透明度,透明度范围 0 至 1。

gap

number

0

蜂窝热力 hexagon

正四边形热力 rectangle

设置蜂窝、四边形的空白间隔。

为了增强显示效果,以方便区分相邻的两个热力块。

建议设置的 gap 为 radius 的 1/10,这样可以达到留白效果,已方便区分不同色块的目的。

3. 图层事件

图层事件包含鼠标、触摸等作用于 VisualLayer 上的图形的交互事件。同 通用属性

需要注意的是:基本热力图不支持鼠标交互事件 和 selectStyle 样式的配置。


事件中回调 Event 参数介绍:

Event

类型

可支持的热力类型

说明

value

number

hexagon 

rectangle 

discrtict 

聚合后的热力数据值

lngLat

[lng, lat]

hexagon

rectangle

聚合后的热力中心坐标

rawData

Array

hexagon 

rectangle 

district

当前聚合点所包含的原始数据

indexes

Array<number>

hexagon 

rectangle 

district

当前聚合点所包含的原始数据索引

参考示例

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