javascript - 传单——缩放时无法更改圆标记上的半径

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 将整个套件添加到 map :

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

一切都根据控制台顺利进行。放大和缩小显示 damsRadius 的值正在按预期变化。

问题是， map 上点的半径 没有改变。所以，在这个过程中的某个地方，有些事情没有得到沟通。

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

这似乎有点过分了。

建议？

Answer 1

一旦缩放发生变化，您需要重置样式。

只需在您的 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 函数中访问它。