带有自定义图标的传单 SuperCluster 标记？答案

【问题标题】：Leaflet SuperCluster markers with Custom Icons?带有自定义图标的传单 SuperCluster 标记？
【发布时间】：2017-12-23 07:03:07
【问题描述】：

有没有办法在使用Leaflet SuperCluster时更改默认标记图标？

我按照演示中给出的示例进行操作。我能够让 Supercluster 工作并能够创建集群。但是各个标记都有默认的传单标记图标，该图标来自示例中的 createClusterIcon 方法。

我有不同类型的标记，希望每个标记有不同的图标。

具有pointToLayer功能的geoJSON层被Supercluster用来创建集群图标。我们如何修改或自定义它以创建集群图标并为每个标记提供自定义图标？

createClusterIcon 方法 -

function createClusterIcon(feature, latlng) {
    if (!feature.properties.cluster) return L.marker(latlng);

    var count = feature.properties.point_count;
    var abbrev = feature.properties.point_count_abbreviated;
    var size =
        count < 100 ? 'small' :
        count < 1000 ? 'medium' : 'large';
    var icon = L.divIcon({
        html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
        className: 'marker-cluster marker-cluster-' + size,
        iconSize: L.point(40, 40)
    });
    return L.marker(latlng, {icon: icon});
}

添加到地图的geoJSON图层

var markers = L.geoJson(null, {
pointToLayer: createClusterIcon}).addTo(map);

使用 addData 方法将标记添加到 geoJSON 层

markers.clearLayers();
markers.addData(e.data);

【问题讨论】：

标签： leaflet leaflet.markercluster

【解决方案1】：

对代码的更集中的理解解决了这个问题。

createClusterIcon 函数中的 if 条件，当该功能没有cluster 属性时返回一个L.marker，应该用于创建自定义图标。

我改变了if条件如下：

if (!feature.properties.cluster) {
    let icon = L.icon({
        iconUrl: '<icon_url>',
        iconSize: [40,40]
    })
    return L.marker(latlng, {
        icon: icon
    });
}

现在每个标记都将具有由iconUrl 表示的图标。

【讨论】：