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

Question

我已经设法将我的标记聚集在一起。我现在想要做的是显示一个带有集群中点数的自定义图标，但我不知道如何做到这一点，或者是否有可能。

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

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

我知道我可以使用自定义 css 类和 返回 L.divIcon cluster.getChildCount()，但我不能指定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;
}

可能还有其他方法...