1

在 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>
4

1 回答 1

2

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

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

要访问 MarkerClusterGroup 对象，只需ref在相应的模板标签上设置 a，如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);
  },
};
于 2021-02-27T18:56:42.337 回答