传单 - 无法在缩放时更改圆形标记的半径

Question

我正在使用Leaflet 来可视化点数据，并且我正在尝试根据缩放级别更改圆的半径。

用户放大越多，半径就越大。

Work in progress available here.

这是我目前所拥有的。

第一行设置初始半径：

var damsRadius = 2;

然后我有一个 zoomend 事件来获取缩放级别，然后使用该缩放级别来确定新的半径：

map.on('zoomend', function(e) {
    var currentZoom = map.getZoom();
    console.log("Current Zoom" + " " + currentZoom);
    if (currentZoom <= 6) {
        damsRadius = 2;
    } else {
        damsRadius = 6;
    }
    console.log("Dams Radius" + " " + damsRadius);
});

我将半径设置为样式对象的一部分：

function damsStyle(feature) {
    return {
      fillOpacity: 0.8,
      fillColor: getColor(feature.properties.mainuse),
      weight: 1,
      opacity: 1,
      color: '#e0e0e0',
      radius: damsRadius // HERE IS WHERE I SET THE RADIUS
    };
}

然后稍后使用pointToLayer 将整个套件添加到地图：

pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, damsStyle(feature));
} 

根据控制台，一切正常运行。放大和缩小显示damsRadius 的值正在按预期变化。

但问题是，地图上各点的半径并没有改变。因此，在此过程中的某个地方，某些事情没有得到沟通。

我用L.circle 尝试了同样的技巧，但它也没有奏效。每次更改缩放级别时是否需要使用clearLayers 函数和redraw？

好像有点过分了。

建议？

Answer 1

zoom 更改后，您需要重置样式。

只需在 map.on('zoomend') 函数中添加以下行

timeline.setStyle(damsStyle)

所以，你的功能应该是这样的

map.on('zoomend', function(e) {
    var currentZoom = map.getZoom();
    console.log("Current Zoom" + " " + currentZoom);
    if (currentZoom <= 6) {
      damsRadius = 2;
    } else {
    damsRadius = 6;
    }
    console.log("Dams Radius" + " " + damsRadius);
    timeline.setStyle(damsStyle)//add this line to change the style
});

注意：您可能需要更改timeline 变量的范围，以便在zoomend 函数中访问它。