Funzione setStyle () per le funzionalità di GeoJSON - Leaflet

23

Ok, dal momento che ho già fatto una domanda molto lunga a riguardo, ma dal momento che non ho ricevuto nuove risposte per un po 'e non per confondermi nei dettagli, terrò questa semplice nel miglior modo possibile.

Se non sbaglio, una setStylefunzione per un nome, una caratteristica particolare sarebbe la seguente:

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

... che cambierebbe il colore dall'arancione al blu. Sono anche a conoscenza della resetStyle()funzione che ripristinerà lo stile all'originale.

Ecco come modifico il mio 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;
            }
    }

});

Quello che voglio fare è rendere solo un paese blu e gli altri grigi, più avanti nel codice. È una cosa in due passaggi, dipingere di grigio tutti i paesi e poi renderne uno blu.

La prima cosa è che ho bisogno di un ciclo del genere che ritorni su ogni funzione e setStyle()che tutti i paesi diventino grigi. Funziona se solo everything.setStyle({color: "#4B1BDE"})o qualcosa del genere?

La seconda cosa è (che mi sta dando notti insonni) come posso selezionare solo una funzione da un gruppo di poligoni GeoJSON con cui lavorare? Solo il paese che ho bisogno di dipingere di blu.

Se si trattasse di passare il mouse, potrei posizionare un listener di eventi come nelle esercitazioni su Leaflet. Ma indipendentemente dall'interazione dell'utente, voglio impostare e ripristinare lo stile chiamandolo con il suo nome, come ho fatto con il rettangolo sopra.

leaflet  geojson  features 
— Doruk Karınca
fonte
1
Grazie per aver sottolineato la setStyle()funzione del volantino .
— berto

Risposte:

27

Funziona senza la necessità di rimuovere il layer e ricrearne uno nuovo come descritto sopra:

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

Sembra essere un po 'più efficiente di rimuovere e ricreare il layer geoJson. Dai documenti, si GeoJSONestendeFeatureGroup un livello che a sua volta si estende LayerGroup.
Inoltre, sembra che ogni funzione di geoJson abbia il proprio livello in FeatureGroup!

— Davem M
fonte
Come posso attivare questo metodo quando voglio cambiare lo stile in modo dinamico?
— Karussell,
3
Penso che equivalga a geojson_layer.setStyle (funzione ...)
— PeterVermont
un problema qui se si cambiano i livelli, ovvero si aggiungono i livelli figlio, verranno creati dallo stile originale nelle opzioni, non su come lo si imposta
— MikeT
19

Ho scritto un piccolo codice per definire lo stile di una specifica funzione geojson usando il volantino. puoi provarlo su JSFiddle (originale, non funzionale) , funzionale JSFiddle 2018-02-17 , oppure utilizzare il seguente test di codice localmente.

Per questo esempio sto usando i file us-states.json ma può essere utilizzato per qualsiasi file geojson.

Spero che sarà di aiuto.

Ecco il codice:

<!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
fonte
3
Quindi, si trattava di creare una style(feature)funzione che controlla il feature.properties.namevalore. Grazie!
— Doruk Karınca,
@ DorukKarınca Sì :)
— Farhat Abbas,
Eccezionale! Questo è esattamente quello che stavo cercando!
— Joosthoek,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.