带自定义图标的宣传单集群标记

Question

我已成功将我的标记集群化。我现在想要做的是显示一个自定义图标，其中包含了集群中的点数，但我无法弄清楚如何去做，或者甚至有可能。

我阅读文档，并理解我需要在创建标记集群时实现自己的iconCreateFunction。

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

我知道我可以用自定义CSS类和cluster.getChildCount()返回L.divIcon，但我不能指定markerProperties.iconUrl作为应显示的图像。 我也可以使用L.icon与我的自定义图标markerProperties.iconUrl，但在这种情况下，我看不到应该如何显示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; 
} 

可能有其他的方式...