النشرة كتلة اللون على أساس الرموز داخل

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

ولكن للأسف أنا لست قادرا على الوصول إلى عناصر HTML من مجموعة عاد من getAllChildMarkers.

أي شخص لديك أي أفكار حول كيف يمكن أن تكون قادرة على القيام بذلك ؟ أو وسيلة للحصول على دبوس 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 });
  },
});