p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of github.com:antvis/L7

This commit is contained in:
thinkinggis 2020-08-21 08:32:42 +08:00
parent 513eb1bae2 d33916fd61
commit acc86524d6
41 changed files with 875 additions and 883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
docs/api/layer/heatmap_layer/grid.en.md
View File

@ -1,4 +1,4 @@
``` ````
--- ---
title: GridHeatMapLayer title: GridHeatMapLayer
order: 1 order: 1
@ -11,10 +11,11 @@ order: 1
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ````
## source ## source
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
#### 设置网格聚合参数 #### 设置网格聚合参数
@ -23,27 +24,26 @@ import { HeatMapLayer } from '@antv/l7';
- type  数据聚合类型 grid - type  数据聚合类型 grid
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法  count,max,min,sum,mean 5个统计维度 - method 聚合方法  count,max,min,sum,mean 5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms:[ transforms: [
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}); });
``` ```
## shape ## shape
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
@ -53,12 +53,10 @@ layer.source(data, {
- circle, - circle,
- triangle - triangle
- square - square
- hexagon - hexagon
```javascript ```javascript
layer.shape('circle'); layer.shape('circle');
``` ```
### 3d ### 3d
@ -70,92 +68,82 @@ layer.shape('circle');
```javascript ```javascript
layer.shape('cylinder'); layer.shape('cylinder');
``` ```
## size ## size
### 2D shape ### 2D shape
不需要设置size方法 不需要设置 size 方法
### 3D 图形 ### 3D 图形
size 表示高度, 支持常量和数据映射 size 表示高度, 支持常量和数据映射
```javascript ```javascript
layer.size(10);// 常量 layer.size(10); // 常量
layer.size('value', [10,50]);// 根据value 字段映射大小 layer.size('value', [10, 50]); // 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度 layer.size('value', (value) => {}); // 回调函数设置高度
``` ```
### color ### color
同layer [color方法](../layer/#color) 同 layer [color 方法](../layer/#color)
### style ### style
- coverage 网格覆盖度 0 - 1 - coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360 - angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0 - opacity 透明度 0 - 1.0
```javascript ```javascript
layer.style({
layer.style({ coverage: 0.9,
coverage: 0.9, angle: 0,
angle: 0, opacity: 1.0,
opacity: 1.0 });
});
``` ```
## 完整实例代码 ## 完整实例代码
```javascript ```javascript
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 20000, size: 20000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.shape('square') .shape('square')
.style({ .style({
coverage: 1, coverage: 1,
angle: 0 angle: 0,
}) })
.color( .color('count', [
'count', '#0B0030',
[ '#100243',
'#0B0030', '#100243',
'#100243', '#1B048B',
'#100243', '#051FB7',
'#1B048B', '#0350C1',
'#051FB7', '#0350C1',
'#0350C1', '#0072C4',
'#0350C1', '#0796D3',
'#0072C4', '#2BA9DF',
'#0796D3', '#30C7C4',
'#2BA9DF', '#6BD5A0',
'#30C7C4', '#A7ECB2',
'#6BD5A0', '#D0F4CA',
'#A7ECB2', ]);
'#D0F4CA'
]
);
scene.addLayer(layer); scene.addLayer(layer);
``` ```

159
docs/api/layer/heatmap_layer/grid.zh.md
View File

@ -6,13 +6,14 @@ order: 1
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
## 使用 ## 使用
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ```
## source ## source
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
#### 设置网格聚合参数 #### 设置网格聚合参数
@ -21,27 +22,26 @@ import { HeatMapLayer } from '@antv/l7';
- type  数据聚合类型 grid - type  数据聚合类型 grid
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法  count,max,min,sum,mean 5个统计维度 - method 聚合方法  count,max,min,sum,mean 5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms:[ transforms: [
{ {
type: 'grid', type: 'grid',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}) });
``` ```
## shape ## shape
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
@ -51,11 +51,10 @@ layer.source(data, {
- circle, - circle,
- triangle - triangle
- square - square
- heaxgon - heaxgon
```javascript ```javascript
layer.shape('circle'); layer.shape('circle');
``` ```
### 3d ### 3d
@ -67,88 +66,82 @@ layer.shape('circle');
```javascript ```javascript
layer.shape('cylinder'); layer.shape('cylinder');
``` ```
## size ## size
### 2D shape ### 2D shape
不需要设置size方法 不需要设置 size 方法
### 3D 图形 ### 3D 图形
size 表示高度, 支持常量和数据映射 size 表示高度, 支持常量和数据映射
```javascript ```javascript
layer.size(10);// 常量 layer.size(10); // 常量
layer.size('value', [10,50]);// 根据value 字段映射大小 layer.size('value', [10, 50]); // 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度 layer.size('value', (value) => {}); // 回调函数设置高度
``` ```
## color
同layer color方法 ## color
同 layer color 方法
## style ## style
- coverage 网格覆盖度 0 - 1 - coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360 - angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0 - opacity 透明度 0 - 1.0
```javascript ```javascript
layer.style({
layer.style({ coverage: 0.9,
coverage: 0.9, angle: 0,
angle: 0, opacity: 1.0,
opacity: 1.0 });
})
``` ```
## 完整实例代码 ## 完整实例代码
```javascript ```javascript
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms: [ transforms: [
{ {
type: 'grid', type: 'grid',
size: 20000, size: 20000,
field: 'v', field: 'v',
method: 'sum' method: 'sum',
} },
] ],
}) })
.shape('square') .shape('square')
.style({ .style({
coverage: 1, coverage: 1,
angle: 0 angle: 0,
}) })
.color( .color('count', [
'count', '#0B0030',
[ '#100243',
'#0B0030', '#100243',
'#100243', '#1B048B',
'#100243', '#051FB7',
'#1B048B', '#0350C1',
'#051FB7', '#0350C1',
'#0350C1', '#0072C4',
'#0350C1', '#0796D3',
'#0072C4', '#2BA9DF',
'#0796D3', '#30C7C4',
'#2BA9DF', '#6BD5A0',
'#30C7C4', '#A7ECB2',
'#6BD5A0', '#D0F4CA',
'#A7ECB2', ]);
'#D0F4CA'
]
);
scene.addLayer(layer); scene.addLayer(layer);
``` ```

90
docs/api/layer/heatmap_layer/hexagon.en.md
View File

@ -2,43 +2,46 @@
title: Hexagon HeatMap title: Hexagon HeatMap
order: 1 order: 1
--- ---
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
## 使用 ## 使用
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ```
## source ## source
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
#### 设置网格聚合参数 #### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置 布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 hexagon - type  数据聚合类型 hexagon
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法  count,max,min,sum,mean 5个统计维度 - method 聚合方法  count,max,min,sum,mean 5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms:[ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}) });
``` ```
## shape ## shape
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
@ -48,11 +51,10 @@ layer.source(data, {
- circle, - circle,
- triangle - triangle
- square - square
- heaxgon - heaxgon
```javascript ```javascript
layer.shape('circle'); layer.shape('circle');
``` ```
### 3d ### 3d
@ -64,52 +66,48 @@ layer.shape('circle');
```javascript ```javascript
layer.shape('cylinder'); layer.shape('cylinder');
``` ```
## size ## size
### 2D shape ### 2D shape
不需要设置size方法 不需要设置 size 方法
### 3D 图形 ### 3D 图形
size 表示高度, 支持常量和数据映射 size 表示高度, 支持常量和数据映射
```javascript ```javascript
layer.size(10);// 常量 layer.size(10); // 常量
layer.size('value', [10,50]);// 根据value 字段映射大小 layer.size('value', [10, 50]); // 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度 layer.size('value', (value) => {}); // 回调函数设置高度
``` ```
## color ## color
同layer color方法 同 layer color 方法
## style ## style
- coverage 网格覆盖度 0 - 1 - coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360 - angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0 - opacity 透明度 0 - 1.0
```javascript ```javascript
layer.style({
layer.style({ coverage: 0.9,
coverage: 0.9, angle: 0,
angle: 0, opacity: 1.0,
opacity: 1.0 });
});
``` ```
### 完整代码 ### 完整代码
```javascript ```javascript
const layer = const layer = new HeatmapLayer({
new HeatmapLayer({ zIndex: 2,
zIndex: 2, })
})
.souce(data, { .souce(data, {
parser: { parser: {
type: 'csv', type: 'csv',
@ -131,5 +129,3 @@ const layer =
coverage: 0.8, coverage: 0.8,
}); });
``` ```

85
docs/api/layer/heatmap_layer/hexagon.zh.md
View File

@ -9,41 +9,39 @@ order: 1
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ```
## source ## source
网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson. 网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
#### 设置网格聚合参数 #### 设置网格聚合参数
布局方法 通过 source 的 tansforms 属性配置 布局方法 通过 source 的 tansforms 属性配置
- type  数据聚合类型 hexagon - type  数据聚合类型 hexagon
- size  网格半径 单位 米 - size  网格半径 单位 米
- field  聚合字段 - field  聚合字段
- method 聚合方法 count,max,min,sum,mean 5个统计维度 - method 聚合方法 count,max,min,sum,mean 5 个统计维度
```javascript ```javascript
layer.source(data, { layer.source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
transforms:[ transforms: [
{ {
type: 'hexagon', type: 'hexagon',
size: 15000, size: 15000,
field:'v', field: 'v',
method:'sum' method: 'sum',
} },
] ],
}) });
``` ```
## shape ## shape
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
@ -53,11 +51,10 @@ layer.source(data, {
- circle, - circle,
- triangle - triangle
- square - square
- heaxgon - heaxgon
```javascript ```javascript
layer.shape('circle'); layer.shape('circle');
``` ```
### 3d ### 3d
@ -69,50 +66,48 @@ layer.shape('circle');
```javascript ```javascript
layer.shape('cylinder'); layer.shape('cylinder');
``` ```
## size ## size
### 2D shape ### 2D shape
不需要设置size方法 不需要设置 size 方法
### 3D 图形 ### 3D 图形
size 表示高度, 支持常量和数据映射 size 表示高度, 支持常量和数据映射
```javascript ```javascript
layer.size(10);// 常量 layer.size(10); // 常量
layer.size('value', [10,50]);// 根据value 字段映射大小 layer.size('value', [10, 50]); // 根据value 字段映射大小
layer.size('value', (value)=>{}) // 回调函数设置高度 layer.size('value', (value) => {}); // 回调函数设置高度
``` ```
## color ## color
同layer color方法 同 layer color 方法
## style ## style
- coverage 网格覆盖度 0 - 1 - coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360 - angle 网格旋转角度 0 - 360
- opacity 透明度 0 - 1.0 - opacity 透明度 0 - 1.0
```javascript ```javascript
layer.style({ layer.style({
coverage: 0.9, coverage: 0.9,
angle: 0, angle: 0,
opacity: 1.0 opacity: 1.0,
}); });
``` ```
### 完整代码 ### 完整代码
```javascript ```javascript
const layer = const layer = new HeatmapLayer({
new HeatmapLayer({ zIndex: 2,
zIndex: 2, })
})
.souce(data, { .souce(data, {
parser: { parser: {
type: 'csv', type: 'csv',
@ -134,5 +129,3 @@ const layer =
coverage: 0.8, coverage: 0.8,
}); });
``` ```

50
docs/api/layer/heatmap_layer/normal.en.md
View File

@ -7,11 +7,11 @@ order: 1
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ```
## shape ## shape
常量 heatmap
常量 heatmap
```javascript ```javascript
layer.shape('heatmap'); layer.shape('heatmap');
@ -23,47 +23,45 @@ layer.shape('heatmap');
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript ```javascript
layer.size('weight', [0, 1]);
layer.size('weight', [0,1])
``` ```
## color ## color
heatmap 需要设置color 方法，样式通过style 设置 heatmap 需要设置 color 方法，样式通过 style 设置
## style ## style
- intensity    全局热力权重     推荐权重范围 1-5 - intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径，单位像素 - radius   热力半径，单位像素
- rampColors 色带参数 - rampColors 色带参数
- colors  颜色数组 - colors  颜色数组
- positions 数据区间 - positions 数据区间
⚠️ color, position 的长度要相同 ⚠️ color, position 的长度要相同
## 完整代码 ## 完整代码
```javascript ```javascript
heatmapLayer({ heatmapLayer({
zIndex: 2, zIndex: 2,
}) })
.source(data) .source(data)
.size('mag', [0, 1]) // weight映射通道 .size('mag', [0, 1]) // weight映射通道
.style({ .style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ colors: [
'rgba(33,102,172,0.0)', 'rgba(33,102,172,0.0)',
'rgb(103,169,207)', 'rgb(103,169,207)',
'rgb(209,229,240)', 'rgb(209,229,240)',
'rgb(253,219,199)', 'rgb(253,219,199)',
'rgb(239,138,98)', 'rgb(239,138,98)',
'rgb(178,24,43,1.0)', 'rgb(178,24,43,1.0)',
], ],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
}, },
}); });
``` ```

50
docs/api/layer/heatmap_layer/normal.zh.md
View File

@ -7,11 +7,11 @@ order: 1
```javascript ```javascript
import { HeatMapLayer } from '@antv/l7'; import { HeatMapLayer } from '@antv/l7';
``` ```
## shape ## shape
常量 heatmap
常量 heatmap
```javascript ```javascript
layer.shape('heatmap'); layer.shape('heatmap');
@ -23,45 +23,43 @@ layer.shape('heatmap');
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 - values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript ```javascript
layer.size('weight', [0, 1]);
layer.size('weight', [0,1])
``` ```
## color ## color
heatmap 需要设置color 方法，样式通过style 设置 heatmap 需要设置 color 方法，样式通过 style 设置
## style ## style
- intensity    全局热力权重     推荐权重范围 1-5 - intensity    全局热力权重     推荐权重范围 1-5
- radius   热力半径，单位像素 - radius   热力半径，单位像素
- rampColors 色带参数 - rampColors 色带参数
- colors  颜色数组 - colors  颜色数组
- positions 数据区间 - positions 数据区间
⚠️ color, position 的长度要相同 ⚠️ color, position 的长度要相同
## 完整代码 ## 完整代码
```javascript ```javascript
heatmapLayer() heatmapLayer()
.source(data) .source(data)
.size('mag', [0, 1]) // weight映射通道 .size('mag', [0, 1]) // weight映射通道
.style({ .style({
intensity: 3, intensity: 3,
radius: 20, radius: 20,
rampColors: { rampColors: {
colors: [ colors: [
'rgba(33,102,172,0.0)', 'rgba(33,102,172,0.0)',
'rgb(103,169,207)', 'rgb(103,169,207)',
'rgb(209,229,240)', 'rgb(209,229,240)',
'rgb(253,219,199)', 'rgb(253,219,199)',
'rgb(239,138,98)', 'rgb(239,138,98)',
'rgb(178,24,43,1.0)', 'rgb(178,24,43,1.0)',
], ],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
}, },
}); });
``` ```

67
docs/api/layer/line_layer/arc.en.md
View File

@ -2,23 +2,25 @@
title: ArcLayer title: ArcLayer
order: 1 order: 1
--- ---
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
## 使用 ## 使用
### 数据 ### 数据
绘制弧线只需提供起止点坐标即可 绘制弧线只需提供起止点坐标即可
```javascript ```javascript
source(data, { source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) });
``` ```
### shape ### shape
@ -29,15 +31,13 @@ order: 1
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
- arc3d 3d 弧线地图 3D 视角 - arc3d 3d 弧线地图 3D 视角
### animate ### animate
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 设置动画参数 #### 设置动画参数
@ -50,35 +50,34 @@ layer.animate(false)
layer.animate({ layer.animate({
duration: 4, duration: 4,
interval: 0.2, interval: 0.2,
trailLength: 0.1 trailLength: 0.1,
});
})
``` ```
##### 参数动画介绍 ##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
### 示例代码 ### 示例代码
```javascript ```javascript
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) })
.size(1) .size(1)
.shape('arc') .shape('arc')
.color('#8C1EB2') .color('#8C1EB2')
.style({ .style({
opacity: 0.8, opacity: 0.8,
}); });
``` ```

71
docs/api/layer/line_layer/arc.zh.md
View File

@ -2,24 +2,25 @@
title: 弧线图 title: 弧线图
order: 1 order: 1
--- ---
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
## 使用 ## 使用
### 数据 ### 数据
绘制弧线只需提供起止点坐标即可 绘制弧线只需提供起止点坐标即可
```javascript ```javascript
source(data, { source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) });
``` ```
### shape ### shape
@ -35,8 +36,8 @@ order: 1
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 设置动画参数 #### 设置动画参数
@ -49,38 +50,38 @@ layer.animate(false)
layer.animate({ layer.animate({
duration: 4, duration: 4,
interval: 0.2, interval: 0.2,
trailLength: 0.1 trailLength: 0.1,
});
})
``` ```
##### 参数动画介绍 ##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
### 示例代码 ### 示例代码
```javascript ```javascript
const layer = new LineLayer({}) const layer = new LineLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'lng1', x: 'lng1',
y: 'lat1', y: 'lat1',
x1: 'lng2', x1: 'lng2',
y1: 'lat2' y1: 'lat2',
} },
}) })
.size(1) .size(1)
.shape('arc') .shape('arc')
.color('#8C1EB2') .color('#8C1EB2')
.style({ .style({
opacity: 0.8, opacity: 0.8,
}); });
``` ```
### demo 示例 ### demo 示例
[弧线demo](../../../../examples/gallery/basic#arcCircle)
[弧线 demo](../../../../examples/gallery/basic#arcCircle)

13
docs/api/layer/line_layer/linelayer.zh.md
View File

@ -68,14 +68,15 @@ order: 0
lineLayer.size(1); // 线的宽度为 1 lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1，高度2 lineLayer.size([1, 2]); // 宽度为1，高度2
``` ```
### style ### style
- lineType dash | solid 线类型实线和虚线 - lineType dash | solid 线类型实线和虚线
- dashArray 虚线配置项 ```[ 5, 5]``` - dashArray 虚线配置项 `[ 5, 5]`
```javascript ```javascript
layer .style({ layer.style({
lineType: 'dash', lineType: 'dash',
dashArray: [ 5, 5 ] dashArray: [5, 5],
}) });
``` ```

36
docs/api/layer/line_layer/path.en.md
View File

@ -2,32 +2,37 @@
title: Path title: Path
order: 1 order: 1
--- ---
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
## 使用 ## 使用
### shape ### shape
shape 设置成line即可绘制路线图
- line shape 设置成 line 即可绘制路线图
- line
### size ### size
路径图线的size支持两个维度
路径图线的 size 支持两个维度
- width 宽度 - width 宽度
- height 高度 - height 高度
```javascript ```javascript
layer.size([2,10]) // 绘制宽度为2，高度为10的路径 layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
layer.size('height',[]) layer.size('height', []);
``` ```
### animate ### animate
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 设置动画参数 #### 设置动画参数
@ -40,16 +45,13 @@ layer.animate(false)
layer.animate({ layer.animate({
duration: 4, duration: 4,
interval: 0.2, interval: 0.2,
trailLength: 0.1 trailLength: 0.1,
});
})
``` ```
##### 参数动画介绍 ##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

36
docs/api/layer/line_layer/path.zh.md
View File

@ -2,32 +2,37 @@
title: 路径图 title: 路径图
order: 1 order: 1
--- ---
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
## 使用 ## 使用
### shape ### shape
shape 设置成line即可绘制路线图
- line shape 设置成 line 即可绘制路线图
- line
### size ### size
路径图线的size支持两个维度
路径图线的 size 支持两个维度
- width 宽度 - width 宽度
- height 高度 - height 高度
```javascript ```javascript
layer.size([2,10]) // 绘制宽度为2，高度为10的路径 layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
layer.size('height',[]) layer.size('height', []);
``` ```
### animate ### animate
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 设置动画参数 #### 设置动画参数
@ -40,18 +45,13 @@ layer.animate(false)
layer.animate({ layer.animate({
duration: 4, duration: 4,
interval: 0.2, interval: 0.2,
trailLength: 0.1 trailLength: 0.1,
});
})
``` ```
##### 参数动画介绍 ##### 参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为1
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ)
如果 interval = 0.2,则一条轨迹将会分成5段，如果 interval = 0.5 则为两段。 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

44
docs/api/layer/point_layer/bubble.en.md
View File

@ -2,36 +2,35 @@
title: Bubble Map title: Bubble Map
order: 1 order: 1
--- ---
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
## 使用 ## 使用
气泡图通过PointLayer对象实例化， 气泡图通过 PointLayer 对象实例化，
```javascript ```javascript
import { PointLayer } from '@antv/l7'; import { PointLayer } from '@antv/l7';
``` ```
### shape
### shape
通常气泡图shape 设置为 **circle**
通常气泡图 shape 设置为 **circle**
### size ### size
气泡图大小，需要指定数据映射字段 气泡图大小，需要指定数据映射字段
```javascript ```javascript
const bubble = new PointLayer()
const bubble = .source(data)
new PointLayer() .shape(circle)
.source(data) .size('mag', [0, 25])
.shape(circle) .color('red')
.size('mag',[0, 25]) .style({
.color('red') opacity: 0.3,
.style({ strokeWidth: 1,
opacity: 0.3, });
strokeWidth: 1
})
``` ```
### animate ### animate
@ -41,22 +40,19 @@ new PointLayer()
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 水波配置项 #### 水波配置项
- speed 水波速度 - speed 水波速度
- rings 水波环数 - rings 水波环数
## tips ## tips
目前style的配置项只支持全局设置，不支持数据映射。 目前 style 的配置项只支持全局设置，不支持数据映射。
如果 opacity 设置为 0.3 则所有的气泡都是 0.3 如果 opacity 设置为 0.3 则所有的气泡都是 0.3
style方法如果没有设置 stroke, 默认于气泡的填充色相同 style 方法如果没有设置 stroke, 默认于气泡的填充色相同

44
docs/api/layer/point_layer/bubble.zh.md
View File

@ -2,36 +2,35 @@
title: 气泡图 title: 气泡图
order: 1 order: 1
--- ---
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。 气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
## 使用 ## 使用
气泡图通过PointLayer对象实例化， 气泡图通过 PointLayer 对象实例化，
```javascript ```javascript
import { PointLayer } from '@antv/l7'; import { PointLayer } from '@antv/l7';
``` ```
### shape
### shape
通常气泡图shape 设置为 **circle**
通常气泡图 shape 设置为 **circle**
### size ### size
气泡图大小，需要指定数据映射字段 气泡图大小，需要指定数据映射字段
```javascript ```javascript
const bubble = new PointLayer()
const bubble = .source(data)
new PointLayer() .shape(circle)
.source(data) .size('mag', [0, 25])
.shape(circle) .color('red')
.size('mag',[0, 25]) .style({
.color('red') opacity: 0.3,
.style({ strokeWidth: 1,
opacity: 0.3, });
strokeWidth: 1
})
``` ```
### animate ### animate
@ -41,22 +40,19 @@ new PointLayer()
#### 开启关闭动画 #### 开启关闭动画
```javascript ```javascript
layer.animate(true) layer.animate(true);
layer.animate(false) layer.animate(false);
``` ```
#### 水波配置项 #### 水波配置项
- speed 水波速度 - speed 水波速度
- rings 水波环数 - rings 水波环数
## tips ## tips
目前style的配置项只支持全局设置，不支持数据映射。 目前 style 的配置项只支持全局设置，不支持数据映射。
如果 opacity 设置为 0.3 则所有的气泡都是 0.3 如果 opacity 设置为 0.3 则所有的气泡都是 0.3
style方法如果没有设置 stroke, 默认于气泡的填充色相同 style 方法如果没有设置 stroke, 默认于气泡的填充色相同

5
docs/api/layer/point_layer/chart.en.md
View File

@ -2,8 +2,9 @@
title: Chart Map title: Chart Map
order: 6 order: 6
--- ---
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
通过自定义Marker 实现自定义图表 通过自定义 Marker 实现自定义图表
[demo示例](../../../../examples/point/chart) [demo 示例](../../../../examples/point/chart)

5
docs/api/layer/point_layer/chart.zh.md
View File

@ -2,8 +2,9 @@
title: 复合图表地图 title: 复合图表地图
order: 6 order: 6
--- ---
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
通过自定义Marker 实现自定义图表 通过自定义 Marker 实现自定义图表
[demo示例](../../../../examples/point/chart) [demo 示例](../../../../examples/point/chart)

84
docs/api/layer/point_layer/cluster.en.md
View File

@ -2,72 +2,70 @@
title: Cluster Map title: Cluster Map
order: 5 order: 5
--- ---
## 使用 ## 使用
目前只有点数据支持聚类方法 目前只有点数据支持聚类方法
数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数 数据聚合主要从数据层数据，因此需要在 Source 方法配置 cluster 参数
### Source
### Source
[source 文档](../../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)** **getClusters(zoom: number)**
获取指定缩放等级的聚合数据 获取指定缩放等级的聚合数据
- zoom 缩放等级 - zoom 缩放等级
**getClustersLeaves(id: string)** **getClustersLeaves(id: string)**
根据id获取聚合节点的数据 根据id获取聚合节点的数据
- id 聚合数据id - id 聚合数据 id
```javascript ```javascript
layer.source(pointsData, { layer.source(pointsData, {
cluster: true, cluster: true,
}); });
// 设置配置项 // 设置配置项
layer.source(pointsData, { layer.source(pointsData, {
cluster: true, cluster: true,
clusterOption:{ clusterOption: {
radius:40, radius: 40,
} },
}); });
``` ```
### 完整示例 ### 完整示例
```javascript ```javascript
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(pointsData, { .source(pointsData, {
cluster: true, cluster: true,
}) })
.shape('circle') .shape('circle')
.scale('point_count', { .scale('point_count', {
type: 'quantile', type: 'quantile',
}) })
.size('point_count', [5, 10, 15, 20, 25]) .size('point_count', [5, 10, 15, 20, 25])
.color('red') .color('red')
.style({ .style({
opacity: 0.3, opacity: 0.3,
strokeWidth: 1, strokeWidth: 1,
}); });
``` ```

102
docs/api/layer/point_layer/cluster.zh.md
View File

@ -7,90 +7,86 @@ order: 5
目前只有点数据支持聚类方法 目前只有点数据支持聚类方法
数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数 数据聚合主要从数据层数据，因此需要在 Source 方法配置 cluster 参数
### Source
### Source
[source 文档](../../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)** **getClusters(zoom: number)**
获取指定缩放等级的聚合数据
- zoom 缩放等级
**getClustersLeaves(id: string)**
根据id获取聚合节点的数据，每个聚合节点会有一个唯一ID
- id 聚合数据id 获取指定缩放等级的聚合数据
- zoom 缩放等级
**getClustersLeaves(id: string)**
根据 id 获取聚合节点的数据，每个聚合节点会有一个唯一 ID
- id 聚合数据 id
```javascript ```javascript
layer.source(pointsData, { layer.source(pointsData, {
cluster: true, cluster: true,
}); });
// 设置配置项 // 设置配置项
layer.source(pointsData, { layer.source(pointsData, {
cluster: true, cluster: true,
clusterOption:{ clusterOption: {
radius:40, radius: 40,
} },
}); });
``` ```
### 方法 ### 方法
获取聚合节点的原始数据,通过Source的 getClustersLeaves方法
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
```javascript ```javascript
const source = layer.getSource(); const source = layer.getSource();
source.getClustersLeaves(id) source.getClustersLeaves(id);
layer.on('click', (e) => { layer.on('click', (e) => {
console.log(source.getClustersLeaves(e.feature.cluster_id)); console.log(source.getClustersLeaves(e.feature.cluster_id));
}); });
``` ```
### 完整示例 ### 完整示例
```javascript ```javascript
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(pointsData, { .source(pointsData, {
cluster: true, cluster: true,
}) })
.shape('circle') .shape('circle')
.scale('point_count', { .scale('point_count', {
type: 'quantile', type: 'quantile',
}) })
.size('point_count', [5, 10, 15, 20, 25]) .size('point_count', [5, 10, 15, 20, 25])
// .size(10) // .size(10)
.color('red') .color('red')
.style({ .style({
opacity: 0.3, opacity: 0.3,
strokeWidth: 1, strokeWidth: 1,
}); });
``` ```
[聚合图使用案例](../../../examples/point/cluster) [聚合图使用案例](../../../examples/point/cluster)
### FAQ ### FAQ
PointLayer的聚合图采用WebGL绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用MarkerLayer的聚合功能，你可以通过Dom完全自定义样式。
[MarkerLayer聚合](../../component/markerLayer)
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
[MarkerLayer 聚合](../../component/markerLayer)

53
docs/api/layer/point_layer/column.en.md
View File

@ -2,32 +2,36 @@
title: 3D Column title: 3D Column
order: 5 order: 5
--- ---
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
## 使用 ## 使用
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape 3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
### shape ### shape
3D Shape 支持 3D Shape 支持
- cylinder - cylinder
- triangleColumn - triangleColumn
- hexagonColumn - hexagonColumn
- squareColumn - squareColumn
### size ### size
3D柱图size 需要设置三个维度 [w, l, z] 3D 柱图 size 需要设置三个维度 [w, l, z]
- w 宽
- l 长
- z 高度
size设置成常量 - w 宽
- l 长
- z 高度
size 设置成常量
``` ```
layer.size([2,2,3]) layer.size([2,2,3])
``` ```
size 回调函数设置 size 回调函数设置
``` ```
@ -36,23 +40,20 @@ size 回调函数设置
}) })
``` ```
```javascript ```javascript
const column = new PointLayer({}) const column = new PointLayer({})
.source(data) .source(data)
.shape('name', [ .shape('name', [
'cylinder', 'cylinder',
'triangleColumn', 'triangleColumn',
'hexagonColumn', 'hexagonColumn',
'squareColumn' 'squareColumn',
]) ])
.size('unit_price', h => { .size('unit_price', (h) => {
return [ 6, 6, h / 500 ]; return [6, 6, h / 500];
}) })
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ]) .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
``` ```

53
docs/api/layer/point_layer/column.zh.md
View File

@ -2,32 +2,36 @@
title: 3D 柱图 title: 3D 柱图
order: 5 order: 5
--- ---
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
## 使用 ## 使用
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape 3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
### shape ### shape
3D Shape 支持 3D Shape 支持
- cylinder - cylinder
- triangleColumn - triangleColumn
- hexagonColumn - hexagonColumn
- squareColumn - squareColumn
### size ### size
3D柱图size 需要设置三个维度 [w, l, z] 3D 柱图 size 需要设置三个维度 [w, l, z]
- w 宽
- l 长
- z 高度
size设置成常量 - w 宽
- l 长
- z 高度
size 设置成常量
``` ```
layer.size([2,2,3]) layer.size([2,2,3])
``` ```
size 回调函数设置 size 回调函数设置
``` ```
@ -36,23 +40,20 @@ size 回调函数设置
}) })
``` ```
```javascript ```javascript
const column = new PointLayer({}) const column = new PointLayer({})
.source(data) .source(data)
.shape('name', [ .shape('name', [
'cylinder', 'cylinder',
'triangleColumn', 'triangleColumn',
'hexagonColumn', 'hexagonColumn',
'squareColumn' 'squareColumn',
]) ])
.size('unit_price', h => { .size('unit_price', (h) => {
return [ 6, 6, h / 500 ]; return [6, 6, h / 500];
}) })
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ]) .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
.style({ .style({
opacity: 1.0 opacity: 1.0,
}); });
``` ```

54
docs/api/layer/point_layer/dot.en.md
View File

@ -2,46 +2,46 @@
title: Dot Density title: Dot Density
order: 3 order: 3
--- ---
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
## 使用 ## 使用
### shape ### shape
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
### color - dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
- 无权重 ### color
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
- 有权重
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
- 无权重
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
- 有权重
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
```javascript ```javascript
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(data) .source(data)
.size(2) .size(2)
.shape('dot') .shape('dot')
.color('h8', [ .color('h8', [
'#0A3663', '#0A3663',
'#1558AC', '#1558AC',
'#3771D9', '#3771D9',
'#4D89E5', '#4D89E5',
'#64A5D3', '#64A5D3',
'#72BED6', '#72BED6',
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]) ])
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
``` ```
## 相关demo ## 相关 demo
[城市亮度图](../../../../examples/point/dot) [城市亮度图](../../../../examples/point/dot)

54
docs/api/layer/point_layer/dot.zh.md
View File

@ -2,46 +2,46 @@
title: 亮度图 title: 亮度图
order: 3 order: 3
--- ---
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况 亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
## 使用 ## 使用
### shape ### shape
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
### color - dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
- 无权重 ### color
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
- 有权重
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
- 无权重
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
- 有权重
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
```javascript ```javascript
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(data) .source(data)
.size(2) .size(2)
.shape('dot') .shape('dot')
.color('h8', [ .color('h8', [
'#0A3663', '#0A3663',
'#1558AC', '#1558AC',
'#3771D9', '#3771D9',
'#4D89E5', '#4D89E5',
'#64A5D3', '#64A5D3',
'#72BED6', '#72BED6',
'#83CED6', '#83CED6',
'#A6E1E0', '#A6E1E0',
'#B8EFE2', '#B8EFE2',
'#D7F9F0' '#D7F9F0',
]) ])
.style({ .style({
opacity: 1 opacity: 1,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
``` ```
## 相关demo ## 相关 demo
[城市亮度图](../../../../examples/point/dot) [城市亮度图](../../../../examples/point/dot)

3
docs/api/layer/point_layer/marker.en.md
View File

@ -2,7 +2,8 @@
title: Custom Marker title: Custom Marker
order: 7 order: 7
--- ---
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
## 使用 ## 使用

3
docs/api/layer/point_layer/marker.zh.md
View File

@ -2,7 +2,8 @@
title: 自定义 Marker title: 自定义 Marker
order: 7 order: 7
--- ---
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
可自定义点符号，通过自定义 dom 实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
## 使用 ## 使用

27
docs/api/layer/point_layer/scatter.en.md
View File

@ -2,10 +2,12 @@
title: Scatter Map title: Scatter Map
order: 2 order: 2
--- ---
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
## 使用 ## 使用
散点图通过PointLayer对象实例化
散点图通过 PointLayer 对象实例化
### shape ### shape
@ -19,25 +21,24 @@ order: 2
- rhombus - rhombus
- vesica - vesica
散点图shape 一般设置成常量 散点图 shape 一般设置成常量
### color ### color
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。 color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
### size ### size
散点图一般等大小的图形,size 一般设置成常量 散点图一般等大小的图形,size 一般设置成常量
```javascript ```javascript
const scatter = new PointLayer()
const scatter = .source(data)
new PointLayer() .shape(circle)
.source(data) .size(5)
.shape(circle) .color('red')
.size(5) .style({
.color('red') opacity: 0.3,
.style({ strokeWidth: 1,
opacity: 0.3, });
strokeWidth: 1
})
``` ```

27
docs/api/layer/point_layer/scatter.zh.md
View File

@ -2,10 +2,12 @@
title: 散点图 title: 散点图
order: 2 order: 2
--- ---
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。 在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
## 使用 ## 使用
散点图通过PointLayer对象实例化
散点图通过 PointLayer 对象实例化
### shape ### shape
@ -19,25 +21,24 @@ order: 2
- rhombus - rhombus
- vesica - vesica
散点图shape 一般设置成常量 散点图 shape 一般设置成常量
### color ### color
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。 color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
### size ### size
散点图一般等大小的图形,size 一般设置成常量 散点图一般等大小的图形,size 一般设置成常量
```javascript ```javascript
const scatter = new PointLayer()
const scatter = .source(data)
new PointLayer() .shape(circle)
.source(data) .size(5)
.shape(circle) .color('red')
.size(5) .style({
.color('red') opacity: 0.3,
.style({ strokeWidth: 1,
opacity: 0.3, });
strokeWidth: 1
})
``` ```

56
docs/api/layer/point_layer/symbol.en.md
View File

@ -2,44 +2,44 @@
title: Symbol Map title: Symbol Map
order: 4 order: 4
--- ---
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况 在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
## 使用 ## 使用
符号图 通过PointLayer对象实例化，将shape设置成图片符号 符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号
### shape ### shape
通过scene addImage 方法 通过 scene addImage 方法
addImage() addImage()
参数： 参数：
- id 图片的id,
- url 图片的url
```javascript
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
);
``` - id 图片的 id,
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle - url 图片的 url
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
```javascript ```javascript
const scatter = scene.addImage(
new PointLayer() '00',
.source(data) 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
.shape('00') );
.size(5)
.color('red')
.style({
opacity: 0.3,
strokeWidth: 1
})
``` ```
## 相关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

56
docs/api/layer/point_layer/symbol.zh.md
View File

@ -2,44 +2,44 @@
title: 符号图 title: 符号图
order: 4 order: 4
--- ---
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况 在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
## 使用 ## 使用
符号图 通过PointLayer对象实例化，将shape设置成图片符号 符号图 通过 PointLayer 对象实例化，将 shape 设置成图片符号
### shape ### shape
通过scene addImage 方法 通过 scene addImage 方法
addImage() addImage()
参数： 参数：
- id 图片的id,
- url 图片的url
```javascript
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
);
``` - id 图片的 id,
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle - url 图片的 url
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
```javascript ```javascript
const scatter = scene.addImage(
new PointLayer() '00',
.source(data) 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
.shape('00') );
.size(5)
.color('red')
.style({
opacity: 0.3,
strokeWidth: 1
})
``` ```
## 相关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

23
docs/api/layer/point_layer/text.en.md
View File

@ -2,6 +2,7 @@
title: Label title: Label
order: 4 order: 4
--- ---
为图层添加文本标注 为图层添加文本标注
## 使用 ## 使用
@ -14,29 +15,31 @@ order: 4
- shapeType 'text' - shapeType 'text'
```javascript ```javascript
layer.shape('name','text') layer.shape('name', 'text');
``` ```
### color ### color
同layer
同 layer
### size ### size
同layer
同 layer
### style ### style
- opacity `number` - opacity `number`
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left - textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y] - padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
- stroke: `string`; 描边颜色 - stroke: `string`; 描边颜色
- strokeWidth `number` 描边宽度 - strokeWidth `number` 描边宽度
- strokeOpacity `number` 描边透明度 - strokeOpacity `number` 描边透明度
- fontWeight `string` 字体粗细 - fontWeight `string` 字体粗细
- fontFamily `string` 字号 - fontFamily `string` 字号
- textOffset `[number, number]` 文本偏移量 - textOffset `[number, number]` 文本偏移量
- textAllowOverlap: `boolean` 是否允许文字遮盖 - textAllowOverlap: `boolean` 是否允许文字遮盖
## 相关demo ## 相关 demo
[文本标注](../../../../examples/point/text) [文本标注](../../../../examples/point/text)

38
docs/api/layer/point_layer/text.zh.md
View File

@ -2,6 +2,7 @@
title: 文本标注 title: 文本标注
order: 4 order: 4
--- ---
为图层添加文本标注 为图层添加文本标注
## 使用 ## 使用
@ -14,43 +15,32 @@ order: 4
- shapeType 'text' - shapeType 'text'
```javascript ```javascript
layer.shape('name','text') layer.shape('name', 'text');
``` ```
### color ### color
同layer
同 layer
### size ### size
同layer
同 layer
### style ### style
- opacity `number` - opacity `number`
- textAnchor `string` 文本相对锚点的位置 - textAnchor `string` 文本相对锚点的位置
`'right' `'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';`
| 'top-right' - spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
| 'left' - padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
| '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`; 描边颜色 - stroke: `string`; 描边颜色
- strokeWidth `number` 描边宽度 - strokeWidth `number` 描边宽度
- strokeOpacity `number` 描边透明度 - strokeOpacity `number` 描边透明度
- fontWeight `string` 字体粗细 - fontWeight `string` 字体粗细
- fontFamily `string` 字号 - fontFamily `string` 字号
- textOffset `[number, number]` 文本偏移量 - textOffset `[number, number]` 文本偏移量
- textAllowOverlap: `boolean` 是否允许文字遮盖 - textAllowOverlap: `boolean` 是否允许文字遮盖
## 相关demo ## 相关 demo
[文本标注](../../../../examples/point/text) [文本标注](../../../../examples/point/text)

27
docs/api/layer/polygon_layer/extrude.zh.md
View File

@ -2,13 +2,18 @@
title: 3D填充图 title: 3D填充图
order: 1 order: 1
--- ---
## 使用 ## 使用
```javascript ```javascript
import { PolygonLayer } from '@antv/l7' import { PolygonLayer } from '@antv/l7';
const layer = new PolygonLayer(); const layer = new PolygonLayer();
``` ```
### shape ### shape
3D Polygon 将多边形沿Z轴向上拉伸
3D Polygon 将多边形沿 Z 轴向上拉伸
- extrude 常量不支持数据映射 - extrude 常量不支持数据映射
```javascript ```javascript
@ -16,18 +21,22 @@ layer.shape('extrude');
``` ```
### size ### size
size代表拉伸的高度，支持数据映射
size 代表拉伸的高度，支持数据映射
```javascript ```javascript
layer.size(10);// 高度设置成常量 layer.size(10); // 高度设置成常量
layer.size('floor', [0,2000]); // 根据floor字段进行数据映射默认为线 layer.size('floor', [0, 2000]); // 根据floor字段进行数据映射默认为线
layer.size('floor', (floor) => { // 通过回调函数设置size layer.size('floor', (floor) => {
return floor * 2 // 通过回调函数设置size
}) return floor * 2;
});
``` ```
### color ### color
同 [layer#color](../layer/#color) 同 [layer#color](../layer/#color)
### style ### style
同 [layer#style](../layer/#style)
同 [layer#style](../layer/#style)

15
docs/api/layer/polygon_layer/fill.zh.md
View File

@ -2,23 +2,30 @@
title: 填充图 title: 填充图
order: 1 order: 1
--- ---
## 使用 ## 使用
```javascript ```javascript
import { PolygonLayer } from '@antv/l7' import { PolygonLayer } from '@antv/l7';
const layer = new PolygonLayer(); const layer = new PolygonLayer();
``` ```
### shape ### shape
绘制填充图，shape为```fill``` 常量不支持数据映射
绘制填充图，shape 为`fill` 常量不支持数据映射
```javascript ```javascript
layer.shape('fill'); layer.shape('fill');
``` ```
### size ### size
填充图无size不需要设置size
填充图无 size 不需要设置 size
### color ### color
同 [layer#color](../layer/#color) 同 [layer#color](../layer/#color)
### style ### style
同 [layer#style](../layer/#style)
同 [layer#style](../layer/#style)

2
docs/api/layer/polygon_layer/polygonlayer.en.md
View File

@ -2,13 +2,13 @@
title: PolygonLayer title: PolygonLayer
order: 0 order: 0
--- ---
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
## 使用 ## 使用
```javascript ```javascript
import { PolygonLayer } from '@antv/l7'; import { PolygonLayer } from '@antv/l7';
``` ```
## shape ## shape

3
docs/api/layer/polygon_layer/polygonlayer.zh.md
View File

@ -2,6 +2,7 @@
title: PolygonLayer title: PolygonLayer
order: 0 order: 0
--- ---
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
## 使用 ## 使用
@ -19,11 +20,9 @@ import { PolygonLayer } from '@antv/l7';
- extrude 对填充图 3D 拉伸 不支持数据映射 - extrude 对填充图 3D 拉伸 不支持数据映射
```javascript ```javascript
PolyonLayer.shape('fill'); PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度 PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude').size(10); // size 表示高度 PolyonLayer.shape('extrude').size(10); // size 表示高度
``` ```
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer) 其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)

14
packages/draw/src/modes/draw_circle.ts
View File

@ -88,13 +88,26 @@ export default class DrawCircle extends DrawFeature {
lat: newStartPoint[1], lat: newStartPoint[1],
lng: newStartPoint[0], 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 = {
...newFeature[0].properties, ...newFeature[0].properties,
startPoint: this.startPoint, startPoint: this.startPoint,
endPoint: endPointObj,
pointFeatures: newPointFeture, pointFeatures: newPointFeture,
}; };
this.centerLayer.setData([this.startPoint]); this.centerLayer.setData([this.startPoint]);
this.setCurrentFeature(newFeature[0]); this.setCurrentFeature(newFeature[0]);
const changeFeature = {
...newFeature[0],
};
this.emit(DrawEvent.CHANGE, changeFeature);
} }
protected createFeature(id: string = '0'): Feature { protected createFeature(id: string = '0'): Feature {
@ -121,6 +134,7 @@ export default class DrawCircle extends DrawFeature {
this.drawVertexLayer.updateData( this.drawVertexLayer.updateData(
featureCollection(properties.pointFeatures), featureCollection(properties.pointFeatures),
); );
this.emit(DrawEvent.CHANGE, featureCollection([newFeature]).features[0]);
} }
protected showOtherLayer() { protected showOtherLayer() {

1
packages/draw/src/util/constant.ts
View File

@ -4,6 +4,7 @@ export enum DrawEvent {
Move = 'draw.move', Move = 'draw.move',
Edit = 'draw.edit', Edit = 'draw.edit',
UPDATE = 'draw.update', UPDATE = 'draw.update',
CHANGE = 'draw.change',
SELECTION_CHANGE = 'draw.selectionchange', SELECTION_CHANGE = 'draw.selectionchange',
MODE_CHANGE = 'draw.modechange', MODE_CHANGE = 'draw.modechange',
ACTIONABLE = 'draw.actionable', ACTIONABLE = 'draw.actionable',

54
packages/layers/src/heatmap/shaders/grid_vert.glsl
View File

@ -1,26 +1,28 @@
precision highp float; precision highp float;
// 多边形顶点坐标 // 多边形顶点坐标
attribute vec3 a_Position; attribute vec3 a_Position;
// 多边形经纬度坐标 // 多边形经纬度坐标
attribute vec3 a_Pos; attribute vec3 a_Pos;
attribute float a_Size; attribute float a_Size;
attribute vec4 a_Color; attribute vec4 a_Color;
uniform vec2 u_radius; uniform vec2 u_radius;
uniform float u_coverage: 0.9; uniform float u_coverage: 0.9;
uniform float u_angle: 0; uniform float u_angle: 0;
uniform mat4 u_ModelMatrix; uniform mat4 u_ModelMatrix;
varying vec4 v_color; varying vec4 v_color;
#pragma include "projection" #pragma include "projection"
#pragma include "picking" #pragma include "project"
#pragma include "picking"
void main() {
v_color = a_Color; 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 ; mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0)); vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
gl_Position = project_common_position_to_clipspace(project_pos); vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));
setPickingColor(a_PickingColor); gl_Position = project_common_position_to_clipspace(project_pos);
}
setPickingColor(a_PickingColor);
}

14
packages/source/src/transform/grid.ts
View File

@ -2,7 +2,7 @@
* 生成四边形热力图 * 生成四边形热力图
*/ */
import { IParserData, ITransform } from '@antv/l7-core'; import { IParserData, ITransform } from '@antv/l7-core';
import { Satistics } from '@antv/l7-utils'; import { aProjectFlat, Satistics } from '@antv/l7-utils';
interface IGridHash { interface IGridHash {
[key: string]: any; [key: string]: any;
@ -16,12 +16,13 @@ const R_EARTH = 6378000;
export function aggregatorToGrid(data: IParserData, option: ITransform) { export function aggregatorToGrid(data: IParserData, option: ITransform) {
const dataArray = data.dataArray; const dataArray = data.dataArray;
const { size = 10 } = option; const { size = 10 } = option;
const pixlSize = ((size / (2 * Math.PI * R_EARTH)) * (256 << 20)) / 2;
const { gridHash, gridOffset } = _pointsGridHash(dataArray, size); const { gridHash, gridOffset } = _pointsGridHash(dataArray, size);
const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option); const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option);
return { return {
yOffset: gridOffset.yOffset / 2, yOffset: pixlSize,
xOffset: gridOffset.xOffset / 2, xOffset: pixlSize,
radius: gridOffset.xOffset, radius: pixlSize,
type: 'grid', type: 'grid',
dataArray: layerData, dataArray: layerData,
}; };
@ -40,7 +41,6 @@ function _pointsGridHash(dataArray: any[], size: number) {
} }
} }
const centerLat = (latMin + latMax) / 2; const centerLat = (latMin + latMax) / 2;
// const centerLat = 34.54083;
const gridOffset = _calculateGridLatLonOffset(size, centerLat); const gridOffset = _calculateGridLatLonOffset(size, centerLat);
if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) { if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
return { gridHash: {}, gridOffset }; return { gridHash: {}, gridOffset };
@ -95,10 +95,10 @@ function _getGridLayerDataFromGridHash(
} }
Object.assign(item, { Object.assign(item, {
_id: i, _id: i,
coordinates: [ coordinates: aProjectFlat([
-180 + gridOffset.xOffset * (lonIdx + 0.5), -180 + gridOffset.xOffset * (lonIdx + 0.5),
-90 + gridOffset.yOffset * (latIdx + 0.5), -90 + gridOffset.yOffset * (latIdx + 0.5),
], ]),
rawData: gridHash[key].points, rawData: gridHash[key].points,
count: gridHash[key].count, count: gridHash[key].count,
}); });

1
stories/Layers/Layers.stories.tsx
View File

@ -48,6 +48,7 @@ storiesOf('图层', module)
.add('热力图3D', () => <HeatMapDemo3D />) .add('热力图3D', () => <HeatMapDemo3D />)
.add('热力图2', () => <HeatMap3D_2 />) .add('热力图2', () => <HeatMap3D_2 />)
.add('网格热力图', () => <HexagonLayerDemo />) .add('网格热力图', () => <HexagonLayerDemo />)
.add('网格热力图2', () => <GridTest />)
.add('栅格', () => <RasterLayerDemo />) .add('栅格', () => <RasterLayerDemo />)
.add('图片', () => <ImageLayerDemo />) .add('图片', () => <ImageLayerDemo />)
.add('网格测试', () => <GridTest />) .add('网格测试', () => <GridTest />)

71
stories/Layers/components/gridtest.tsx
View File

@ -14,48 +14,53 @@ export default class HexagonLayerDemo extends React.Component {
} }
} }
public async componentDidMount() { public async componentDidMount() {
const testPoint: [number, number] = [113.868222, 22.506306];
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: testPoint,
pitch: 0,
zoom: 17,
token: '8e2254ff173dbf7ff5029e9c9df20bc3', token: '8e2254ff173dbf7ff5029e9c9df20bc3',
pitch: 56.499,
center: [114.07737552216226, 22.542656745583486],
rotation: 39.19,
zoom: 12.47985,
}), }),
}); });
scene.on('loaded', () => { scene.on('loaded', () => {
// 网格热力图 fetch(
const testList = [{ lng: testPoint[0], lat: testPoint[1], lev: 1 }]; 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
const layer = new HeatmapLayer({}) )
.source(testList, { .then((res) => res.json())
parser: { .then((data) => {
type: 'json', const layer = new HeatmapLayer({})
x: 'lng', .source(data, {
y: 'lat', transforms: [
}, {
transforms: [ type: 'grid',
{ size: 200,
type: 'grid', field: 'h12',
size: 100, method: 'sum',
field: 'lev', },
method: 'sum', ],
}, })
], .size('sum', [0, 600])
}) .shape('squareColumn')
.shape('circle') .style({
.style({ coverage: 1,
coverage: 1, angle: 0,
}) opacity: 1.0,
.color('count', ['#0B0030', '#6BD5A0'].reverse()); })
scene.addLayer(layer); .color(
'sum',
// marker [
// @ts-ignore 'rgba(0,18,255,1)',
const marker = new Marker().setLnglat(testPoint); 'rgba(0,144,255,0.9)',
scene.addMarker(marker); 'rgba(0,222,254,0.8)',
'rgba(22,226,159,0.6)',
].reverse(),
);
scene.addLayer(layer);
});
}); });
} }

3
stories/Layers/components/hexagon.tsx
View File

@ -65,11 +65,10 @@ export default class HexagonLayerDemo extends React.Component {
].reverse(), ].reverse(),
) )
.style({ .style({
coverage: 0.9, coverage: 1,
angle: 0, angle: 0,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
console.log(pointLayer.getSource());
this.scene = scene; this.scene = scene;
}); });
}); });

3
stories/customMap/map.stories.tsx
View File

@ -3,5 +3,4 @@ import * as React from 'react';
import Map from './components/Map'; import Map from './components/Map';
// @ts-ignore // @ts-ignore
storiesOf('自定义地图', module) storiesOf('自定义地图', module).add('地图', () => <Map />);
.add('地图', () => <Map />)