mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of github.com:antvis/L7
This commit is contained in:
thinkinggis
commit
acc86524d6
|
|
@ -1,4 +1,4 @@
|
|||
```
|
||||
````
|
||||
---
|
||||
title: GridHeatMapLayer
|
||||
order: 1
|
||||
|
|
@ -11,10 +11,11 @@ order: 1
|
|||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
````
|
||||
|
||||
## source
|
||||
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
|
|
@ -23,27 +24,26 @@ import { HeatMapLayer } from '@antv/l7';
|
|||
- type 数据聚合类型 grid
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
|
@ -53,12 +53,10 @@ layer.source(data, {
|
|||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- hexagon
|
||||
- hexagon
|
||||
|
||||
```javascript
|
||||
|
||||
layer.shape('circle');
|
||||
|
||||
```
|
||||
|
||||
### 3d
|
||||
|
|
@ -70,92 +68,82 @@ layer.shape('circle');
|
|||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
|
||||
```
|
||||
|
||||
## size
|
||||
|
||||
### 2D shape
|
||||
### 2D shape
|
||||
|
||||
不需要设置size方法
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 常量
|
||||
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||
|
||||
layer.size(10); // 常量
|
||||
layer.size('value', [10, 50]); // 根据value 字段映射大小
|
||||
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同layer [color方法](../layer/#color)
|
||||
同 layer [color 方法](../layer/#color)
|
||||
|
||||
### style
|
||||
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
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'
|
||||
]
|
||||
);
|
||||
.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',
|
||||
]);
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@ order: 1
|
|||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
|
||||
## source
|
||||
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
|
|
@ -21,27 +22,26 @@ import { HeatMapLayer } from '@antv/l7';
|
|||
- type 数据聚合类型 grid
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
|
@ -51,11 +51,10 @@ layer.source(data, {
|
|||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- heaxgon
|
||||
- heaxgon
|
||||
|
||||
```javascript
|
||||
layer.shape('circle');
|
||||
|
||||
```
|
||||
|
||||
### 3d
|
||||
|
|
@ -67,88 +66,82 @@ layer.shape('circle');
|
|||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
|
||||
```
|
||||
|
||||
## size
|
||||
|
||||
### 2D shape
|
||||
### 2D shape
|
||||
|
||||
不需要设置size方法
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 常量
|
||||
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||
|
||||
layer.size(10); // 常量
|
||||
layer.size('value', [10, 50]); // 根据value 字段映射大小
|
||||
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||
```
|
||||
## color
|
||||
|
||||
同layer color方法
|
||||
## color
|
||||
|
||||
同 layer color 方法
|
||||
|
||||
## style
|
||||
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
|
||||
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'
|
||||
]
|
||||
);
|
||||
.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',
|
||||
]);
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -2,43 +2,46 @@
|
|||
title: Hexagon HeatMap
|
||||
order: 1
|
||||
---
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
## source
|
||||
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 hexagon
|
||||
- type 数据聚合类型 hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
|
@ -48,11 +51,10 @@ layer.source(data, {
|
|||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- heaxgon
|
||||
- heaxgon
|
||||
|
||||
```javascript
|
||||
layer.shape('circle');
|
||||
|
||||
```
|
||||
|
||||
### 3d
|
||||
|
|
@ -64,52 +66,48 @@ layer.shape('circle');
|
|||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
|
||||
```
|
||||
|
||||
## size
|
||||
|
||||
### 2D shape
|
||||
### 2D shape
|
||||
|
||||
不需要设置size方法
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 常量
|
||||
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||
|
||||
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
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
||||
### 完整代码
|
||||
|
||||
```javascript
|
||||
const layer =
|
||||
new HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
const layer = new HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.souce(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -131,5 +129,3 @@ const layer =
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,41 +9,39 @@ order: 1
|
|||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
|
||||
## source
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 hexagon
|
||||
- type 数据聚合类型 hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
|
@ -53,11 +51,10 @@ layer.source(data, {
|
|||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- heaxgon
|
||||
- heaxgon
|
||||
|
||||
```javascript
|
||||
layer.shape('circle');
|
||||
|
||||
```
|
||||
|
||||
### 3d
|
||||
|
|
@ -69,50 +66,48 @@ layer.shape('circle');
|
|||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
|
||||
```
|
||||
|
||||
## size
|
||||
|
||||
### 2D shape
|
||||
### 2D shape
|
||||
|
||||
不需要设置size方法
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 常量
|
||||
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||
|
||||
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
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
});
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
||||
### 完整代码
|
||||
|
||||
```javascript
|
||||
const layer =
|
||||
new HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
const layer = new HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.souce(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -134,5 +129,3 @@ const layer =
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ order: 1
|
|||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
|
||||
## shape
|
||||
常量 heatmap
|
||||
|
||||
常量 heatmap
|
||||
|
||||
```javascript
|
||||
layer.shape('heatmap');
|
||||
|
|
@ -23,47 +23,45 @@ layer.shape('heatmap');
|
|||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
|
||||
layer.size('weight', [0,1])
|
||||
|
||||
layer.size('weight', [0, 1]);
|
||||
```
|
||||
|
||||
## color
|
||||
|
||||
heatmap 需要设置color 方法，样式通过style 设置
|
||||
heatmap 需要设置 color 方法，样式通过 style 设置
|
||||
|
||||
## style
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
⚠️ color, position 的长度要相同
|
||||
⚠️ 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],
|
||||
},
|
||||
});
|
||||
|
||||
.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],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ order: 1
|
|||
|
||||
```javascript
|
||||
import { HeatMapLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
|
||||
## shape
|
||||
常量 heatmap
|
||||
|
||||
常量 heatmap
|
||||
|
||||
```javascript
|
||||
layer.shape('heatmap');
|
||||
|
|
@ -23,45 +23,43 @@ layer.shape('heatmap');
|
|||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
|
||||
layer.size('weight', [0,1])
|
||||
|
||||
layer.size('weight', [0, 1]);
|
||||
```
|
||||
|
||||
## color
|
||||
|
||||
heatmap 需要设置color 方法，样式通过style 设置
|
||||
heatmap 需要设置 color 方法，样式通过 style 设置
|
||||
|
||||
## style
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
⚠️ color, position 的长度要相同
|
||||
⚠️ color, position 的长度要相同
|
||||
|
||||
## 完整代码
|
||||
|
||||
```javascript
|
||||
|
||||
heatmapLayer()
|
||||
.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],
|
||||
},
|
||||
});
|
||||
|
||||
.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,23 +2,25 @@
|
|||
title: ArcLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
|
@ -29,15 +31,13 @@ order: 1
|
|||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
|
@ -50,35 +50,34 @@ layer.animate(false)
|
|||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
|
||||
})
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,24 +2,25 @@
|
|||
title: 弧线图
|
||||
order: 1
|
||||
---
|
||||
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可
|
||||
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
|
@ -35,8 +36,8 @@ order: 1
|
|||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
|
@ -49,38 +50,38 @@ layer.animate(false)
|
|||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
|
||||
})
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
### demo 示例
|
||||
[弧线demo](../../../../examples/gallery/basic#arcCircle)
|
||||
|
||||
[弧线 demo](../../../../examples/gallery/basic#arcCircle)
|
||||
|
|
|
|||
|
|
@ -68,14 +68,15 @@ order: 0
|
|||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
### style
|
||||
|
||||
- lineType dash | solid 线类型实线和虚线
|
||||
- dashArray 虚线配置项 ```[ 5, 5]```
|
||||
- lineType dash | solid 线类型实线和虚线
|
||||
- dashArray 虚线配置项 `[ 5, 5]`
|
||||
|
||||
```javascript
|
||||
layer .style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ]
|
||||
})
|
||||
layer.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [5, 5],
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,32 +2,37 @@
|
|||
title: Path
|
||||
order: 1
|
||||
---
|
||||
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
shape 设置成line即可绘制路线图
|
||||
- line
|
||||
|
||||
shape 设置成 line 即可绘制路线图
|
||||
|
||||
- line
|
||||
|
||||
### size
|
||||
路径图线的size支持两个维度
|
||||
|
||||
路径图线的 size 支持两个维度
|
||||
|
||||
- width 宽度
|
||||
- height 高度
|
||||
|
||||
```javascript
|
||||
layer.size([2,10]) // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height',[])
|
||||
layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height', []);
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
|
@ -40,16 +45,13 @@ layer.animate(false)
|
|||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
|
||||
})
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||
|
||||
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
|
|
|||
|
|
@ -2,32 +2,37 @@
|
|||
title: 路径图
|
||||
order: 1
|
||||
---
|
||||
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
shape 设置成line即可绘制路线图
|
||||
- line
|
||||
|
||||
shape 设置成 line 即可绘制路线图
|
||||
|
||||
- line
|
||||
|
||||
### size
|
||||
路径图线的size支持两个维度
|
||||
|
||||
路径图线的 size 支持两个维度
|
||||
|
||||
- width 宽度
|
||||
- height 高度
|
||||
|
||||
```javascript
|
||||
layer.size([2,10]) // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height',[])
|
||||
layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height', []);
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
|
@ -40,18 +45,13 @@ layer.animate(false)
|
|||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
|
||||
})
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
|
|
|||
|
|
@ -2,36 +2,35 @@
|
|||
title: Bubble Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
气泡图通过PointLayer对象实例化，
|
||||
气泡图通过 PointLayer 对象实例化，
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
### shape
|
||||
|
||||
通常气泡图shape 设置为 **circle**
|
||||
|
||||
### shape
|
||||
|
||||
通常气泡图 shape 设置为 **circle**
|
||||
|
||||
### size
|
||||
|
||||
气泡图大小，需要指定数据映射字段
|
||||
|
||||
```javascript
|
||||
|
||||
const bubble =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag',[0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
const bubble = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag', [0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### animate
|
||||
|
|
@ -41,22 +40,19 @@ new PointLayer()
|
|||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 水波配置项
|
||||
|
||||
- speed 水波速度
|
||||
- rings 水波环数
|
||||
|
||||
|
||||
|
||||
## tips
|
||||
|
||||
目前style的配置项只支持全局设置，不支持数据映射。
|
||||
目前 style 的配置项只支持全局设置，不支持数据映射。
|
||||
|
||||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||
|
||||
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
||||
|
||||
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
|
|
|||
|
|
@ -2,36 +2,35 @@
|
|||
title: 气泡图
|
||||
order: 1
|
||||
---
|
||||
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
气泡图通过PointLayer对象实例化，
|
||||
气泡图通过 PointLayer 对象实例化，
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
### shape
|
||||
|
||||
通常气泡图shape 设置为 **circle**
|
||||
|
||||
### shape
|
||||
|
||||
通常气泡图 shape 设置为 **circle**
|
||||
|
||||
### size
|
||||
|
||||
气泡图大小，需要指定数据映射字段
|
||||
|
||||
```javascript
|
||||
|
||||
const bubble =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag',[0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
const bubble = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag', [0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### animate
|
||||
|
|
@ -41,22 +40,19 @@ new PointLayer()
|
|||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 水波配置项
|
||||
|
||||
- speed 水波速度
|
||||
- rings 水波环数
|
||||
|
||||
|
||||
|
||||
## tips
|
||||
|
||||
目前style的配置项只支持全局设置，不支持数据映射。
|
||||
目前 style 的配置项只支持全局设置，不支持数据映射。
|
||||
|
||||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||
|
||||
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
||||
|
||||
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
title: Chart Map
|
||||
order: 6
|
||||
---
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义Marker 实现自定义图表
|
||||
通过自定义 Marker 实现自定义图表
|
||||
|
||||
[demo示例](../../../../examples/point/chart)
|
||||
[demo 示例](../../../../examples/point/chart)
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义Marker 实现自定义图表
|
||||
通过自定义 Marker 实现自定义图表
|
||||
|
||||
[demo示例](../../../../examples/point/chart)
|
||||
[demo 示例](../../../../examples/point/chart)
|
||||
|
|
|
|||
|
|
@ -2,72 +2,70 @@
|
|||
title: Cluster Map
|
||||
order: 5
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
目前只有点数据支持聚类方法
|
||||
|
||||
数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数
|
||||
数据聚合主要从数据层数据，因此需要在 Source 方法配置 cluster 参数
|
||||
|
||||
### Source
|
||||
|
||||
### Source
|
||||
[source 文档](../../source/source)
|
||||
|
||||
### 配置项
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，源数据会增加 point_count属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，源数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
||||
|
||||
#### 方法
|
||||
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据id获取聚合节点的数据
|
||||
|
||||
- id 聚合数据id
|
||||
|
||||
|
||||
|
||||
- id 聚合数据 id
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
// 设置配置项
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
clusterOption:{
|
||||
radius:40,
|
||||
}
|
||||
});
|
||||
cluster: true,
|
||||
clusterOption: {
|
||||
radius: 40,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 完整示例
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,90 +7,86 @@ order: 5
|
|||
|
||||
目前只有点数据支持聚类方法
|
||||
|
||||
数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数
|
||||
数据聚合主要从数据层数据，因此需要在 Source 方法配置 cluster 参数
|
||||
|
||||
### Source
|
||||
|
||||
### Source
|
||||
[source 文档](../../source/source)
|
||||
|
||||
### 配置项
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，数据会增加 point_count属性，在可视化渲染时可以根据 point_count进行数据映射。
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
||||
|
||||
#### 方法
|
||||
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据id获取聚合节点的数据，每个聚合节点会有一个唯一ID
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
- id 聚合数据id
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据 id 获取聚合节点的数据，每个聚合节点会有一个唯一 ID
|
||||
|
||||
- id 聚合数据 id
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
// 设置配置项
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
clusterOption:{
|
||||
radius:40,
|
||||
}
|
||||
});
|
||||
cluster: true,
|
||||
clusterOption: {
|
||||
radius: 40,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 方法
|
||||
获取聚合节点的原始数据,通过Source的 getClustersLeaves方法
|
||||
|
||||
|
||||
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
|
||||
|
||||
```javascript
|
||||
const source = layer.getSource();
|
||||
source.getClustersLeaves(id)
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
const source = layer.getSource();
|
||||
source.getClustersLeaves(id);
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
```
|
||||
|
||||
### 完整示例
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
// .size(10)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
// .size(10)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
[聚合图使用案例](../../../examples/point/cluster)
|
||||
|
||||
### FAQ
|
||||
PointLayer的聚合图采用WebGL绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用MarkerLayer的聚合功能，你可以通过Dom完全自定义样式。
|
||||
|
||||
[MarkerLayer聚合](../../component/markerLayer)
|
||||
|
||||
|
||||
|
||||
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
|
||||
|
||||
[MarkerLayer 聚合](../../component/markerLayer)
|
||||
|
|
|
|||
|
|
@ -2,32 +2,36 @@
|
|||
title: 3D Column
|
||||
order: 5
|
||||
---
|
||||
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
|
||||
3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
|
||||
|
||||
### shape
|
||||
|
||||
3D Shape 支持
|
||||
|
||||
- cylinder
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn
|
||||
|
||||
### size
|
||||
|
||||
3D柱图size 需要设置三个维度 [w, l, z]
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
3D 柱图 size 需要设置三个维度 [w, l, z]
|
||||
|
||||
size设置成常量
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
|
||||
size 设置成常量
|
||||
|
||||
```
|
||||
layer.size([2,2,3])
|
||||
```
|
||||
```
|
||||
|
||||
size 回调函数设置
|
||||
|
||||
```
|
||||
|
|
@ -36,23 +40,20 @@ size 回调函数设置
|
|||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
const column = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn',
|
||||
])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500];
|
||||
})
|
||||
.color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,32 +2,36 @@
|
|||
title: 3D 柱图
|
||||
order: 5
|
||||
---
|
||||
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
|
||||
3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
|
||||
|
||||
### shape
|
||||
|
||||
3D Shape 支持
|
||||
|
||||
- cylinder
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn
|
||||
|
||||
### size
|
||||
|
||||
3D柱图size 需要设置三个维度 [w, l, z]
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
3D 柱图 size 需要设置三个维度 [w, l, z]
|
||||
|
||||
size设置成常量
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
|
||||
size 设置成常量
|
||||
|
||||
```
|
||||
layer.size([2,2,3])
|
||||
```
|
||||
```
|
||||
|
||||
size 回调函数设置
|
||||
|
||||
```
|
||||
|
|
@ -36,23 +40,20 @@ size 回调函数设置
|
|||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
const column = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn',
|
||||
])
|
||||
.size('unit_price', (h) => {
|
||||
return [6, 6, h / 500];
|
||||
})
|
||||
.color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,46 +2,46 @@
|
|||
title: Dot Density
|
||||
order: 3
|
||||
---
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||
|
||||
### color
|
||||
- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
```javascript
|
||||
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关demo
|
||||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
|
|
|||
|
|
@ -2,46 +2,46 @@
|
|||
title: 亮度图
|
||||
order: 3
|
||||
---
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||
|
||||
### color
|
||||
- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
```javascript
|
||||
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关demo
|
||||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
title: Custom Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
title: Scatter Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
||||
## 使用
|
||||
散点图通过PointLayer对象实例化
|
||||
|
||||
散点图通过 PointLayer 对象实例化
|
||||
|
||||
### shape
|
||||
|
||||
|
|
@ -19,25 +21,24 @@ order: 2
|
|||
- rhombus
|
||||
- vesica
|
||||
|
||||
散点图shape 一般设置成常量
|
||||
散点图 shape 一般设置成常量
|
||||
|
||||
### color
|
||||
|
||||
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
|
||||
|
||||
### size
|
||||
|
||||
散点图一般等大小的图形,size 一般设置成常量
|
||||
|
||||
```javascript
|
||||
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
title: 散点图
|
||||
order: 2
|
||||
---
|
||||
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
||||
## 使用
|
||||
散点图通过PointLayer对象实例化
|
||||
|
||||
散点图通过 PointLayer 对象实例化
|
||||
|
||||
### shape
|
||||
|
||||
|
|
@ -19,25 +21,24 @@ order: 2
|
|||
- rhombus
|
||||
- vesica
|
||||
|
||||
散点图shape 一般设置成常量
|
||||
散点图 shape 一般设置成常量
|
||||
|
||||
### color
|
||||
|
||||
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
|
||||
|
||||
### size
|
||||
|
||||
散点图一般等大小的图形,size 一般设置成常量
|
||||
|
||||
```javascript
|
||||
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,44 +2,44 @@
|
|||
title: Symbol Map
|
||||
order: 4
|
||||
---
|
||||
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
符号图 通过PointLayer对象实例化，将shape设置成图片符号
|
||||
符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号
|
||||
|
||||
### shape
|
||||
|
||||
通过scene addImage 方法
|
||||
通过 scene addImage 方法
|
||||
|
||||
addImage()
|
||||
参数：
|
||||
- id 图片的id,
|
||||
- url 图片的url
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
参数：
|
||||
|
||||
```
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
|
||||
- id 图片的 id,
|
||||
- url 图片的 url
|
||||
|
||||
```javascript
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
```
|
||||
## 相关demo
|
||||
|
||||
⚠️ 符号图的 ID 不能与点图层已有 shape 名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把 shape 设置成图片的 id，同样符号图 shape 也支持数据映射
|
||||
|
||||
```javascript
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
|
|
|
|||
|
|
@ -2,44 +2,44 @@
|
|||
title: 符号图
|
||||
order: 4
|
||||
---
|
||||
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
符号图 通过PointLayer对象实例化，将shape设置成图片符号
|
||||
符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号
|
||||
|
||||
### shape
|
||||
|
||||
通过scene addImage 方法
|
||||
通过 scene addImage 方法
|
||||
|
||||
addImage()
|
||||
参数：
|
||||
- id 图片的id,
|
||||
- url 图片的url
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
参数：
|
||||
|
||||
```
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
|
||||
- id 图片的 id,
|
||||
- url 图片的 url
|
||||
|
||||
```javascript
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
```
|
||||
## 相关demo
|
||||
|
||||
⚠️ 符号图的 ID 不能与点图层已有 shape 名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把 shape 设置成图片的 id，同样符号图 shape 也支持数据映射
|
||||
|
||||
```javascript
|
||||
const scatter = new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Label
|
||||
order: 4
|
||||
---
|
||||
|
||||
为图层添加文本标注
|
||||
|
||||
## 使用
|
||||
|
|
@ -14,29 +15,31 @@ order: 4
|
|||
- shapeType 'text'
|
||||
|
||||
```javascript
|
||||
layer.shape('name','text')
|
||||
|
||||
layer.shape('name', 'text');
|
||||
```
|
||||
|
||||
### color
|
||||
同layer
|
||||
|
||||
同 layer
|
||||
|
||||
### size
|
||||
同layer
|
||||
|
||||
同 layer
|
||||
|
||||
### style
|
||||
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- stroke: `string`; 描边颜色
|
||||
- strokeWidth `number` 描边宽度
|
||||
- strokeOpacity `number` 描边透明度
|
||||
- fontWeight `string` 字体粗细
|
||||
- fontFamily `string` 字号
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||
|
||||
## 相关demo
|
||||
## 相关 demo
|
||||
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 文本标注
|
||||
order: 4
|
||||
---
|
||||
|
||||
为图层添加文本标注
|
||||
|
||||
## 使用
|
||||
|
|
@ -14,43 +15,32 @@ order: 4
|
|||
- shapeType 'text'
|
||||
|
||||
```javascript
|
||||
layer.shape('name','text')
|
||||
|
||||
layer.shape('name', 'text');
|
||||
```
|
||||
|
||||
### color
|
||||
同layer
|
||||
|
||||
同 layer
|
||||
|
||||
### size
|
||||
同layer
|
||||
|
||||
同 layer
|
||||
|
||||
### style
|
||||
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置
|
||||
`'right'
|
||||
| 'top-right'
|
||||
| 'left'
|
||||
| 'bottom-right'
|
||||
| 'left'
|
||||
| 'top-left'
|
||||
| 'bottom-left'
|
||||
| 'bottom'
|
||||
| 'bottom-right'
|
||||
| 'bottom-left'
|
||||
| 'top'
|
||||
| 'top-right'
|
||||
| 'top-left'
|
||||
| 'center';`
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置
|
||||
`'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';`
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- stroke: `string`; 描边颜色
|
||||
- strokeWidth `number` 描边宽度
|
||||
- strokeOpacity `number` 描边透明度
|
||||
- fontWeight `string` 字体粗细
|
||||
- fontFamily `string` 字号
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||
|
||||
## 相关demo
|
||||
## 相关 demo
|
||||
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
|
|
|||
|
|
@ -2,13 +2,18 @@
|
|||
title: 3D填充图
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7'
|
||||
import { PolygonLayer } from '@antv/l7';
|
||||
const layer = new PolygonLayer();
|
||||
```
|
||||
|
||||
### shape
|
||||
3D Polygon 将多边形沿Z轴向上拉伸
|
||||
|
||||
3D Polygon 将多边形沿 Z 轴向上拉伸
|
||||
|
||||
- extrude 常量不支持数据映射
|
||||
|
||||
```javascript
|
||||
|
|
@ -16,18 +21,22 @@ layer.shape('extrude');
|
|||
```
|
||||
|
||||
### size
|
||||
size代表拉伸的高度，支持数据映射
|
||||
|
||||
size 代表拉伸的高度，支持数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 高度设置成常量
|
||||
layer.size('floor', [0,2000]); // 根据floor字段进行数据映射默认为线
|
||||
layer.size('floor', (floor) => { // 通过回调函数设置size
|
||||
return floor * 2
|
||||
})
|
||||
layer.size(10); // 高度设置成常量
|
||||
layer.size('floor', [0, 2000]); // 根据floor字段进行数据映射默认为线
|
||||
layer.size('floor', (floor) => {
|
||||
// 通过回调函数设置size
|
||||
return floor * 2;
|
||||
});
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同 [layer#color](../layer/#color)
|
||||
|
||||
### style
|
||||
同 [layer#style](../layer/#style)
|
||||
|
||||
同 [layer#style](../layer/#style)
|
||||
|
|
|
|||
|
|
@ -2,23 +2,30 @@
|
|||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7'
|
||||
import { PolygonLayer } from '@antv/l7';
|
||||
const layer = new PolygonLayer();
|
||||
```
|
||||
|
||||
### shape
|
||||
绘制填充图，shape为```fill``` 常量不支持数据映射
|
||||
|
||||
绘制填充图，shape 为`fill` 常量不支持数据映射
|
||||
|
||||
```javascript
|
||||
layer.shape('fill');
|
||||
```
|
||||
|
||||
### size
|
||||
填充图无size不需要设置size
|
||||
|
||||
填充图无 size 不需要设置 size
|
||||
|
||||
### color
|
||||
|
||||
同 [layer#color](../layer/#color)
|
||||
|
||||
### style
|
||||
同 [layer#style](../layer/#style)
|
||||
|
||||
同 [layer#style](../layer/#style)
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
title: PolygonLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
|
||||
## shape
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: PolygonLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
## 使用
|
||||
|
|
@ -19,11 +20,9 @@ import { PolygonLayer } from '@antv/l7';
|
|||
- extrude 对填充图 3D 拉伸 不支持数据映射
|
||||
|
||||
```javascript
|
||||
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude').size(10); // size 表示高度
|
||||
|
||||
```
|
||||
|
||||
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
|
||||
|
|
|
|||
|
|
@ -88,13 +88,26 @@ export default class DrawCircle extends DrawFeature {
|
|||
lat: newStartPoint[1],
|
||||
lng: newStartPoint[0],
|
||||
};
|
||||
const newEndPoint = movePoint(
|
||||
[this.endPoint.lng, this.endPoint.lat],
|
||||
delta,
|
||||
);
|
||||
const endPointObj = {
|
||||
lat: newEndPoint[1],
|
||||
lng: newEndPoint[0],
|
||||
};
|
||||
newFeature[0].properties = {
|
||||
...newFeature[0].properties,
|
||||
startPoint: this.startPoint,
|
||||
endPoint: endPointObj,
|
||||
pointFeatures: newPointFeture,
|
||||
};
|
||||
this.centerLayer.setData([this.startPoint]);
|
||||
this.setCurrentFeature(newFeature[0]);
|
||||
const changeFeature = {
|
||||
...newFeature[0],
|
||||
};
|
||||
this.emit(DrawEvent.CHANGE, changeFeature);
|
||||
}
|
||||
|
||||
protected createFeature(id: string = '0'): Feature {
|
||||
|
|
@ -121,6 +134,7 @@ export default class DrawCircle extends DrawFeature {
|
|||
this.drawVertexLayer.updateData(
|
||||
featureCollection(properties.pointFeatures),
|
||||
);
|
||||
this.emit(DrawEvent.CHANGE, featureCollection([newFeature]).features[0]);
|
||||
}
|
||||
|
||||
protected showOtherLayer() {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export enum DrawEvent {
|
|||
Move = 'draw.move',
|
||||
Edit = 'draw.edit',
|
||||
UPDATE = 'draw.update',
|
||||
CHANGE = 'draw.change',
|
||||
SELECTION_CHANGE = 'draw.selectionchange',
|
||||
MODE_CHANGE = 'draw.modechange',
|
||||
ACTIONABLE = 'draw.actionable',
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
precision highp float;
|
||||
// 多边形顶点坐标
|
||||
attribute vec3 a_Position;
|
||||
// 多边形经纬度坐标
|
||||
attribute vec3 a_Pos;
|
||||
attribute float a_Size;
|
||||
attribute vec4 a_Color;
|
||||
uniform vec2 u_radius;
|
||||
uniform float u_coverage: 0.9;
|
||||
uniform float u_angle: 0;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
varying vec4 v_color;
|
||||
|
||||
#pragma include "projection"
|
||||
#pragma include "picking"
|
||||
|
||||
void main() {
|
||||
v_color = a_Color;
|
||||
|
||||
mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
|
||||
vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
|
||||
vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(project_pos);
|
||||
|
||||
setPickingColor(a_PickingColor);
|
||||
}
|
||||
precision highp float;
|
||||
// 多边形顶点坐标
|
||||
attribute vec3 a_Position;
|
||||
// 多边形经纬度坐标
|
||||
attribute vec3 a_Pos;
|
||||
attribute float a_Size;
|
||||
attribute vec4 a_Color;
|
||||
uniform vec2 u_radius;
|
||||
uniform float u_coverage: 0.9;
|
||||
uniform float u_angle: 0;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
varying vec4 v_color;
|
||||
|
||||
#pragma include "projection"
|
||||
#pragma include "project"
|
||||
#pragma include "picking"
|
||||
|
||||
void main() {
|
||||
v_color = a_Color;
|
||||
|
||||
mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
|
||||
vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
|
||||
vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
|
||||
vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(project_pos);
|
||||
|
||||
setPickingColor(a_PickingColor);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* 生成四边形热力图
|
||||
*/
|
||||
import { IParserData, ITransform } from '@antv/l7-core';
|
||||
import { Satistics } from '@antv/l7-utils';
|
||||
import { aProjectFlat, Satistics } from '@antv/l7-utils';
|
||||
|
||||
interface IGridHash {
|
||||
[key: string]: any;
|
||||
|
|
@ -16,12 +16,13 @@ const R_EARTH = 6378000;
|
|||
export function aggregatorToGrid(data: IParserData, option: ITransform) {
|
||||
const dataArray = data.dataArray;
|
||||
const { size = 10 } = option;
|
||||
const pixlSize = ((size / (2 * Math.PI * R_EARTH)) * (256 << 20)) / 2;
|
||||
const { gridHash, gridOffset } = _pointsGridHash(dataArray, size);
|
||||
const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option);
|
||||
return {
|
||||
yOffset: gridOffset.yOffset / 2,
|
||||
xOffset: gridOffset.xOffset / 2,
|
||||
radius: gridOffset.xOffset,
|
||||
yOffset: pixlSize,
|
||||
xOffset: pixlSize,
|
||||
radius: pixlSize,
|
||||
type: 'grid',
|
||||
dataArray: layerData,
|
||||
};
|
||||
|
|
@ -40,7 +41,6 @@ function _pointsGridHash(dataArray: any[], size: number) {
|
|||
}
|
||||
}
|
||||
const centerLat = (latMin + latMax) / 2;
|
||||
// const centerLat = 34.54083;
|
||||
const gridOffset = _calculateGridLatLonOffset(size, centerLat);
|
||||
if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
|
||||
return { gridHash: {}, gridOffset };
|
||||
|
|
@ -95,10 +95,10 @@ function _getGridLayerDataFromGridHash(
|
|||
}
|
||||
Object.assign(item, {
|
||||
_id: i,
|
||||
coordinates: [
|
||||
coordinates: aProjectFlat([
|
||||
-180 + gridOffset.xOffset * (lonIdx + 0.5),
|
||||
-90 + gridOffset.yOffset * (latIdx + 0.5),
|
||||
],
|
||||
]),
|
||||
rawData: gridHash[key].points,
|
||||
count: gridHash[key].count,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ storiesOf('图层', module)
|
|||
.add('热力图3D', () => <HeatMapDemo3D />)
|
||||
.add('热力图2', () => <HeatMap3D_2 />)
|
||||
.add('网格热力图', () => <HexagonLayerDemo />)
|
||||
.add('网格热力图2', () => <GridTest />)
|
||||
.add('栅格', () => <RasterLayerDemo />)
|
||||
.add('图片', () => <ImageLayerDemo />)
|
||||
.add('网格测试', () => <GridTest />)
|
||||
|
|
|
|||
|
|
@ -14,48 +14,53 @@ export default class HexagonLayerDemo extends React.Component {
|
|||
}
|
||||
}
|
||||
public async componentDidMount() {
|
||||
const testPoint: [number, number] = [113.868222, 22.506306];
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: testPoint,
|
||||
pitch: 0,
|
||||
zoom: 17,
|
||||
token: '8e2254ff173dbf7ff5029e9c9df20bc3',
|
||||
pitch: 56.499,
|
||||
center: [114.07737552216226, 22.542656745583486],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// 网格热力图
|
||||
const testList = [{ lng: testPoint[0], lat: testPoint[1], lev: 1 }];
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(testList, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 100,
|
||||
field: 'lev',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 1,
|
||||
})
|
||||
.color('count', ['#0B0030', '#6BD5A0'].reverse());
|
||||
scene.addLayer(layer);
|
||||
|
||||
// marker
|
||||
// @ts-ignore
|
||||
const marker = new Marker().setLnglat(testPoint);
|
||||
scene.addMarker(marker);
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 200,
|
||||
field: 'h12',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', [0, 600])
|
||||
.shape('squareColumn')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'rgba(0,18,255,1)',
|
||||
'rgba(0,144,255,0.9)',
|
||||
'rgba(0,222,254,0.8)',
|
||||
'rgba(22,226,159,0.6)',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,11 +65,10 @@ export default class HexagonLayerDemo extends React.Component {
|
|||
].reverse(),
|
||||
)
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer.getSource());
|
||||
this.scene = scene;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,5 +3,4 @@ import * as React from 'react';
|
|||
|
||||
import Map from './components/Map';
|
||||
// @ts-ignore
|
||||
storiesOf('自定义地图', module)
|
||||
.add('地图', () => <Map />)
|
||||
storiesOf('自定义地图', module).add('地图', () => <Map />);
|
||||
|
|
|
|||
Loading…
Reference in New Issue