# 聚合图层（ClusterLayer）

提示

本图层包含了多个图层，用于展示多个聚合级别，开发者可以为不同级别下的图层配置不同的样式。

图层的聚合分为两种：

按照距离聚合，也称为 circle 类的聚合；
按照数据的字段聚合，也称为 type 类的聚合，通过对数据进行逆地理编码，可以实现按照数据的行政区划进行聚合。

聚合图层用于实现对点类型的聚合效果，可以按照距离聚合或者字段聚合。

new aimap.ClusterLayer(layerOptions: Object)

# 初始化参数

# LayerOptions参数说明

字段名	类型	说明
id	`string`	默认值为`${type}.${uuid}`，该值不允许重复。
map	`Map`	地图对象，如果设置，该图层会自动加载到地图中，如果未设置，需要手动加载图层：`addTo(map)`。
zIndex	`number ｜ string`	图层在地图中所属的垂直方向的位置索引，默认为 0。
images	`Array<Image>`	如果指定`icon-image`样式，需要在这里添加图片，具体参见：Image 配置。
layers`必须`	`Array<LogicLayerOptions>`	包括各级点图层的配置项。具体参见：layers。
cluster	`ClusterOptions`	数据聚合的配置，详细内容参见：ClusterOptions。

# layers

本图层为聚合图层中的子图层，以下的几个属性需按照说明，其余的属性参考 LogicLayerOptions 配置。

当按照半径聚合时，需要使用 name 为 cluster 的图层作为数据聚合的图层。

当按照字段进行聚合时，可以自定义多个不同层级的聚合图层，这些不同层级的聚合图层的 name，需要在 ClusterOptions 的 Fields 中体现。

字段名	类型	说明
data	`Data`	无需指定。
style	`Style`	本图层支持与点相关的样式配置，包括： - 圆点样式（Circle） - 文字样式（Text） - 图标样式（Icon） - 文本和图标通用样式（Symbol）。

# ClusterOptions

# 按半径聚合

字段名	类型	说明
type	`string`	固定值：`circle`。
radius	`number`	聚合的半径，单位：像素，默认值：50。
maxZoom	`number`	聚合生效的最大缩放层级。当地图缩放级别大于这个值之后，数据将不再被聚合。

# 按字段聚合

字段名	类型	说明
type	`string`	固定值：`field`。
fields	`Array<Field>`	在各个子图层中，需要依据哪些字段，对数据进行聚合。

Field

字段名	类型	说明
name	`string`	对应创建图层时，`layers` 属性中指定的各个子图层的`name`。
fields	`Array<string>`	需要使用数据的哪些字段进行聚合。

# 示例

var clusterLayer = new aimap.ClusterLayer({
    map,
    images: [{
        id: 'company-blue',
        type: 'png',
        url: 'path_to_an_image.png'
    }],
    layers: [
        {
            data:  clusterData,
            minZoom: 13,
            style: {
                'icon-image': 'company-blue',
                'icon-allow-overlap': true,
                'icon-size': 0.3,
                'icon-anchor': 'bottom',
            },
        },
        {
            name: 'cluster1',
            minZoom: 7,
            maxZoom: 9,
            style: {
                'text-size': 22,
                'text-field': '{name}',
                'text-anchor': 'top',
                'text-color': '#6EEEFC',
                'icon-image': 'company-blue',
                'icon-allow-overlap': true,
                'icon-size': 0.3,
                'icon-anchor': 'bottom',
            },
            data:  clusterData,
        },
        {
            name: 'cluster2',
            minZoom: 9,
            maxZoom: 12,
            style: {
                'text-size': 32,
                'text-field': '{name}',
                'text-anchor': 'top',
                'text-color': '#6EEEFC',
                'icon-image': 'company-blue',
                'icon-allow-overlap': true,
                'icon-size': 0.3,
                'icon-anchor': 'bottom',
            },
            data:  clusterData,
        },
        {
            name: 'cluster3',
            minZoom: 12,
            maxZoom: 13,
            style: {
                'text-size': 42,
                'text-field': '{name}',
                'text-anchor': 'top',
                'text-color': '#6EEEFC',
                'icon-image': 'company-blue',
                'icon-allow-overlap': true,
                'icon-size': 0.3,
                'icon-anchor': 'bottom',
            },
            data:  clusterData,
        }
    ],
    cluster: {
        type: "field",
        fields: [
            {
                name: 'cluster1',
                field: ["district"]
            },
            {
                name: 'cluster2',
                field: ["district", "township"]
            },
            {
                name: 'cluster3',
                field: ["district", "township", "neighborhood"]
            }
        ]
    },
});

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

# 实例变量

# id

此图层的 id，如果在初始化图层的参数中指定，则为参数中的 id，否则 SDK 内部会自动生成一个 id。

# 示例

var clusterLayer = new aimap.ClusterLayer({...});
console.log(clusterLayer.id); // "cluster.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"

1
2

# type

此图层的类型，对于本图层， type 为固定值：cluster。

# 示例

var clusterLayer = new aimap.ClusterLayer({...});
console.log(clusterLayer.type); // "cluster"

1
2

# 实例方法

addTo(map)

如果在初始化图层时，没有传入地图对象参数，则需要使用此方法来将图层添加到地图上。

参数

map(Map)：需要添加本图层的地图对象。

返回值

ClusterLayer：this

remove()

将本图层从地图中移除，并销毁相关的资源。

返回值

ClusterLayer：this

show()

显示该图层。

返回值

ClusterLayer：this

hide()

隐藏该图层。

返回值

ClusterLayer：this

setzIndex(zIndex, options?)

设置图层在 z 轴上的顺序。数值越大，层级越高。

参数

zIndex(number | String)：大于 0 的整数或者表示地图初始化样式中自带的图层 id。

options(SetzIndexOptions)：设置层级的更多参数，具体参见：SetzIndexOptions 配置。

返回值

ClusterLayer：this

flyTo(options?)

使地图带有动画的跳转，使得图层的中心点位于屏幕中间。

参数

options(SetFocusOptions)：跳转动画的更多参数，具体参见：SetFocusOptions 配置。

返回值

ClusterLayer：this

fitView(options?)

使地图带有动画的跳转，使得图层的数据铺满屏幕。

参数

options(SetFocusOptions)：跳转动画的更多参数，具体参见：SetFocusOptions 配置。

返回值

ClusterLayer：this

setStyle(style, options?)

增量更新图层的样式。

参数

style(style)：样式对象，这些样式将增量更新到图层已有的样式上，支持的样式与当前图层一致。

options(SetStyleOptions)：设置新样式的其他配置项，具体参见：SetStyleOptions 配置。

返回值

ClusterLayer：this

setPopup(popup, options)

为图层设置弹窗对象。

参数

popup(Popup | string)：Popup对象，或者弹窗中想要显示的内容文本。 options(Options)：弹窗的配置项，具体参见：Popup 配置

返回值

ClusterLayer：this

getPopup()

获取图层的弹窗对象，如果没有调用过 setPopup 接口，将返回null。

返回值

Popup：图层的弹窗对象。

togglePopup()

切换弹窗的显示，隐藏效果。

返回值

ClusterLayer：this

on(type, listener)

为图层绑定事件监听。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：如果此处使用匿名函数，则后续将无法解绑。

返回值

ClusterLayer：this

once(type, listener)

为图层绑定事件监听，事件只会响应一次。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：如果此处使用匿名函数，则后续将无法解绑。

返回值

ClusterLayer：this

off(type, listener)

解除已绑定事件监听。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：通过 on 或者 once 绑定的事件对象。

返回值

ClusterLayer：this

# 图层事件

mousedown

当鼠标点击图层时触发。

mouseup

当鼠标在图层中松开时触发。

click

当鼠标在图层同一点处点击并松开时触发。

dblclick

当鼠标双击图层同一点时触发。

mousemove

当鼠标在图层中移动时触发。

mouseenter

当鼠标从某一图层外部或地图画布外部进入当前图层的可见部分时触发。

mouseleave

当鼠标离开当前图层的可见部分时触发。

← 轨迹图层（TrackLayer）下钻图层（DrillingLayer） →