ClusterLayer

点聚合图层，适用于大量数据点的聚合展示，可自定义聚合半径及聚合后展示的样式，由PointLayer、IconLayer与TextLayer组合而成。

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var layer = new mapvgl.ClusterLayer({
    minSize: 25,
    maxSize: 40,
    clusterRadius: 200,
    showText: true,
    maxZoom: 19,
    minZoom: 4,
    gradient: {
        0.0: 'rgb(50, 50, 256)',
        0.1: 'rgb(50, 250, 56)',
        0.5: 'rgb(250, 250, 56)',
        1.0: 'rgb(250, 50, 56)'
    },
    textOptions: {
        fontSize: 12,
        color: 'white',
        format: function (count) {
                return count;
        }
    },
    iconOptions: {
        width: 30,
        height: 30,
        icon: 'images/icon.png',
    },
    enablePicked: true,
    onClick(e) {
        if (e.dataItem) {
            // 可通过dataItem下面的children属性拿到被聚合的所有点
            console.log(e.dataItem);
        }
    }
    data: [{
        geometry: {
            type: 'Point',
            coordinates: [116.403748, 39.915055]
        }
    }]
});

options属性

minSize

解释：聚合点展示的最小直径

类型：number

默认值：25

maxSize

解释：聚合点展示的最大直径

类型：number

默认值：40

clusterRadius

解释：聚合半径，像素值

类型：number

默认值：200

showText

解释：是否显示文字

类型：boolean

默认值：true

maxZoom

解释：聚合的最大地图级别，当地图级别高于此值时不再聚合

类型：number

默认值：19

minZoom

解释：聚合的最小地图级别，当地图级别低于此值时不再聚合

类型：number

默认值：4

gradient

解释：聚合点的颜色梯度，属性名0~1之间，属性值同css颜色值，通过Intensity拾取。

类型：object

默认值：

1
2
3
4
5
6
{
    0.0: 'rgb(50, 50, 256)',
    0.1: 'rgb(50, 250, 56)',
    0.5: 'rgb(250, 250, 56)',
    1.0: 'rgb(250, 50, 56)'
}

textOptions

解释：设置文字属性，支持文字图层所有参数。

类型：object

额外参数：

  • format

    解释：支持格式化显示的数字，传入参数为单个聚合点的数量值，不配置此属性则显示原值。

    类型：function

    默认值：无

iconOptions

解释：设置非聚合点显示的icon属性，而非显示一个点，支持Icon图层所有参数。

类型：object

enablePicked

解释：是否开启鼠标拾取，若想使用click等事件，需设置为true。

类型：boolean

默认值：false

事件

函数参数

对于聚合点，能够通过返回的参数里的dataItem.children获取到当前被聚合的所有原始点。

data内容

数据格式内容：

1
2
3
4
5
6
7
8
9
10
11
12
[{
    geometry: {
        type: 'Point',
        coordinates: [116.403748, 39.915055]
    },
    // icon: 'images/icon1.png'，
    properties: {
        icon: 'images/icon1.png'，
        width: 30,
        height: 30
    }
}]

icon设置

可直接对单个点设置icon，若需指定宽高需放在properties属性里