_ función qstnhdr _ setStyle () para funciones de GeoJSON - Folleto ____ qstntxt _

Bien, ya que hice una pregunta muy larga sobre esto, pero como no obtuve ninguna respuesta nueva por un tiempo, y para no confundirme en los detalles, mantendré esta simple de la mejor manera posible.

Si no me equivoco, una función %code% para una característica particular con nombre sería la siguiente:
%pre%
... que cambiaría el color de naranja a azul. También soy consciente de la función %code% que revertirá el estilo al original.

Así es como estilo mi GeoJSON:
%pre%
Lo que quiero hacer es hacer que solo un país sea azul y los demás grises, más adelante en el código. Es una cosa de dos pasos, pintar todos los países a gris y luego hacer uno azul.

Lo primero es que necesito un bucle que se repita en cada función y %code% para que todos los países aparezcan en gris. ¿Funciona si acabo de %code% o algo así?

La segunda cosa es, (eso me da noches sin dormir) ¿Cómo selecciono solo una característica de un grupo de polígonos de GeoJSON para trabajar? Solo el país que necesito para pintar al azul.

Si se tratara de mover el mouse, podría colocar un detector de eventos como se hace en los tutoriales de folletos. Pero independientemente de la interacción del usuario, quiero establecer y restablecer el estilo llamándolo con su nombre, como hice con el rectángulo de arriba.

____ answer75686 _

He escrito un pequeño código para diseñar una función geojson específica utilizando un folleto. Puede probarlo en JSFiddle (original, no funcional) , Functional JSFiddle 2018-02-17 , o use el siguiente código de prueba localmente.

Para este ejemplo, estoy usando archivos us-states.json pero se puede usar para cualquier archivo geojson.

Espero que te ayude.

Aquí está el código:
%pre%
____ answer133325 _

Esto funciona sin la necesidad de eliminar la capa y volver a crear una nueva como se describe anteriormente:
%pre%
Parece ser bastante más eficiente que eliminar y recrear la capa geoJson. De los documentos, una capa %code% extiende %code% que a su vez extiende %code% . < br> Además, parece que cada característica de geoJson tiene su propia capa en el %code% !

___

Question

_ función qstnhdr _ setStyle () para funciones de GeoJSON - Folleto ____ qstntxt _

Bien, ya que hice una pregunta muy larga sobre esto, pero como no obtuve ninguna respuesta nueva por un tiempo, y para no confundirme en los detalles, mantendré esta simple de la mejor manera posible.

Si no me equivoco, una función %code% para una característica particular con nombre sería la siguiente:
%pre%
... que cambiaría el color de naranja a azul. También soy consciente de la función %code% que revertirá el estilo al original.

Así es como estilo mi GeoJSON:
%pre%
Lo que quiero hacer es hacer que solo un país sea azul y los demás grises, más adelante en el código. Es una cosa de dos pasos, pintar todos los países a gris y luego hacer uno azul.

Lo primero es que necesito un bucle que se repita en cada función y %code% para que todos los países aparezcan en gris. ¿Funciona si acabo de %code% o algo así?

La segunda cosa es, (eso me da noches sin dormir) ¿Cómo selecciono solo una característica de un grupo de polígonos de GeoJSON para trabajar? Solo el país que necesito para pintar al azul.

Si se tratara de mover el mouse, podría colocar un detector de eventos como se hace en los tutoriales de folletos. Pero independientemente de la interacción del usuario, quiero establecer y restablecer el estilo llamándolo con su nombre, como hice con el rectángulo de arriba.

____ answer75686 _

He escrito un pequeño código para diseñar una función geojson específica utilizando un folleto. Puede probarlo en JSFiddle (original, no funcional) , Functional JSFiddle 2018-02-17 , o use el siguiente código de prueba localmente.

Para este ejemplo, estoy usando archivos us-states.json pero se puede usar para cualquier archivo geojson.

Espero que te ayude.

Aquí está el código:
%pre%
____ answer133325 _

Esto funciona sin la necesidad de eliminar la capa y volver a crear una nueva como se describe anteriormente:
%pre%
Parece ser bastante más eficiente que eliminar y recrear la capa geoJson. De los documentos, una capa %code% extiende %code% que a su vez extiende %code% . < br> Además, parece que cada característica de geoJson tiene su propia capa en el %code% !

___

#1 de Davem M (23 votos)
#2 de Farhat Abbas (18 votos)

19

Bien, ya que hice una pregunta muy larga sobre esto, pero como no obtuve ninguna respuesta nueva por un tiempo, y para no confundirme en los detalles, mantendré esta simple de la mejor manera posible.

Si no me equivoco, una función setStyle para una característica particular con nombre sería la siguiente:

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

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

Así es como estilo mi 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;
            }
    }

});

Lo que quiero hacer es hacer que solo un país sea azul y los demás grises, más adelante en el código. Es una cosa de dos pasos, pintar todos los países a gris y luego hacer uno azul.

Lo primero es que necesito un bucle que se repita en cada función y setStyle() para que todos los países aparezcan en gris. ¿Funciona si acabo de everything.setStyle({color: "#4B1BDE"}) o algo así?

La segunda cosa es, (eso me da noches sin dormir) ¿Cómo selecciono solo una característica de un grupo de polígonos de GeoJSON para trabajar? Solo el país que necesito para pintar al azul.

Si se tratara de mover el mouse, podría colocar un detector de eventos como se hace en los tutoriales de folletos. Pero independientemente de la interacción del usuario, quiero establecer y restablecer el estilo llamándolo con su nombre, como hice con el rectángulo de arriba.

features geojson leaflet

pregunta Doruk Karınca 27.10.2013 - 00:07

2 respuestas

23

Esto funciona sin la necesidad de eliminar la capa y volver a crear una nueva como se describe anteriormente:

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

Parece ser bastante más eficiente que eliminar y recrear la capa geoJson. De los documentos, una capa GeoJSON extiende FeatureGroup que a su vez extiende LayerGroup . < br> Además, parece que cada característica de geoJson tiene su propia capa en el FeatureGroup !

respondido por el Davem M 06.02.2015 - 00:51

Lea otras preguntas en las etiquetas features geojson leaflet

¿Proteger WMS contra el acceso no autorizado? ¿Cómo crear una plantilla PostGIS?

score 18 · Accepted Answer

He escrito un pequeño código para diseñar una función geojson específica utilizando un folleto. Puede probarlo en JSFiddle (original, no funcional) , Functional JSFiddle 2018-02-17 , o use el siguiente código de prueba localmente.

Para este ejemplo, estoy usando archivos us-states.json pero se puede usar para cualquier archivo geojson.

Espero que te 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><scriptsrc="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script><scripttype="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>