内部のアイコンに基づくリーフレットクラスタの色

Question

私は私のLeaflet.jsマップにピンがあります。画像が、表現しているオブジェクトのステータスによって決定されます。たとえば、オンラインおよびオフラインユーザー - オンラインは緑色で、オフラインは赤です。 Diviconにクラスを追加してからCSSで画像を制御することでこれを行います。

私は現在マップにマーカークラスタリングを追加しました。私がやりたいことは、クラスタ内の massual のによってクラスタの色を決定することです。私の最初の考えはこのようなことをすることでした：

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でクラスにアクセスできます。HTMLにmarker.options.icon.options.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 });
  },
});

.