setStyle () -Funktion für GeoJSON-Funktionen

23

Ok, da ich bereits eine sehr lange Frage dazu gestellt habe, aber seit einiger Zeit keine neuen Antworten mehr eingegangen sind und nicht im Detail verwirrt werden soll, werde ich diese so einfach wie möglich halten.

Wenn ich mich nicht irre, würde eine setStyleFunktion für eine benannte, bestimmte Funktion wie folgt lauten:

var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
var rect = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

rect.setStyle({color: "#4B1BDE"});

... was die Farbe von orange nach blau ändern würde. Mir ist auch die resetStyle()Funktion bekannt, mit der der Stil auf das Original zurückgesetzt wird.

So gestalte ich meinen GeoJSON:

var everything = L.geoJson(myfile, {
    onEachFeature: function(feature){
        array_of_layers.addLayer(feature);
    },
    style: function(feature){
            switch(feature.properties.name){
            case "belgium": return belgium_style; break;
            case "bosnia": return bosnia_style; break;
            case "denmark": return denmark_style; break;
            case "great_britain": return britain_style; break;
            case "greece": return greece_style; break;
            case "italy": return italy_style; break;
            case "serbia": return serbia_style; break;
            case "spain": return spain_style; break;
            }
    }

});

Ich möchte nur ein Land blau und die anderen grau machen, später im Code. Es ist eine zweistufige Sache, alle Länder grau zu malen und dann eines blau zu machen.

Das erste ist, ich brauche eine solche Schleife, die über jedes Feature iteriert und setStyle()für alle Länder grau wird. Funktioniert es, wenn ich nur everything.setStyle({color: "#4B1BDE"})oder so?

Die zweite Sache ist (das gibt mir schlaflose Nächte), wie wähle ich nur ein Feature aus einer Gruppe von GeoJSON-Polygonen aus, mit denen ich arbeiten möchte ? Genau das Land, in dem ich blau streichen muss.

Wenn es sich um das Schweben mit der Maus handelte, konnte ich einen Ereignis-Listener platzieren, wie es in den Tutorials für Flugblätter gemacht wird. Unabhängig von der Benutzerinteraktion möchte ich den Stil festlegen und zurücksetzen, indem ich ihn wie im obigen Rechteck mit seinem Namen aufrufe.

leaflet geojson features Doruk Karınca
quelle

1

Vielen Dank, dass Sie auf die setStyle()Funktion der Broschüre hingewiesen haben .

Berto

27

Dies funktioniert, ohne dass Sie die Ebene entfernen und eine neue erstellen müssen, wie oben beschrieben:

geojson_layer.eachLayer(function (layer) {  
  if(layer.feature.properties.NAME == 'feature 1') {    
    layer.setStyle({fillColor :'blue'}) 
  }
});

Es scheint einiges effizienter zu sein, als den GeoJson-Layer zu entfernen und neu zu erstellen. Aus den Dokumenten GeoJSONerstreckt sichFeatureGroup eine Ebene, die sich wiederum erstreckt LayerGroup.
Darüber hinaus scheint es, dass jedes GeoJson-Feature eine eigene Ebene in der FeatureGroup!

Davem M
quelle

Wie löse ich diese Methode aus, wenn ich den Stil dynamisch ändern möchte?

Karussell

3

Ich denke, ist gleichbedeutend mit geojson_layer.setStyle (Funktion ...)

PeterVermont

Ein Problem hierbei: Wenn Sie die Ebenen ändern, dh

untergeordnete

19

Ich habe einen kleinen Code geschrieben, um eine bestimmte Geojson-Funktion mithilfe eines Faltblatts zu gestalten. Sie können es mit JSFiddle (Original, nicht funktionsfähig) oder Functional JSFiddle 2018-02-17 versuchen oder den folgenden Codetest lokal verwenden.

Für dieses Beispiel verwende ich us-states.json-Dateien, aber es kann für jede Geojson-Datei verwendet werden.

Ich hoffe es wird helfen.

Hier ist der Code:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        init_map();
        init_geojson();
        $("#btn").on('click', function () {
            var stateName = $('#statename').val();
            console.log(stateName);
            init_geojson(stateName);
        });
    });
    var map, geojson, sn;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
        geojson = L.geoJson(statesData, {
            style: style
            //onEachFeature: onEachFeature,
        }).addTo(map);
    }

    function init_geojson(n) {
        console.log(geojson.options);
        map.removeLayer(geojson);
        if (n != "") {
            sn = n;
            console.log(sn);
            geojson = L.geoJson(statesData, {
                style: style
            }).addTo(map);
        }
    }

    function style(feature) {
        console.log(sn);
        if (sn == feature.properties.name) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#ff0000'
            };
        } else {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#666666'
            };
        }
    }
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>

Farhat Abbas
quelle

3

Es ging also darum, eine style(feature)Funktion zu erstellen, die den feature.properties.nameWert überprüft . Vielen Dank!

Doruk Karınca

@ DorukKarınca Ja :)

Farhat Abbas

Genial! Genau das habe ich gesucht!

Joosthoek

setStyle () -Funktion für GeoJSON-Funktionen - Leaflet

Antworten: