mirror of https://gitee.com/antv-l7/antv-l7
205 lines
4.2 KiB
Markdown
205 lines
4.2 KiB
Markdown
---
|
||
title: HeatmapLayer
|
||
order: 5
|
||
---
|
||
|
||
# heatmapLayer
|
||
|
||
|
||
### 简介
|
||
|
||
热力图图层，包含三种类型的，
|
||
- 方格热力图
|
||
|
||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||
|
||
- 六边形热力图
|
||
|
||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||
|
||
- 经典热力图
|
||
|
||
|
||
|
||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
|
||
|
||
### source
|
||
|
||
热力图只支持点数据作为数据源
|
||
|
||
布局方法 通过source的 tansforms属性配置
|
||
|
||
- type 数据聚合类型 grid、hexagon
|
||
- size 网格半径 单位 米
|
||
- field 聚合字段
|
||
- method 聚合方法 count,max,min,sum,mean5个统计维度
|
||
|
||
```javascript
|
||
|
||
layer.source(data, {
|
||
parser: {
|
||
type: 'csv',
|
||
x: 'lng',
|
||
y: 'lat'
|
||
},
|
||
transforms:[
|
||
{
|
||
type: 'grid',
|
||
size: 15000,
|
||
field:'v',
|
||
method:'sum'
|
||
}
|
||
],
|
||
}
|
||
```
|
||
|
||
### shape
|
||
|
||
不同类型热力图shape支持
|
||
|
||
| | 2D | 3d |
|
||
| --- | --- | --- |
|
||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||
| 普通热力图 | heatmap | heatmap |
|
||
|
||
|
||
热力图布局下只shape方法只支持常量的可视化。
|
||
|
||
```javascript
|
||
HeatmapLayer.shape('square');
|
||
HeatmapLayer.shape('hexagon');
|
||
// 默认类型可以不设置
|
||
```
|
||
|
||
### size
|
||
当前版本 shape 为grid，hexagon不需要设置 size 映射
|
||
|
||
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||
|
||
**size(field,values) **
|
||
|
||
- field: 热力图权重字段
|
||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||
|
||
```javascript
|
||
HeatmapLayer.size ('field', [0, 1])
|
||
```
|
||
|
||
|
||
### color
|
||
default heatMap 类型不需设置 color映射
|
||
|
||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
||
|
||
|
||
|
||
### style
|
||
|
||
grid hexagon 可以通过style 设置透明度
|
||
|
||
default热力图需要通过style配置参数热力图参数
|
||
|
||
- intensity 全局热力权重 推荐权重范围 1-5
|
||
- radius 热力半径，单位像素
|
||
- rampColors 色带参数
|
||
- colors 颜色数组
|
||
- positions 数据区间
|
||
|
||
```javascript
|
||
HeatmapLayer.style({
|
||
intensity: 3,
|
||
radius: 20,
|
||
rampColors: {
|
||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||
}
|
||
})
|
||
```
|
||
|
||
|
||
### 完整代码示例
|
||
|
||
#### 普通热力图
|
||
|
||
```javascript
|
||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||
|
||
HeatmapLayer({
|
||
zIndex: 2
|
||
})
|
||
.source(data)
|
||
.size('mag', [ 0, 1 ]) // weight映射通道
|
||
.style({
|
||
intensity: 3,
|
||
radius: 20,
|
||
rampColors: {
|
||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||
}
|
||
})
|
||
```
|
||
|
||
|
||
|
||
#### 网格热力图
|
||
|
||
```javascript
|
||
var layer = scene.HeatmapLayer({
|
||
zIndex: 2
|
||
})
|
||
.source(data, {
|
||
parser: {
|
||
type: 'csv',
|
||
x: 'lng',
|
||
y: 'lat'
|
||
},
|
||
transforms:[
|
||
|
||
{
|
||
type: 'grid',
|
||
size: 15000,
|
||
field:'v',
|
||
method:'sum'
|
||
}
|
||
]
|
||
})
|
||
.shape('grid')
|
||
.style({
|
||
coverage: 0.8
|
||
})
|
||
.color('count',
|
||
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||
|
||
```
|
||
|
||
|
||
#### 六边形热力图
|
||
|
||
```javascript
|
||
var layer = scene.HeatmapLayer({
|
||
zIndex: 2
|
||
}).
|
||
souce(data,{
|
||
parser:{
|
||
type:'csv',
|
||
x:lng,
|
||
y:lat,
|
||
},
|
||
transforms:[
|
||
{
|
||
type:'hexgon',
|
||
size:1500,
|
||
field:'count',
|
||
operation: 'sum',
|
||
}
|
||
]
|
||
})
|
||
.shape('hexgon')
|
||
.size(1000)
|
||
.color('sum')
|
||
.style({
|
||
coverage:0.8
|
||
})
|
||
render()
|
||
``` |