本文共 2703 字，大约阅读时间需要 9 分钟。

作者：刘大

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 iconCreateFunction

resultLayer = L.markerClusterGroup({        spiderfyOnMaxZoom: false,        showCoverageOnHover: false,        zoomToBoundsOnClick: false,        iconCreateFunction: function(cluster) {		return L.divIcon({ className:'customstyle',html: '
   
    ' + cluster.getChildCount() + '
   
' });	}

####2.事件&方法 事件可L.Marker事件一样，只是需在前面添加‘cluster’ 方法可概括为 点击判断个数并进行散开或缩放

resultLayer.on('clusterclick',function(a){        if(a.layer.getChildCount()<20){           a.layer.spiderfy()          } else {            a.layer.zoomToBounds()        }    })

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

转载地址：http://espxi.baihongyu.com/