Leaflet聚合图层---Leaflet.markercluster_markercluster 所有属性

作者：刘大

Leaflet.markercluster是Leaflet中运用比较多的一个可视化插件，本文我们就细说下该插件下的属性和方法。

####1.属性
在markercluster的gitbub地址https://github.com/Leaflet/Leaflet.markercluster上，已经详细介绍了各个属性的用法和作用。下面也通过一张表简单总结下

下面重点说下spiderfyShapePositions和iconCreateFunction
#####1.1 spiderfyShapePositions
在markercluster 1.4.1的版本中使用spiderfyShapePositions该属性无效，可查看https://github.com/Leaflet/Leaflet.markercluster/issues/994
主要是因为1.4.1版本中未加入改自定义的方法。我们可在使用前重新加入，代码如下

  L.MarkerCluster.include({ spiderfy: function () {
	if (this._group._spiderfied === this || this._group._inZoomAnimation) {
		return;
	}

	var childMarkers = this.getAllChildMarkers(null, true),
		group = this._group,
		map = group._map,
		center = map.latLngToLayerPoint(this._latlng),
		positions;

	this._group._unspiderfy();
	this._group._spiderfied = this;

	//TODO Maybe: childMarkers order by distance to center

	if (this._group.options.spiderfyShapePositions) {
		positions = this._group.options.spiderfyShapePositions(childMarkers.length, center);
	} else if (childMarkers.length >= this._circleSpiralSwitchover) {
		positions = this._generatePointsSpiral(childMarkers.length, center);
	} else {
		center.y += 10; // Otherwise circles look wrong => hack for standard blue icon, renders differently for other icons.
		positions = this._generatePointsCircle(childMarkers.length, center);
	}

	this._animationSpiderfy(childMarkers, positions);
}});
    resultLayer = L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: false,
        spiderfyShapePositions: function(count, centerPt) {
                var distanceFromCenter = 35,
                    markerDistance = 45,
                    lineLength = markerDistance * (count - 1),
                    lineStart = centerPt.y - lineLength / 2,
                    res = [],
                    i;

                res.length = count;

                for (i = count - 1; i >= 0; i--) {
                    res[i] = new L.Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i);
                }

                return res;
            }
    });
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

使用前后对比：

由此我们就可以根据自己的业务需求制定散开的形状了
如果你不想自定义，可以使用该插件下的子插件Leaflet.MarkerCluster.PlacementStrategies
#####1.2 iconCreateFunction

 resultLayer = L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: false,
        iconCreateFunction: function(cluster) {
		return L.divIcon({ className:'customstyle',html: '<div class="customstyle">' + cluster.getChildCount() + '</div>' });
	}
1
2
3
4
5
6
7

####2.事件&方法
事件可L.Marker事件一样，只是需在前面添加‘cluster’
方法可概括为

点击判断个数并进行散开或缩放

    resultLayer.on('clusterclick',function(a){
        if(a.layer.getChildCount()<20){
           a.layer.spiderfy()  
        } else {
            a.layer.zoomToBounds()
        }
    })
1
2
3
4
5
6
7

其他事件和方法可以根据具体需求进行调用。