渲染一个标记的 divIcon 而不是集群标记

Question

我试图只渲染一个（div）标记图标而不是集群标记：

iconCreateFunction: createClusterIcon(cluster) {
    return cluster.getAllChildMarkers()[0].getIcon()
}

我没有任何想法，因为没有显示任何错误。在示例中，iconCreateFunction 的工作方式如下：

return L.divIcon({html: '<b>' + cluster.getChildCount() + '</b>'});

有人有什么想法吗？

Answer 1

看起来这是不可能的，但我找到了解决方法。可能对某人有帮助。

创建标记时，我将选项传递给渲染图标所需的所有数据：

L.marker([Lat, Lng], {
    // other marker options go here,
    sourceData: {
        // data that I need for rendering the icon
    }
})

然后在 iconCreateFunction 中，我简单地使用从标记获得的数据再次渲染图标：

const markersData = cluster.getAllChildMarkers()             // all markers of the cluster
        .filter(markerData => markerData.options.sourceData) // get only markers with sourceData specified

markersData[0] // contains the data of the first of the markers

它允许我根据数据选择一个标记。

如果我不想再次渲染一个图标，我可以在创建它时将一些 id 传递给我的标记的子 DivIcon

var myIcon = L.divIcon({html: '<div data-icon-id="123123"></div>'});

稍后 iconCreateFunction 只需从 DOM:

中获取它

cont html = document.querySelector(`[data-icon-id="123123"]`).outerHTML

return L.divIcon({html})

渲染一个标记的 divIcon 而不是集群标记

Render divIcon of one marker instead of cluster marker

leaflet.markercluster