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( | 创建可视化图层。 同 通用配置。 |
Loca.visualLayer( |
LayerOptions 图层配置 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string | 必填 | 热力类型 |
shape | string | 必填 | 图层显示的形状类型,具体形状和 基本热力图 正四边形热力图 蜂窝热力图 行政区分级统计热力图 |
container | 同 通用配置。 | ||
eventSupport | |||
fitView | |||
zIndex |
2. 基本方法
以下未列出的属性见 通用配置
方法 | 返回 | 说明 |
---|---|---|
setData( | 同 通用配置。 | |
setOptions( | ||
render() | ||
setFitView() | ||
setZIndex( | ||
destroy() |
DataOptions 数据属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
lnglat | string Function | 必填 | 指定坐标数据所在的列名,或者通过自定义函数返回符合格式要求的坐标。 坐标格式同点类型 Point,为字符串 |
value | string | 必填 | 计算热力权重所依赖的数据列名,要求数据为数值型,否则会被强制转换为数值型。 |
type | string | json | 数据格式,默认 JSON 格式,支持格式还有 CSV,TSV。 |
VisualOptions 可视化属性 | 类型 | 默认值 | 支持该属性的类型 | 说明 |
---|---|---|---|---|
style | StyleOptions | 必填 | 通用 | 图形显示样式配置项,具体属性请看下表的 StyleOptions。 |
selectStyle | StyleOptions | 选填 | 基础热力 normal 不支持 其他热力图通用 | 选中态样式,鼠标悬浮时触发的样式,该属性会和 style 进行合并,因此只需设置需要变化的属性即可,无变化的属性无需设置。 该属性的前提是需要设置 eventSupport 为 true,以保证鼠标事件可以被触发。 selectStyle 仅支持固定样式,不支持 另外,「基础热力」暂时不支持选中样式设置。 |
unit | string | px | 基础热力 normal 不支持 其他热力图通用 | 图形长度单位,默认像素。支持:米 meter 和像素 px。 可影响 StyleOptions 中的属性有: radius、size。 蜂窝热力如果设置像素单位,每次缩放都会重新分箱计算数据,这点需要特别注意。 |
mode | string | count | 热力类型通用 | 热力数据聚合后的计算方式。 默认为计数 举例说明:当前一个蜂窝由如下三条数据聚合而成, [{ 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. 基本热力颜色格式仅为 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 | 当前聚合点所包含的原始数据索引 |