mirror of https://gitee.com/antv-l7/antv-l7
63 lines
993 B
Markdown
63 lines
993 B
Markdown
---
|
||
title: Bubble Map
|
||
order: 1
|
||
---
|
||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||
|
||
## 使用
|
||
|
||
气泡图通过PointLayer对象实例化，
|
||
|
||
```javascript
|
||
import { PointLayer } from '@antv/l7';
|
||
|
||
```
|
||
### 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
|
||
})
|
||
```
|
||
|
||
### animate
|
||
|
||
气泡图支持水波动画效果
|
||
|
||
#### 开启关闭动画
|
||
|
||
```javascript
|
||
layer.animate(true)
|
||
layer.animate(false)
|
||
```
|
||
#### 水波配置项
|
||
|
||
- speed 水波速度
|
||
- rings 水波环数
|
||
|
||
|
||
|
||
## tips
|
||
|
||
目前style的配置项只支持全局设置，不支持数据映射。
|
||
|
||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||
|
||
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||
|
||
|