31 votos

setStyle() función para GeoJSON características - Folleto

Ok, pues ya le pedí una muy larga la pregunta acerca de esto, pero ya que no recibo ninguna nuevas respuestas para un rato, y no confundirse en detalles, voy a mantener este uno simple de la mejor manera que puedo.

Si no me equivoco, setStyle función de un nombre, característica particular sería como sigue:

var límites = [[54.559322, -5.767822], [56.1210604, -3.021240]];
var rect = L. rectángulo(límites, {color: "#ff7800", peso: 1}).addTo(mapa);

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

...que iba a cambiar el color de naranja a azul. También soy consciente de la resetStyle() función que se revertirá el estilo de la original.

Esto es como lo del estilo de mi GeoJSON:

var todo = L. geoJson(myfile, {
 onEachFeature: function () {
array_of_layers.addLayer(característica);
},
 estilo: function () {
switch(característica.propiedades.nombre){
 caso "bélgica": retorno belgium_style; break;
 caso "bosnia": retorno bosnia_style; break;
 caso "dinamarca": retorno denmark_style; break;
 caso "great_britain": retorno britain_style; break;
 el caso de "grecia": retorno greece_style; break;
 el caso de "italia": retorno italy_style; break;
 el caso de "serbia": retorno serbia_style; break;
 caso "españa": retorno spain_style; break;
}
}

});

Lo que quiero hacer es hacer un solo país azul y los otros de color gris, más adelante en el código. Es un paso de dos cosa, a la pintura de todos los países de grises y, a continuación, hacer una azul.

La primera cosa es que necesito un bucle que itera sobre cada característica y setStyle() para todos los países a gris. Funciona si acabo everything.setStyle({color: "#4B1BDE"}) o algo?

La segunda cosa es, (que me da noches de insomnio) ¿cómo puedo seleccionar sólo una característica de un grupo de GeoJSON polígonos a trabajar? Sólo el país que necesito para que la pintura azul.

Si se trataba de una cuestión de pasar el ratón por encima, yo podría colocar un detector de eventos como se hace en el Folleto de tutoriales. Pero, independientemente de la interacción con el usuario, quiero establecer y restablecer el estilo llamando con su nombre, como lo hice con el rectángulo de arriba.

Gracias de antemano.

38voto

Davem M Puntos 71

Esto funciona sin necesidad de remover la capa y volver a crear uno nuevo como se describió anteriormente:

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

Parece ser un poco más eficiente que quitar y volver a crear el geoJson capa. A partir de la documentación, geoJson capas se extienden FeatureGroups que se extienden LayoutGroup.
Además, parece que cada geoJson característica tiene su propia capa en la FeatureGroup !

20voto

That Brazilian Guy Puntos 423

He escrito un pequeño código a un estilo específico geojson característica con el prospecto. podéis probarlo en jsFiddle o utilice el siguiente código de prueba a nivel local.

Para este ejemplo estoy utilizando-estados.json archivos, pero puede ser utilizado para cualquier archivo geojson.

Espero que ayude.

Aquí está el código:

<!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>

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X