¿Cómo etiquetar los polígonos GeoJSON?

Estoy usando el folleto combinado con las características de GeoJSON. ¿Hay alguna forma de etiquetar las características de GeoJSON (en este caso, polígonos)? Debería obtener etiquetas de

feature.properties.name

Este es mi código donde creo que podría insertar la etiqueta:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

javascript web-mapping labeling geojson leaflet contraflujo
fuente

¿Le importaría publicar la solución que usó para etiquetar el polígono, si todavía está a la mano?

a1an

Respuestas:

Necesita saber el formato que el folleto espera usar. RFM. Ejemplo: OpenLayers espera que este formato GeoJSON cree un punto y proporcione algunos atributos personalizados:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

Como puede ver, he creado una Geometría (Punto) y le agrego mis atributos. Cuando envío esto a OpenLayers, el resultado encajará en el ejemplo de @ Aragón, usando "color" y "nombre" (como etiqueta) para personalizar el punto en el mapa.

Copie y pegue este ejemplo de GeoJSON en http://json.parser.online.fr/ o use el sitio para probar y validar el suyo.

Magno C
fuente

¿No era la pregunta sobre los polígonos? ¿Cómo resolvió la pregunta una respuesta sobre geometría de puntos?

a1an

¿Y qué es un polígono? Lo nombrarás igual. Lo único que cambiará es la parte de "geometría". No solo resolvió la pregunta, sino que recibió 5 ups hasta ahora.

Magno C

Permítanme reformular entonces: tengo la misma pregunta y colocar una etiqueta en un polígono es bastante diferente a colocarlo en un punto, por lo que polígono significa para mí un objeto cerrado bidimensional con varios bordes, en este contexto. Es por eso que tengo interés en obtener algunos detalles, de ahí mi primer comentario. Una respuesta "sí lo resolvió" no es tan útil entonces, pero gracias de todos modos :-)

a1an

Simplemente agregue las cosas de "propiedades" y todo estará bien. Vea la respuesta de @Aragon return feature.properties.color;Como puede ver, propertieses un featureatributo y tiene colorcomo uno de sus atributos. Puede poner lo que quiera en este objeto siguiendo este camino.

Magno C

RFMes totalmente innecesario para Y la diferencia entre un punto y un polígono es significativa, ya que saber qué geometría usar es exactamente el problema aquí

Stephen Lead el

Así es como lo resolví con polígonos y etiquetas de folleto, para que obtenga una etiqueta flotante en el polígono con su propiedad de nombre.

Suponer:

obtienes la respuesta json analizada en la variable json
solo hay polígonos simples sin agujeros en json
polygon_style contiene opciones de estilo devueltas por su función de estilo
labels_layer es un folleto Layergroup (o directamente su mapa)

Entonces:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

Sorprendentemente, GeoJson (en realidad EPSG: 4326) y las coordenadas del folleto se intercambian en orden.

a1an
fuente

Para aquellos que usan Leaflet 1.0+, L.Label se ha movido al núcleo de Leaflet como L.Tooltip y el complemento ha quedado en desuso. Usaría bindTooltip () en lugar de bindLabel (). github.com/Leaflet/Leaflet.label

aethergy

Creo que esta pregunta es sobre openlayers. Si es así, puede usarla para etiquetar;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

Espero que te ayude...

Aragón
fuente

No es OpenLayers. Estoy usando el folleto combinado con las características de GeoJSON. Entonces esto no funciona. Pero gracias por intentarlo.

Contraflujo

¿Por qué no lo haces en fillColor: "${color}"lugar de crear una función?

Magno C

@ Magno C no hay diferencia entre su punto. Ambos son iguales. He escrito esto para si desea agregar una función más complicada como color aleatorio o cualquier otra cosa. Todavía gracias por tu punto.

Aragón

Entendido Aragón. Gracias por el nuevo método. Puede ser útil en el futuro. Pulgares hacia arriba !

Magno C

Creo que no hay forma de que @againstflow se quede sin el formato que he mostrado, ya que hay una especificación que rige GeoJSON aquí: enlace

Magno C