javascript - 带有自定义图标的传单簇标记

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

可能还有其他方法...