안쪽 아이콘을 기반으로 전단지 클러스터 색상

Question

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에 액세스 할 수 있다고 생각했지만 거기에있는 것처럼 보이지 않습니다.

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 });
  },
});

.