在动画中动态更改多边形的颜色？

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