[英]Dynamically change the color of a polygon in leaflet?
For anyone who is familiar with Leaflet, do you know a way to dynamically change a polygon's color?对于熟悉 Leaflet 的人,您知道一种动态改变多边形颜色的方法吗? For example, take a circle defined like this:
例如,以这样定义的圆为例:
window.circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#ffffff',
fillOpacity: 0.5
}).addTo(map);
Then later, after a user clicks a button somewhere on an interface (for example), I want to change the color of the circle like this:然后,在用户单击界面上某处的按钮后(例如),我想像这样更改圆圈的颜色:
window.circle.options.fillColor = "#dddddd";
The code changes the value for window.circle.options.fillColor, but the change is not reflected by a change to the color of the polygon on the map.代码更改了 window.circle.options.fillColor 的值,但更改并未反映在地图上多边形颜色的更改上。 I've searched around but haven't found anything.
我四处寻找,但没有找到任何东西。 Any ideas?
有任何想法吗?
Thanks.谢谢。
L.Circle
扩展了L.Path
( http://leafletjs.com/reference.html#path ),具有方法setStyle( <Path options> object )
,您可以将新样式应用为window.circle.setStyle({fillColor: '#dddddd'});
If you are looking for something like this:如果你正在寻找这样的东西:
const circle = L.circle([lat, lng], {
style: style,
onEachFeature: onEachFeature,
});
These options are available for geoJson data ie: L.geojson()..... :D这些选项可用于 geoJson 数据,即:L.geojson(..... :D
So, for polygon .所以,对于多边形。 Try,
尝试,
circle.setStyle({
color: 'red'
});
I have a set of polygons in my map, this code can change the fillcolor of each polygon dynamically :我的地图中有一组多边形,此代码可以动态更改每个多边形的填充颜色:
// '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
});
});
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.