javascript - 动态更改传单中多边形的颜色？

Question

对于熟悉 Leaflet 的人，您知道动态更改多边形颜色的方法吗？例如，采用如下定义的圆：

window.circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#ffffff',
    fillOpacity: 0.5
}).addTo(map);

然后稍后，在用户单击界面上某处的按钮后（例如），我想像这样更改圆圈的颜色：

window.circle.options.fillColor = "#dddddd";

代码更改了 window.circle.options.fillColor 的值，但更改不会反映在地图上多边形颜色的更改中。我四处寻找，但没有找到任何东西。有任何想法吗？

谢谢。

Answer 1

L.Circle扩展L.Path（http://leafletjs.com/reference.html#path），具有方法setStyle( <Path options> object )，您可以将新样式应用为window.circle.setStyle({fillColor: '#dddddd'});

Answer 2

如果您正在寻找这样的东西：

const circle = L.circle([lat, lng], {
   style: style,
   onEachFeature: onEachFeature,
});

这些选项可用于 geoJson 数据，即：L.geojson()..... :D

所以，对于多边形。尝试，

circle.setStyle({
    color: 'red'
});

Answer 3

我的地图中有一组多边形，此代码可以动态更改每个多边形的填充颜色：

// 'file' is a geojson layer
L.geoJSON(file, {
onEachFeature: colorlayer,
style: {
    color: "#00008c",
    opacity: 0.6,
    fillColor: '#333333',
    fillOpacity: 0
}
}).addTo(map);
function colorlayer(feature, layer) {
layer.on('mouseover', function (e) {
    layer.setStyle({
        fillOpacity: 0.4
    });
});
layer.on('mouseout', function (e) {
    layer.setStyle({
        fillOpacity: 0
    });
});

}