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

可能有其他方式......

单张群集标记与自定义图标

1 个答案: