使用 vue2-leaflet-markercluster (singleMarkerMode) 时如何覆盖图标？

问题描述

在 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,}"
        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>

解决方法

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);
  },};