Wie setze ich die Füllfarbe von Polygonen in Leaflet.js dynamisch?

9

Ich verwende das interaktive Chloropath-Beispiel für leaflet.js

Ich habe herausgefunden, wie jedes meiner Polygone nach dem Klicken auf jedes Polygon eine laufende Werteliste am unteren Rand der Seite hinzufügen kann.

Wenn Sie ein zweites Mal auf ein ausgewähltes Polygon klicken, wird dessen Wert aus der laufenden Liste entfernt.

Ich möchte dies visuell als Füllfarbenänderung der Polygone auf der Karte darstellen.

Hier ist mein bisheriger Code (Javascript mit PHP enthalten): (Ich habe Kommentare in meinen Code aufgenommen, um zu erklären, was ich versuche. Auch hier wäre jede Hilfe sehr dankbar.)

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
quelle

Willkommen bei Geographic Information Systems , Alex! Dies ist wahrscheinlich der richtige Ort für Ihre Frage. Wenn Sie also noch eine Kopie auf SO veröffentlicht haben, löschen Sie diese bitte. Wenn Sie nach einer angemessenen Zeit (ein oder zwei Tage) hier keine guten Antworten erhalten, markieren Sie diese Frage einfach , um den Moderator darauf aufmerksam zu machen, und wir können sie zurück auf SO migrieren (oder wo immer dies angebracht ist). Auf diese Weise bleibt Ihre Frage zusammen mit allen Kommentaren oder Teilantworten, die sie in der Zwischenzeit anzieht, anstatt Sie zu zwingen, mit jeder anderen Site von vorne zu beginnen.

— whuber

13

Sie können die Füllfarbe eines Polygons mit der setStyleMethode (von Path geerbt ) ändern .

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

Wenn Sie Schwierigkeiten haben, das Geojson richtig anzuzeigen, lesen Sie möglicherweise die Leaflet GeoJSON-Dokumente .

— sfletche
quelle

Hum ... und zum Füllen transparent, ein Hinweis?

— Peter Krauss

1

Es gibt auch diese Geige, über die ich gestolpert bin. Ich kann es nicht als mein eigenes beanspruchen, aber Sie können die Optionsobjekte über sortieren event.target.optionsoder sogar das Farbattribut für ein Zielereignis über festlegenevent.target.setAttribute()

— Daniella
quelle