动态更改传单中多边形的颜色？答案

【问题标题】：Dynamically change the color of a polygon in leaflet?动态更改传单中多边形的颜色？
【发布时间】：2013-03-25 00:48:55
【问题描述】：

对于熟悉 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 的值，但更改不会反映在地图上多边形颜色的更改中。我四处寻找，但没有找到任何东西。有什么想法吗？

谢谢。

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

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

【讨论】：

这似乎可以很好地改变外观。但是，当我尝试这样做时，它似乎并没有反映在代码的该层中以便我保存。我应该在设置样式后以某种方式更新图层吗？

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案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
    });
});

}

【讨论】：