我正在使用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函数并重绘吗？

这似乎有点过分.

忠告？

解决方法:

缩放更改后,您需要重置样式.

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