Leaflet聚合图层---Leaflet.markercluster

最新推荐文章于 2024-09-13 22:06:16 发布

supermapsupport

最新推荐文章于 2024-09-13 22:06:16 发布

阅读量4.3k

点赞数 4

分类专栏： WebGIS 文章标签： javascript

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/112269052

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

作者：刘大

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

####1.属性
在markercluster的gitbub地址https://github.com/Leaflet/Leaflet.markercluster上，已经详细介绍了各个属性的用法和作用。下面也通过一张表简单总结下
属性.png
下面重点说下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;
            }
    });

使用前后对比：
设置前.png

设置后.png
由此我们就可以根据自己的业务需求制定散开的形状了
如果你不想自定义，可以使用该插件下的子插件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>' });
	}

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

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

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