사용자 정의 아이콘이있는 전단지 clustermarker

Question

내 마커를 클러스터 관리했습니다. 지금하고 싶은 것은 클러스터의 포인트 수와 함께 사용자 정의 아이콘을 표시하는 것입니다. 그러나이를 수행하는 방법이나 가능한 경우 알아낼 수 없습니다.

마커 클러스터를 만들 때 설명서를 읽고 자체 iconCreateFunction을 구현해야한다는 것을 알고 있습니다.

addSomeMarkers: function(data, markerProperties) { 
    var markers = L.markerClusterGroup({ 
     iconCreateFunction: function(cluster) { 
     // TODO 
     } 
    }); 
    .... 
} 

은 내가 정의 CSS 클래스와 cluster.getChildCount()와 L.divIcon를 반환 할 수 알지만, 표시되어야합니다 이미지로 markerProperties.iconUrl를 지정할 수 없습니다. markerProperties.iconUrl의 사용자 정의 아이콘과 함께 L.icon을 사용할 수도 있지만,이 경우에는 표시 방법이 보이지 않습니다. cluster.getChildCount().

그래서 내가 필요한 것은이 두 가지를 조합 한 것입니다. 그런 것이 있습니까? 그리고 그렇지 않다면, 누군가 이것을 해결하기위한 해결 방법을 암시 할 수 있습니까? 여기에 예를 사용

Answer 1

: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-custom.html

그리고 L.divIcon의 문서는 여기에 있습니다 : http://leafletjs.com/reference.html#divicon

내가이 예를 내놓았다 : http://franceimage.github.io/leaflet/8/?map=46.566414,2.4609375,6 희망

가 당신에게

도움이 될 것입니다

의미있는 부분은 다음과 같습니다.

var markerCluster = new L.MarkerClusterGroup({ 
    iconCreateFunction: function (cluster) { 
     var markers = cluster.getAllChildMarkers(); 
     var html = '<div class="circle">' + markers.length + '</div>'; 
     return L.divIcon({ html: html, className: 'mycluster', iconSize: L.point(32, 32) }); 
    }, 
    spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: false 
}); 

과 CSS

.circle { 
    width: 32px; 
    height: 32px; 
    line-height: 32px; 
    background-image: url('circle.png'); 
    text-align: center; 
} 

다른 방법이있을 수 있습니다 ...이 생각하지 않았다 날