안쪽 아이콘을 기반으로 전단지 클러스터 색상
-
22-12-2019 - |
문제
I 형이 나타내는 객체의 상태로 이미지가 결정되는 내 리프 렛 .JS지도에 핀이 있습니다. 예를 들어, 온라인 및 오프라인 사용자 - 온라인은 녹색이며 오프라인은 빨간색입니다. 나는 DivIcon에 클래스를 추가 한 다음 CSS로 이미지를 제어 하여이 작업을 수행합니다.
이제 MAGER 클러스터링을 MAP에 추가했습니다. 내가하고 싶은 것은 클러스터 내의 대다수 '의 대다수 에 의해 클러스터의 색을 결정하는 것입니다. 첫 번째 아이디어는 다음과 같이하는 것이 었습니다.
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 요소를 얻는 방법은 무엇입니까?
감사합니다
편집 :
여기서는 MAP 핀을 생성하는 곳입니다 (백본 모델의 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
로 해당 클래스에 액세스 할 수 있습니다.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 });
},
});
.