Capa de agregación de folletos --- Leaflet.markercluster

Autor: Liu

Leaflet.markercluster es un complemento de visualización que se usa ampliamente en Leaflet. En este artículo, explicaremos las propiedades y los métodos del complemento.

#### 1. Atributos
En la dirección de gitbub de markercluster https://github.com/Leaflet/Leaflet.markercluster, se ha introducido en detalle el uso y la función de cada atributo. El siguiente es un breve resumen a través de una tabla.

El siguiente se enfoca en spiderfyShapePositions y iconCreateFunction
##### 1.1 spiderfyShapePositions usa spiderfyShapePositions
en la versión de markercluster 1.4.1. Este atributo no es válido, puede verificar https://github.com / Leaflet / Leaflet .markercluster / issues / 994 se
debe principalmente a que no hay un método personalizado agregado en la versión 1.4.1. Podemos volver a unirnos antes de usar, el código es el siguiente

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

Comparación antes y después del uso:

A partir de esto, podemos formular la forma dispersa de acuerdo con nuestras propias necesidades comerciales.
Si no desea personalizarlo, puede usar el sub-complemento 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>' });
	}

#### 2. Evento y método El
evento puede ser el mismo que el evento L. Marker, pero debe agregar el
método 'cluster' delante de él, que se puede resumir como

hacer clic para determinar el número y propagar o zoom

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

Se pueden llamar a otros eventos y métodos según las necesidades específicas.