Leaflet - 圆形标记 zoom 时无法更改半径

Question

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

用户缩放越多，圆的半径就越大。 此处有正在进行的工作。 目前为止，这是我的成果。

第一行设置了初始半径：

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函数并进行重绘吗？

那似乎有些过分了。

有何建议？

- user3825080

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
});

注意：在zoomend函数中访问timeline变量时，您可能需要更改其作用域。

- muzaffar

---

啊！我甚至没想到 setStyle。 你是对的——初步测试显示我必须更改范围。现在没时间深入研究，但感谢你指引我正确的方向！ - user3825080

我将“zoomend”函数与新的setStyle行从AJAX调用外部移动到内部，以解决作用域问题，现在它像魅力一样工作。 - user3825080

还有一个可以添加的优化。上述函数将在每次缩放更改时运行setStyle()，无论是否有必要。它应该只在必要时更改样式，即当缩放超过给定阈值时。将最后一个缩放保存在变量中，并比较缩放和先前的缩放，以获得更高性能的函数。 - chrismarx