CircleLayer

以贴地圆的方式展示点数据，支持设置多种圆环动画效果，继承自Layer

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12

var layer = new mapvgl.CircleLayer({
    type: 'wave',
    color: 'rgba(50, 50, 200, 1)',
    size: 10,
    radius: 100,
    data: [{
        geometry: {
            type: 'Point',
            coordinates: [116.392394, 39.910683]
        }
    }]
});

options属性

type

解释：设置圆的类型。

类型：string

默认值：’simple’

可选值：

• simple，默认值，普通圆，扩散效果的相关设置对其无效
• wave，带波纹扩散效果的圆
• bubble，带冒泡扩散效果的圆

color

解释：颜色，同css颜色

类型：string

默认值：’blue’

size

解释：圆的半径大小，带扩散效果时指的是中心圆的半径大小

类型：number

默认值：10

radius

解释：扩散效果的半径大小，设置值时需要比size的值大，否则看不出扩散效果，也可设置为函数，传入参数为中心圆半径。

类型：number | function

默认值：

1
2
3
4

// size为中心圆的半径
function (size) {
    return 2 * size;
}

duration

解释：扩散效果的动画周期。

• wave类型时duration影响的是波纹的扩散速度，越小越快
• bubble类型时duration是扩散开始到最大半径的时间，越大越长

类型：number

默认值：1

trial

解释：扩散效果的间隔时间。

• wave类型时trial影响的是波纹数，越大越多
• bubble类型时trial是扩散最大半径到消失的时间，越大越长

类型：number

默认值：1

random

解释：扩散效果的开始时间是否随机，设置为‘false’则表现为节奏一致。

类型boolean

默认值：true

data内容

数据格式内容：

1
2
3
4
5
6
7
8
9

[{
    geometry: {
        type: 'Point',
        coordinates: [116.392394, 39.910683]
    },
    // 可对单个点设置颜色和大小
    color: 'red',
    size: 8
}]