基于内部图标的宣传单集群颜色

我在我的leaflet.js地图上有图钉由他们所代表的对象的状态决定。例如，在线和离线用户 - 在线为绿色，离线为红色。我通过向divIcon添加一个类然后用css控制图像来实现这一点。基于内部图标的宣传单集群颜色

我现在添加了标记聚类到我的地图。我想要做的是通过集群内状态'大多数'来确定集群的颜色。我的第一个想法是做这样的事情：

this.markers = L.markerClusterGroup({ 
    iconCreateFunction: function(cluster) { 
     // Use this somehow to filter through and look at the pin elements 
     console.log(cluster.getAllChildMarkers()); 

     return new L.DivIcon({ html: /* ?? */ }); 
    } 
});

但不幸的是，我不能够访问HTML元素从数组从getAllChildMarkers返回。

任何人有任何想法，我怎么能够做到这一点？或者一种获取该pin的HTML元素的方法？

感谢

编辑：

这里是我创造我的地图引脚（分配给我的骨干模型mapPin属性）：

that.mapPins.org = L.divIcon({ 
className: 'org-div-icon', 
    html: "<div class='org-status "+ org.getGroupStatus() +"'></div>", 
    iconSize: [35, 35], 
    iconAnchor: [18, 17] 
});

这里是我如何动态地更改类：

$(model.get('mapPin')._icon).find('.org-status').attr('class', 'org-status ' + model.getGroupStatus());

我以为我能够从getAllChildMarkers的回报中获得_icon，就像我上面做的那样，但它似乎并不存在。

来源

2014-02-27 Troy Cosentino

您可以使用getAllChildMarkers来获取群集中的所有标记。一旦你有一个标记，你可以通过marker.options.icon.options.className访问它的课程。你可以用marker.options.icon.options.html

访问HTML下面是一个使用underscore.js功能计数标志的数量与每个类，找到一个最流行的，并使用类簇标记一些代码。

var markers = L.markerClusterGroup({ 
    iconCreateFunction: function (cluster) { 
    var childMarkers = cluster.getAllChildMarkers(); 
    // count how many there are of each class 
    var counts = _.countBy(childMarkers, function(marker) { 
     // class at icon level 
     //return marker.options.icon.options.className; 
     // class inside html 
     return $(marker.options.icon.options.html).attr('class'); 
    }); 
    // get the class with the highest count 
    var maxClass = _.invert(counts)[_.max(counts)]; 
    // use this class in the cluster marker 
    return L.divIcon({ html: cluster.getChildCount(), className: maxClass }); 
    }, 
});

来源

2014-02-27 17:00:51 kielni

我应该指定..我随着时间的推移动态更新类。所以className选项实际上并不用于分配我正在寻找的类。我将编辑以显示我如何更新类 –

您可以通过marker.options.icon.options.html获取html，然后使用jQuery来提取类属性。 – kielni

这只是在开始时的选项中定义的html，我正在动态更改它 - 我需要获取更新的html –

基于内部图标的宣传单集群颜色

回答

相关问题