单击父集群时，传单标记集群将自定义图标添加到所有子集群

Question

我有多个级别的标记集群（子集群可以有集群等等）。

现在，当我点击一个父集群时，我想将自定义图标应用到父集群的所有子集群到子集群的底部。

我尝试收集所有子集群并对其应用图标，但它不起作用。

cluster.on('clusterclick', (e) => {
  const childClusters = e.layer._childClusters; 
  for(const c of childClusters){
    c.options.icon = this.getSelectedClusterIcon();
  }
});

Answer 1

如果我没理解错的话，您想更改被单击的“子”簇的外观，即放大时出现的那些（但是不是放大到足够大时最终出现的单个标记？

在那种情况下，您可以依赖 Leaflet.markercluster iconCreateFunction option and refreshClusters method:

使用 iconCreateFunction 创建您的 MCG，它依赖于一些标志来生成不同的图标。
在点击事件侦听器中，用某种标志标记所有单独的子标记。正如 Ivan 所指出的，您可以使用 getAllChildMarkers method 来检索这些标记。
使用 refreshClusters method 请求 MCG 在这些标记的父集群上重新评估您的 iconCreateFunction。
如果您想更改仅属于某个缩放级别的集群的图标（例如，单击的那个，and/or直接子集群高 1 级），您可以存储这些在某些状态下缩放级别，并将它们与 iconCreateFunction.

_zoom

如果您想重置集群，只需清除标志并再次调用 refreshClusters 方法。

行中的内容：

const mcg = L.markerClusterGroup({
  iconCreateFunction(cluster) {
    const isHighlighted = cluster.getAllChildMarkers().some((marker) => marker.flaggedZooms && marker.flaggedZooms[cluster._zoom]);
    return isHighlighted ? myIconHighlighted : myNormalIcon;
  },
}).on("clusterclick", function (e) {
  // In case we want to reset all other Clusters
  mcg.eachLayer((marker) => delete marker.flaggedZooms);

  const cluster = e.layer;

  // Mark the zoom level on the child Markers,
  // in case we want to change cluster icons only on some zoom
  for (const marker of cluster.getAllChildMarkers()) {
    marker.flaggedZooms = marker.flaggedZooms || {}; // Initialize if not already done
    marker.flaggedZooms[cluster._zoom + 1] = true; // Flag other zoom levels if desired
  }

  // Ensure Clusters icons are redrawn
  mcg.refreshClusters();
});

单击父集群时，传单标记集群将自定义图标添加到所有子集群

leaflet markercluster add custom icon to all child cluster when a parent cluster is clicked

leaflet

leaflet.markercluster