Come etichettare i poligoni GeoJSON?

Sto usando Leaflet combinato con le funzionalità di GeoJSON. C'è un modo per etichettare le funzionalità di GeoJSON (in questo caso - poligoni)? Dovrebbe ottenere etichette da

feature.properties.name

Questo è il mio codice dove penso di poter inserire l'etichetta:

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

— againstflow
fonte

Ti dispiacerebbe pubblicare la soluzione che hai usato per etichettare il poligono, se ancora a portata di mano?

— a1,

Risposte:

È necessario conoscere il foglio illustrativo che si prevede di utilizzare. RFM. Esempio: OpenLayers prevede che questo formato GeoJSON crei un punto e fornisca alcuni attributi personalizzati:

{"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]
            }
        }
    ]
}

Come puoi vedere, ho creato una geometria (punto) e unisco i miei attributi ad essa. Quando invio questo ad OpenLayers, il risultato si adatterà nell'esempio di @Aragon, usando "color" e "name" (come etichetta) per personalizzare il punto nella mappa.

Copia e incolla questo esempio GeoJSON in http://json.parser.online.fr/ o usa il sito per provare a convalidare il tuo.

— Magno C
fonte

Non era la domanda sui poligoni? In che modo una risposta sulla geometria del punto ha risolto la domanda?

— a1an

E che cos'è un poligono? Denominerai lo stesso. L'unica cosa che cambierà è la parte "geometria". Non solo ha risolto la domanda, ma ha ricevuto 5 up fino ad ora.

— Magno C

Consentitemi di riformulare: ho la stessa domanda e posizionare un'etichetta su un poligono è piuttosto diverso rispetto al posizionarlo in un punto, quindi poligono significa per me un oggetto chiuso bidimensionale con più spigoli, in questo contesto. Ecco perché mi interessa ottenere alcuni dettagli, quindi il mio primo commento. Una risposta "l'ha risolto" non è poi così utile, ma grazie comunque :-)

— a1an

Basta aggiungere le cose "proprietà" e tutto andrà bene. Vedi la risposta di @Aragon return feature.properties.color;Come puoi vedere, propertiesè un featureattributo e ha colorcome uno dei suoi attributi. Puoi mettere tutto ciò che vuoi in questo oggetto seguendo questa procedura.

— Magno C,

RFMè totalmente non richiesto. E la differenza tra un punto e un poligono è significativa, poiché sapere quale geometria usare è esattamente il problema qui

— Stephen Lead,

Ecco come l'ho risolto con i poligoni e le etichette dei volantini, in modo da ottenere un'etichetta fluttuante sul poligono con la sua proprietà name.

Supponiamo che:

ottieni la risposta json analizzata nella variabile json
ci sono solo poligoni semplici senza buchi in json
polygon_style contiene le opzioni di stile restituite dalla tua funzione di stile
labels_layer è un Layergroup volantino (o direttamente la tua mappa)

Poi:

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

Abbastanza stranamente, le coordinate GeoJson (in realtà EPSG: 4326) e Leaflet vengono scambiate in ordine.

— a1an
fonte

Per coloro che utilizzano Leaflet 1.0+, L.Label è stato spostato nel core di Leaflet come L.Tooltip e il plug-in è stato deprecato. Utilizzeresti bindTooltip () invece di bindLabel (). github.com/Leaflet/Leaflet.label

— aethergy

penso che questa domanda riguardi openlayers.se quindi, è possibile utilizzare per l'etichettatura;

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

spero che ti aiuti ...

— Aragona
fonte

Non è OpenLayers. Sto usando Leaflet combinato con le funzionalità di GeoJSON. Quindi questo non funziona. Ma grazie per averci provato.

— Counterflow

Perché non fillColor: "${color}"invece di creare una funzione?

— Magno C

@Magno C non c'è differenza tra i tuoi punti. Entrambi sono uguali. ho scritto questo per se si desidera aggiungere una funzione più complicata come colore casuale o altro. ancora grazie per il tuo punto.

— Aragona,

Capito l'Aragona. Grazie per il nuovo metodo Potrebbe essere utile in futuro. Pollice su !

— Magno C

Penso che non ci sia modo di esaurire @againstflow dal formato che ho mostrato, dato che qui c'è una specifica che regola GeoJSON: link

— Magno C