Fonction setStyle () pour les fonctionnalités GeoJSON - Leaflet

23

D'accord, puisque j'ai déjà posé une très longue question à ce sujet, mais comme il n'a pas reçu de nouvelles réponses pendant un certain temps, et pour ne pas être confus dans les détails, je vais garder celle-ci simple du mieux que je peux.

Si je ne me trompe pas, une setStylefonction pour une caractéristique nommée particulière serait la suivante:

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"});

... ce qui changerait la couleur de l'orange au bleu. Je connais également la resetStyle()fonction qui ramènera le style à l'original.

Voici comment je stylise mon 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;
            }
    }

});

Ce que je veux faire, c'est rendre un seul pays bleu et les autres gris, plus loin dans le code. C'est une chose en deux étapes, pour peindre tous les pays en gris, puis en faire un bleu.

La première chose est que j'ai besoin d'une telle boucle qui itérerait sur chaque fonctionnalité et griserait setStyle()pour tous les pays. Est-ce que ça marche si je viens everything.setStyle({color: "#4B1BDE"})ou quelque chose?

La deuxième chose est, (cela me donne des nuits blanches) comment puis-je sélectionner une seule entité dans un groupe de polygones GeoJSON avec laquelle travailler? Juste le pays que j'ai besoin de peindre en bleu.

S'il s'agissait de survoler la souris, je pourrais placer un écouteur d'événement comme cela est fait dans les tutoriels Leaflet. Mais quelle que soit l'interaction de l'utilisateur, je veux définir et réinitialiser le style en l'appelant avec son nom, comme je l'ai fait avec le rectangle ci-dessus.

leaflet  geojson  features 
— Doruk Karınca
source
1
Merci d'avoir souligné la setStyle()fonction du dépliant .
— berto

Réponses:

27

Cela fonctionne sans avoir besoin de supprimer le calque et de recréer un nouveau comme décrit ci-dessus:

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

Il semble être beaucoup plus efficace que de supprimer et recréer la couche geoJson. À partir des documents, une GeoJSONcouche s'étendFeatureGroup qui à son tour s'étend LayerGroup.
De plus, il semble que chaque entité geoJson possède sa propre couche dans le FeatureGroup!

— Davem M
source
Comment déclencher cette méthode lorsque je souhaite changer le style dynamiquement?
— Karussell
3
Je pense que c'est équivalent à geojson_layer.setStyle (fonction ...)
— PeterVermont
un problème ici si vous modifiez les calques, c'est-à-dire ajoutez des calques enfants, ils seront créés à partir du style d'origine dans les options, et non de ce que vous avez défini
— MikeT
19

J'ai écrit un petit code pour styliser une fonction geojson spécifique à l'aide d'un dépliant. vous pouvez l'essayer sur JSFiddle (Original, non fonctionnel) , Functional JSFiddle 2018-02-17 , ou utiliser le test de code suivant localement.

Pour cet exemple, j'utilise des fichiers us-states.json mais il peut être utilisé pour n'importe quel fichier geojson.

J'espère que cela aidera.

Voici le 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
source
3
Il s'agissait donc de créer une style(feature)fonction vérifiant la feature.properties.namevaleur. Merci!
— Doruk Karınca
@ DorukKarınca Oui :)
— Farhat Abbas
Impressionnant! C'est exactement ce que je cherchais!
— joosthoek
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.