النشرة كتلة اللون على أساس الرموز داخل
-
22-12-2019 - |
سؤال
لدي دبابيس على 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
كما أفعل أعلاه, ولكن لا يبدو أن يكون هناك.
المحلول
يمكنك استخدام 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 });
},
});