Comment définir dynamiquement la couleur de remplissage des polygones dans Leaflet.js?

9

J'utilise l'exemple de chloropathe interactif pour leaflet.js

J'ai compris comment faire en sorte que chacun de mes polygones ajoute un décompte courant de valeurs au bas de la page après avoir cliqué sur chaque polygone.

En cliquant une fois sur un polygone sélectionné, il supprime sa valeur du décompte en cours.

Je voudrais représenter visuellement cela comme un changement de couleur de remplissage des polygones sur la carte.

Voici mon code jusqu'à présent (javascript avec PHP inclus): (J'ai inclus des commentaires dans mon code pour expliquer ce que j'essaie de faire. Encore une fois, toute aide serait grandement appréciée)

function addUp(num, x)
{  
    <?php 
    // begin php code

    $places = $db->query("SELECT boundary_id, boundary_name FROM boundaries WHERE               
    boundary_state= '$thatstate'");

    while($row = $places->fetch_object()) { 
       //end php code ?> 
       //begin javascript
       if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 1) {

           temp = document.theForm.ttl.value;
           tempo = parseInt(temp);
           numo = parseInt(num);
           nwTemp = tempo + numo;
           document.theForm.ttl.value = nwTemp;
           geojson.setStyle({fillColor: 'blue'}); // I want to set color to blue to show  highlighted

           List<?php echo $row->boundary_name ?> = 0;

           return List<?php echo $row->boundary_name ?>;
    }


    if (x == "List<?php echo $row->boundary_name ?>" && List<?php echo $row->boundary_name  ?> == 0) {

        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;

        // I want to reset color of polygon if deselected (this would be   the default)
        geojson.resetStyle; 

        List<?php echo $row->boundary_name ?> = 1; 
    }   
}

— alex
source

Bienvenue chez Geographic Information Systems , Alex! C'est probablement le bon endroit pour votre question, donc si vous avez toujours une copie publiée sur SO, veuillez la supprimer. Si , après un délai raisonnable (un jour ou deux) vous ne recevez pas de bonnes réponses ici, puis juste signaler un cette question pour attirer l' attention du modérateur et nous pouvons migrer retourner à SO (ou le cas échéant). Cela gardera votre question avec tous les commentaires ou réponses partielles qu'elle attire entre-temps, plutôt que de vous forcer à recommencer avec chaque site différent.

— whuber

13

Vous pouvez changer la couleur de remplissage d'un polygone avec la setStyleméthode (héritée de Path ).

polygon.setStyle({fillColor: '#0000FF'});

Si vous rencontrez des difficultés pour afficher correctement le geojson, vous pouvez consulter les documents Leaflet GeoJSON .

— sfletche
source

Hum ... et pour remplir transparent, un indice?

— Peter Krauss

1

Il y a aussi ce jsfiddle sur lequel je suis tombé. Je ne peux pas le revendiquer comme le mien, mais vous pouvez trier les objets d'options via event.target.optionsou même définir l'attribut de couleur pour un événement cible viaevent.target.setAttribute()

— daniella
source