web-dev-qa-db-fra.com

Changer dynamiquement la couleur d'un polygone dans la brochure?

Pour tous ceux qui connaissent Leaflet, connaissez-vous un moyen de changer dynamiquement la couleur d'un polygone? Par exemple, prenez un cercle défini comme ceci:

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

Plus tard, après qu'un utilisateur a cliqué sur un bouton quelque part sur une interface (par exemple), je veux changer la couleur du cercle comme ceci:

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

Le code modifie la valeur de window.circle.options.fillColor, mais la modification n'est pas reflétée par une modification de la couleur du polygone sur la carte. J'ai cherché autour mais je n'ai rien trouvé. Des idées?

Merci.

javascriptleaflet
27
Owen

L.Circle Étend L.Path ( http://leafletjs.com/reference.html#path ), qui ont la méthode setStyle( <Path options> object ), et vous pouvez appliquer un nouveau style comme window.circle.setStyle({fillColor: '#dddddd'});

35
tbicr

Si vous cherchez quelque chose comme ça:

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

Ces options sont disponibles pour les données geoJson, c'est-à-dire: L.geojson () .....: D

Donc, pour le polygone. Essayer,

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

J'ai un ensemble de polygones dans ma carte, ce code peut changer dynamiquement la couleur de remplissage de chaque polygone:

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

}

0
Patrick D