使用vue2-leaflet-markercluster（singleMarkerMode）时如何覆盖图标？

Question

在 singleMarkerMode 中使用图标时，将无法正常工作 link

但是当删除<l-icon />时，它会正常工作

可以同时使用吗？

---

28/02

在代码 1 中，我认为 refreshClusters() 会考虑 disableClusteringAtZoom。

所以我尝试在mounted中使用refreshClusters()。

结果：程序不考虑disableClusteringAtZoom，立即更改图标。

在代码 2 中，我尝试将初始 singleMarkerMode 设置为 false 并使用 @update:zoom 来检查缩放，当它

结果：初始图标为自定义图标，当缩放=15时，无法改回自定义图标。

任何想法如何改回自定义图标？ 或者任何使 singleMarkerMode 工作方式类似于 markercluster (multi) 的方法

代码1

<template>
  <div>
    <div>
      ...
      <l-marker-cluster
        :options="{
          singleMarkerMode: true,
          spiderfyOnMaxZoom: false,
          disableClusteringAtZoom: 15,
        }"
        ref="clusterRef"
      >
        <l-marker :lat-lng="marker">
          <l-icon
            :icon-url="icon.type.black"
            :shadow-url="icon.shadowUrl"
            :icon-size="icon.iconSize"
            :icon-anchor="icon.iconAnchor"
            :popup-anchor="icon.popupAnchor"
            :shadow-size="icon.shadowSize" />
         </l-marker>
       </l-marker-cluster>
    ...
  </div>
</template>

<script>
import ...
export default {
  components: {...},
  data() {...},
  mounted() { 
    setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 100);
  }
};
</script>

代码2

    ...
      <l-map :@update:zoom="changeZoom" ...>
        ...
      <l-marker-cluster
        :options="{
          singleMarkerMode: singleMode,
          spiderfyOnMaxZoom: false,
          disableClusteringAtZoom: 15,
        }"
        ref="clusterRef"
      >
        <l-marker :lat-lng="marker">
          <l-icon
            :icon-url="icon.type.black"
            :shadow-url="icon.shadowUrl"
            :icon-size="icon.iconSize"
            :icon-anchor="icon.iconAnchor"
            :popup-anchor="icon.popupAnchor"
            :shadow-size="icon.shadowSize" />
         </l-marker>
       </l-marker-cluster>
    ...

<script>
import ...
export default {
  components: {...},
  data() {
    singleMode: false 
  ...},
  mounted() {},
  methods: {
    changeZoom(zoom) {
      if(zoom < 15) {
        this.singleMode = true;
        setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 100);
      }
      else this.singleMode = false;
    }
  }
};
</script>

Answer 1

Leaflet.markercluster 如何覆盖 singleMarkerMode 中的标记图标与 Vue2Leaflet 如何根据 <l-icon> 子项的存在（重新）设置图标之间似乎存在“冲突”。

好消息是您可以指示 Leaflet.markercluster 使用其 refreshClusters() method 重新覆盖您的标记图标，因此只需在短暂延迟后调用它即可。

要访问 MarkerClusterGroup 对象，只需在相应的模板标签上设置一个ref，如https://github.com/jperelli/vue2-leaflet-markercluster#access-markercluster-layer-directly中所述

<l-marker-cluster ref="clusterRef">

export default {
  mounted() {
    setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 1000);
  },
};