带自定义图标的Leaflet SuperCluster标记？

Posted 2021-04-13

有没有办法在使用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);

答案

对代码的更有针对性的理解解决了这个问题。

createClusterIcon函数中的if条件应该用于创建自定义图标，该函数在特征没有集群属性时返回L.marker。

我更改了if条件如下：

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

        }

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