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功能和重绘？

这似乎有些过分。

么？

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函数中访问它。

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

1 个答案: