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

Question

我的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: /* ?? */ });
    }
});

但遗憾的是，我无法访问getAllChildMarkers返回的数组中的HTML元素。

任何人对我如何能够这样做有任何想法？ 或者获取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());

我认为我将能够访问_icon从返回getAllChildMarkers像我上面做的，但它似乎并不在那里。

Answer 1

您可以使用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 });
  },
});