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

Question

在singleMarkerMode下使用图标时，无法正常使用 link

但是移除<l-icon />后，它会正常工作

可以同时使用吗？

28/02

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

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

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

在代码 2 中，我尝试将初始 singleMarkerMode 设置为 false 并使用 @update:zoom 检查缩放，当它 < disableClusteringAtZoom 时，然后将 singleMarkerMode 设置为 true 并使用 refreshClusters()

结果：初始图标为自定义图标，当缩放<15时，图标被更改，但之后，当缩放>=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);
  },
};

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

How to overwrite the icon when using vue2-leaflet-markercluster (singleMarkerMode)?

leaflet

vue.js

leaflet.markercluster

vuejs2

vue2leaflet