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

Question

我有多个级别的标记集群(子集群可以有集群等等)。
现在，当我单击父集群时，我想将自定义图标应用于父集群的所有子集群到子集群的底部。
我尝试收集所有子集群并将图标应用于它们，但它不起作用。

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

Answer 1

如果我理解正确，您想改变“ child ”的外观集群 单击的那个，即放大时出现的那些(但不是单个 标记 最终在放大到足够大时出现)？
在这种情况下，您可以依赖 Leaflet.markercluster iconCreateFunction option和 refreshClusters method :

使用 iconCreateFunction 创建您的 MCG这取决于一些标志来生成不同的图标。

在单击事件监听器中，标记所有单个子项 标记带有某种标志。您可以使用 getAllChildMarkers method检索这些标记，正如伊万所指出的。

使用 refreshClusters method要求 MCG 重新评估您的 iconCreateFunction在这些标记的父集群上。

如果您想更改仅属于某个缩放级别的集群的图标(例如，被点击的，和/或直接子集群的 1 级)，您可以将这些缩放级别存储在某种状态，并且将它们与集群的 _zoom 进行比较iconCreateFunction内的属性(property).

如果您想重置集群，只需清除标志并再次调用 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();
});