Leaflet Marker Cluster为标记添加重量

时间:2016-01-22 15:43:54

标签: leaflet markerclusterer

我有一个传单地图,我正在使用Leaflet.markerCluster插件来聚类我的标记。我有一些标记代表同一位置的多个点。不幸的是,当它聚集时,它只代表一个单点。有没有办法为每个标记添加重量?那么集群认为它不止一个点?

基本上我希望有一个像下面这样的clusterWeight属性:

var newMarker = L.marker(coordinates, {
            icon: myIcon,
            clusterWeight: 5
        });

然而,这种情况并不存在。有人知道一个解决方法吗?谢谢!

1 个答案:

答案 0 :(得分:2)

首先,您需要创建一个支持自定义属性的标记。您可以通过扩展默认L.Marker来执行此操作:

var weightMarker = L.Marker.extend({
   options: { 
      customWeight: 0
   }
});

然后,您可以使用Leaflet.markercluster的iconCreateFunction创建自定义群集标记,方法是更改​​标记上显示的内容:

var markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // iterate all markers and count
        var markers = cluster.getAllChildMarkers();
        var weight = 0;
        for (var i = 0; i < markers.length; i++) {
            if(markers[i].options.hasOwnProperty("customWeight")){
            weight += markers[i].options.customWeight;                
          }
        }

        var c = ' marker-cluster-';
        if (weight < 10) {
            c += 'small';
        } else if (weight < 100) {
            c += 'medium';
        } else {
            c += 'large';
        }
        // create the icon with the "weight" count, instead of marker count
        return L.divIcon({ 
            html: '<div><span>' + weight + '</span></div>',
            className: 'marker-cluster' + c, iconSize: new L.Point(40, 40)
        });
    }
});

演示:https://jsfiddle.net/chk1/0hq1t13t/