如何解决使用 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);
},};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。