mirror of https://gitee.com/antv-l7/antv-l7
docs(layer): udpate heatmaplayer docs
This commit is contained in:
thinkinggis
parent
f5a22b208b
commit
eeb6905d0b
|
|
@ -6,31 +6,49 @@ order: 10
|
||||||
## 2020.01.06 2.0 正式版
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
###✨ Features
|
###✨ Features
|
||||||
|
|
||||||
• 新增弧线图，路径图动画功能
|
• 新增弧线图，路径图动画功能
|
||||||
|
|
||||||
• 新增气泡图水波动画功能
|
• 新增气泡图水波动画功能
|
||||||
|
|
||||||
• 新增聚合地图
|
• 新增聚合地图
|
||||||
|
|
||||||
• 新增文本标注，支持避让
|
• 新增文本标注，支持避让
|
||||||
|
|
||||||
• 新增城市建筑图层
|
• 新增城市建筑图层
|
||||||
|
|
||||||
• 新增栅格地图，支持卫星遥感数据可视化
|
• 新增栅格地图，支持卫星遥感数据可视化
|
||||||
|
|
||||||
• 新增图层交互事件
|
• 新增图层交互事件
|
||||||
|
|
||||||
### 🍏 Improvements
|
### 🍏 Improvements
|
||||||
|
|
||||||
• Marker 支持事件和自定义数据
|
• Marker 支持事件和自定义数据
|
||||||
|
|
||||||
• 弧线支持虚线样式
|
• 弧线支持虚线样式
|
||||||
|
|
||||||
• 面图层支持，文本标注，气泡图效果
|
• 面图层支持，文本标注，气泡图效果
|
||||||
|
|
||||||
• 重构了文档结构
|
• 重构了文档结构
|
||||||
|
|
||||||
• source 支持 map,join,filter 数据处理支持
|
• source 支持 map,join,filter 数据处理支持
|
||||||
|
|
||||||
• source 支持数据更新
|
• source 支持数据更新
|
||||||
|
|
||||||
• 支持 blend 效果配置
|
• 支持 blend 效果配置
|
||||||
|
|
||||||
• 支持通过地图实例初始化地图
|
• 支持通过地图实例初始化地图
|
||||||
|
|
||||||
• 官网新增所有图表概览页面
|
• 官网新增所有图表概览页面
|
||||||
|
|
||||||
### 🐞 Bug Fixes
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
• 修复容器 resize 不能正常响应
|
• 修复容器 resize 不能正常响应
|
||||||
|
|
||||||
• 修复 babel 打包问题
|
• 修复 babel 打包问题
|
||||||
|
|
||||||
• 修复地图组件加载报错问题
|
• 修复地图组件加载报错问题
|
||||||
|
|
||||||
• 修复样式配置 strokeColor- stroke
|
• 修复样式配置 strokeColor- stroke
|
||||||
|
|
||||||
## 2019.11.22 2.0beta
|
## 2019.11.22 2.0beta
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,9 @@ Marker 地图标注 目前只支持 2D dom 标注
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
|
||||||
Marker<br />`const Marker = new L7.Marker(option)`
|
Marker
|
||||||
|
|
||||||
|
`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
#### option
|
#### option
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: GridHeatMapLayer
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||||
|
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 grid
|
||||||
|
- 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
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||||
|
|
||||||
|
#### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(circle);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(cylinder);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
### color
|
||||||
|
|
||||||
|
同layer [color方法](../layer/#color)
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 完整实例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = new HeatmapLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 20000,
|
||||||
|
field: 'v',
|
||||||
|
method: 'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.shape('square')
|
||||||
|
.style({
|
||||||
|
coverage: 1,
|
||||||
|
angle: 0
|
||||||
|
})
|
||||||
|
.color(
|
||||||
|
'count',
|
||||||
|
[
|
||||||
|
'#0B0030',
|
||||||
|
'#100243',
|
||||||
|
'#100243',
|
||||||
|
'#1B048B',
|
||||||
|
'#051FB7',
|
||||||
|
'#0350C1',
|
||||||
|
'#0350C1',
|
||||||
|
'#0072C4',
|
||||||
|
'#0796D3',
|
||||||
|
'#2BA9DF',
|
||||||
|
'#30C7C4',
|
||||||
|
'#6BD5A0',
|
||||||
|
'#A7ECB2',
|
||||||
|
'#D0F4CA'
|
||||||
|
].reverse()
|
||||||
|
);
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -2,3 +2,147 @@
|
||||||
title: 网格热力图
|
title: 网格热力图
|
||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||||
|
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 grid
|
||||||
|
- 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
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||||
|
|
||||||
|
#### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(circle);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(cylinder);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
## 完整实例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
onst layer = new HeatmapLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 20000,
|
||||||
|
field: 'v',
|
||||||
|
method: 'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.shape('square')
|
||||||
|
.style({
|
||||||
|
coverage: 1,
|
||||||
|
angle: 0
|
||||||
|
})
|
||||||
|
.color(
|
||||||
|
'count',
|
||||||
|
[
|
||||||
|
'#0B0030',
|
||||||
|
'#100243',
|
||||||
|
'#100243',
|
||||||
|
'#1B048B',
|
||||||
|
'#051FB7',
|
||||||
|
'#0350C1',
|
||||||
|
'#0350C1',
|
||||||
|
'#0072C4',
|
||||||
|
'#0796D3',
|
||||||
|
'#2BA9DF',
|
||||||
|
'#30C7C4',
|
||||||
|
'#6BD5A0',
|
||||||
|
'#A7ECB2',
|
||||||
|
'#D0F4CA'
|
||||||
|
].reverse()
|
||||||
|
);
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,219 +0,0 @@
|
||||||
---
|
|
||||||
title: HeatmapLayer
|
|
||||||
order: 0
|
|
||||||
---
|
|
||||||
|
|
||||||
# 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();
|
|
||||||
```
|
|
||||||
|
|
@ -1,219 +0,0 @@
|
||||||
---
|
|
||||||
title: HeatmapLayer
|
|
||||||
order: 0
|
|
||||||
---
|
|
||||||
|
|
||||||
# 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();
|
|
||||||
```
|
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
---
|
||||||
|
title: Hexagon HeatMap
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||||
|
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 hexagon
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||||
|
|
||||||
|
#### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(circle);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(cylinder);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer =
|
||||||
|
new HeatmapLayer({
|
||||||
|
zIndex: 2,
|
||||||
|
})
|
||||||
|
.souce(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: lng,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 1500,
|
||||||
|
field: 'count',
|
||||||
|
operation: 'sum',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.shape('hexagon')
|
||||||
|
.color('sum')
|
||||||
|
.style({
|
||||||
|
coverage: 0.8,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -2,3 +2,131 @@
|
||||||
title: 蜂窝热力图
|
title: 蜂窝热力图
|
||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||||
|
|
||||||
|
## source
|
||||||
|
|
||||||
|
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 hexagon
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||||
|
|
||||||
|
#### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(circle);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape(cylinder);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer =
|
||||||
|
new HeatmapLayer({
|
||||||
|
zIndex: 2,
|
||||||
|
})
|
||||||
|
.souce(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: lng,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 1500,
|
||||||
|
field: 'count',
|
||||||
|
operation: 'sum',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.shape('hexagon')
|
||||||
|
.color('sum')
|
||||||
|
.style({
|
||||||
|
coverage: 0.8,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
---
|
||||||
|
title: 经典热力图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
## shape
|
||||||
|
常量 heatmap
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('heatmap');
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
- field: 热力图权重字段
|
||||||
|
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.size('weight', [0,1])
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
heatmap 需要设置color 方法，样式通过style 设置
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- intensity 全局热力权重 推荐权重范围 1-5
|
||||||
|
- radius 热力半径，单位像素
|
||||||
|
- rampColors 色带参数
|
||||||
|
- colors 颜色数组
|
||||||
|
- positions 数据区间
|
||||||
|
|
||||||
|
:warning: color, position 的长度要相同
|
||||||
|
|
||||||
|
## 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
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],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -2,3 +2,61 @@
|
||||||
title: 经典热力图
|
title: 经典热力图
|
||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## shape
|
||||||
|
常量 heatmap
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('heatmap');
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
- field: 热力图权重字段
|
||||||
|
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.size('weight', [0,1])
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
heatmap 需要设置color 方法，样式通过style 设置
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- intensity 全局热力权重 推荐权重范围 1-5
|
||||||
|
- radius 热力半径，单位像素
|
||||||
|
- rampColors 色带参数
|
||||||
|
- colors 颜色数组
|
||||||
|
- positions 数据区间
|
||||||
|
|
||||||
|
:warning: color, position 的长度要相同
|
||||||
|
|
||||||
|
## 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
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],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### cluster 可选 可以只设置 cluster
|
### cluster ``boolean` 可选 可以只设置
|
||||||
|
|
||||||
### clusterOption 可选
|
### clusterOption 可选
|
||||||
|
|
||||||
|
|
@ -53,6 +53,17 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
|
||||||
layer.source(data);
|
layer.source(data);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Source 更新
|
||||||
|
|
||||||
|
如果数据发生改变，可以需要更新数据
|
||||||
|
可以通过调用 layer 的 setData 方法实现数据的更新
|
||||||
|
|
||||||
|
具体见 [Layer](../layer/layer/#setdata)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setData(data);
|
||||||
|
```
|
||||||
|
|
||||||
#### JSON
|
#### JSON
|
||||||
|
|
||||||
[JSON 数据格式解析](./json)
|
[JSON 数据格式解析](./json)
|
||||||
|
|
|
||||||
|
|
@ -32,9 +32,6 @@ fetch(
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.size('count', value => {
|
|
||||||
return value * 0;
|
|
||||||
})
|
|
||||||
.shape('square')
|
.shape('square')
|
||||||
.style({
|
.style({
|
||||||
coverage: 1,
|
coverage: 1,
|
||||||
|
|
|
||||||
|
|
@ -32,9 +32,6 @@ fetch(
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.size('count', value => {
|
|
||||||
return value * 0;
|
|
||||||
})
|
|
||||||
.shape('square')
|
.shape('square')
|
||||||
.style({
|
.style({
|
||||||
coverage: 1,
|
coverage: 1,
|
||||||
|
|
|
||||||
|
|
@ -32,9 +32,6 @@ fetch(
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.size('count', value => {
|
|
||||||
return value * 0;
|
|
||||||
})
|
|
||||||
.shape('circle')
|
.shape('circle')
|
||||||
.style({
|
.style({
|
||||||
coverage: 0.9,
|
coverage: 0.9,
|
||||||
|
|
|
||||||
|
|
@ -32,9 +32,6 @@ fetch(
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.size('count', value => {
|
|
||||||
return value * 0;
|
|
||||||
})
|
|
||||||
.shape('square')
|
.shape('square')
|
||||||
.style({
|
.style({
|
||||||
coverage: 1,
|
coverage: 1,
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,6 @@ fetch(
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.size('sum', value => {
|
|
||||||
return value * 50;
|
|
||||||
})
|
|
||||||
.shape('hexagon')
|
.shape('hexagon')
|
||||||
.style({
|
.style({
|
||||||
coverage: 0.9,
|
coverage: 0.9,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue