IconClusterLayer

图标聚合图层，适用于大量数据的聚合展示，可以自定义聚合半径及聚合后展示的图标和文字，由TextLayer、IconLayer组合而成。

示例

动手试试

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.IconClusterLayer({
    minSize: 25,
    maxSize: 40,
    clusterRadius: 200,
    showText: true,
    maxZoom: 19,
    minZoom: 4,
    textOptions: {
        fontSize: 12,
        color: 'white',
        format: function (count) {
                return count;
        },
        offset: [0, -30],
    },
    iconOptions: {
        width: 30,
        height: 30,
    },
    enablePicked: true,
    iconExtent: {
        0: 'images/icon1.png',
        1000: 'images/icon2.png',
        5000: 'images/icon3.png',
        10000: 'images/icon4.png'
    },
    onClick(e) {
        if (e.dataItem) {
            // 可通过dataItem下面的children属性拿到被聚合的所有点
            console.log(e.dataItem);
        }
    }
    data: [{
        geometry: {
            type: 'Point',
            coordinates: [116.403748, 39.915055]
        }
    }]
});

options属性

clusterRadius

解释：聚合半径，像素值

类型：number

默认值：200

showText

解释：是否显示文字

类型：boolean

默认值：true

minZoom

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

类型：number

默认值：4

maxZoom

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

类型：number

默认值：19

textOptions

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

类型：object

额外参数：

  • format

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

    类型：function

    默认值：无

iconOptions

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

类型：object

enablePicked

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

类型：boolean

默认值：false

data内容

数据格式内容：

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

icon设置

可在properties直接对单个点设置icon，可以使用iconExtent来选择不同聚合程度所对应的图标。

iconExtent

解释：根据不同聚合程度选择对应的图标，key为聚合点数目

类型：Object

格式：

1
2
3
4
5
6
{
    0: 'images/icon1.png',
    1000: 'images/icon2.png',
    5000: 'images/icon3.png',
    10000: 'images/icon4.png'
}