mirror of https://gitee.com/antv-l7/antv-l7
docs(layer): udpate heatmaplayer docs
This commit is contained in:
thinkinggis
parent
80a7c9cf58
commit
9c44f32da7
|
|
@ -6,31 +6,49 @@ order: 10
|
|||
## 2020.01.06 2.0 正式版
|
||||
|
||||
###✨ Features
|
||||
|
||||
• 新增弧线图，路径图动画功能
|
||||
|
||||
• 新增气泡图水波动画功能
|
||||
|
||||
• 新增聚合地图
|
||||
|
||||
• 新增文本标注，支持避让
|
||||
|
||||
• 新增城市建筑图层
|
||||
|
||||
• 新增栅格地图，支持卫星遥感数据可视化
|
||||
|
||||
• 新增图层交互事件
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• Marker 支持事件和自定义数据
|
||||
|
||||
• 弧线支持虚线样式
|
||||
|
||||
• 面图层支持，文本标注，气泡图效果
|
||||
|
||||
• 重构了文档结构
|
||||
|
||||
• source 支持 map,join,filter 数据处理支持
|
||||
|
||||
• source 支持数据更新
|
||||
|
||||
• 支持 blend 效果配置
|
||||
|
||||
• 支持通过地图实例初始化地图
|
||||
|
||||
• 官网新增所有图表概览页面
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• 修复容器 resize 不能正常响应
|
||||
|
||||
• 修复 babel 打包问题
|
||||
|
||||
• 修复地图组件加载报错问题
|
||||
|
||||
• 修复样式配置 strokeColor- stroke
|
||||
|
||||
## 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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: 网格热力图
|
||||
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: 蜂窝热力图
|
||||
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: 经典热力图
|
||||
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
|
||||
|
||||
### cluster 可选 可以只设置 cluster
|
||||
### cluster ``boolean` 可选 可以只设置
|
||||
|
||||
### clusterOption 可选
|
||||
|
||||
|
|
@ -53,6 +53,17 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
|
|||
layer.source(data);
|
||||
```
|
||||
|
||||
### Source 更新
|
||||
|
||||
如果数据发生改变，可以需要更新数据
|
||||
可以通过调用 layer 的 setData 方法实现数据的更新
|
||||
|
||||
具体见 [Layer](../layer/layer/#setdata)
|
||||
|
||||
```javascript
|
||||
layer.setData(data);
|
||||
```
|
||||
|
||||
#### JSON
|
||||
|
||||
[JSON 数据格式解析](./json)
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
|
|
|
|||
|
|
@ -27,9 +27,6 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('sum', value => {
|
||||
return value * 50;
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
|
|
|
|||
Loading…
Reference in New Issue