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

}

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

3 个答案: