-
Notifications
You must be signed in to change notification settings - Fork 633
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
1,032 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
[ | ||
{ | ||
"fromPath": "/en/docs/api", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/en/docs/api/L7" | ||
}, | ||
{ | ||
"fromPath": "/zh/docs/api", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/docs/api/L7" | ||
}, | ||
{ | ||
"fromPath": "/zh/docs/tutorial", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/docs/api/quickstart" | ||
}, | ||
{ | ||
"fromPath": "/en/docs/tutorial", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/en/docs/api/quickstart" | ||
}, | ||
{ | ||
"fromPath": "/zh/examples/raster/", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/examples/raster/basic" | ||
}, | ||
{ | ||
"fromPath": "/zh/examples/polygon/", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/examples/polygon/3d" | ||
}, | ||
{ | ||
"fromPath": "/zh/examples/heatmap/", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/examples/heatmap/heatmap" | ||
}, | ||
{ | ||
"fromPath": "/en/examples", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/en/examples/gallery/basic" | ||
}, | ||
{ | ||
"fromPath": "/zh/examples", | ||
"isPermanent": true, | ||
"redirectInBrowser": true, | ||
"toPath": "/zh/examples/gallery/basic" | ||
} | ||
] |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
title: sControl | ||
title: Control | ||
order: 1 | ||
--- | ||
# control | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,205 @@ | ||
--- | ||
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() | ||
``` |
Oops, something went wrong.