时间戳

首页 > 解决方案 > 根据当前缩放传单更改 ClusterRadius

javascript - 根据当前缩放传单更改 ClusterRadius

问题描述

我正在尝试找到一种方法来根据当前缩放更改聚类半径。

我希望在较高的缩放级别上比在较低的缩放级别上更少的聚类，这是我想要实现的，但它工作得不是很好，有些东西丢失或做错了......

map.on('zoomend', function() {
    var currentZoom = map.getZoom();
    if (currentZoom > 9) {
        return 20
    } else {
        return 80
    }
});

var mcg = new L.MarkerClusterGroup({
    chunkedLoading: true,
    maxClusterRadius: currentZoom,
})

标签： javascriptleafletzoomingleaflet.markercluster

解决方案

  1. 您的currentZoom变量在地图 zoomend 事件的事件侦听器的内部范围内声明。您无法在该范围之外访问它。

  2. 更改分配给变量的原始值不会使所有其他分配相应地更新。然而，Leaflet.markercluster 插件 API 确实提供了一种方法来覆盖这个用例：而不是为maxClusterRadius选项提供原始值，而是提供一个返回给定地图缩放级别的半径的函数：

https://github.com/Leaflet/Leaflet.markercluster#other-options

您还可以使用接受当前地图缩放并返回以像素为单位的最大集群半径的函数。

因此，在您的情况下：

L.markerClusterGroup({
    chunkedLoading: true,
    maxClusterRadius: function (mapZoom) {
        if (mapZoom > 9) {
            return 20;
        } else {
            return 80;
        }
    },
});

推荐阅读