1

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

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

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

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

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);
4

1 回答 1

1

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

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

我将if条件更改如下：

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

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

于 2017-12-23T10:02:57.100 回答