Wie beschriftet man GeoJSON-Polygone?

Ich verwende Leaflet in Kombination mit GeoJSON-Funktionen. Gibt es eine Möglichkeit, GeoJSON-Features (in diesem Fall Polygone) zu kennzeichnen? Es sollte Etiketten von bekommen

feature.properties.name

Dies ist mein Code, in den ich ein Etikett einfügen könnte:

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

— Gegenstrom
quelle

Würde es Ihnen etwas ausmachen, die Lösung zu veröffentlichen, mit der Sie das Polygon beschriftet haben, falls diese noch verfügbar ist?

— a1an

Antworten:

Sie müssen wissen, welche Formatbroschüre voraussichtlich verwendet wird. RFM. Beispiel: OpenLayers erwartet, dass dieses GeoJSON-Format einen Punkt erstellt und einige benutzerdefinierte Attribute angibt:

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

Wie Sie sehen können, habe ich eine Geometrie (Punkt) erstellt und meine Attribute damit verknüpft. Wenn ich dies an OpenLayers sende, passt das Ergebnis in das Beispiel von @ Aragon und verwendet "Farbe" und "Name" (als Beschriftung), um den Punkt in der Karte anzupassen.

Bitte kopieren Sie dieses GeoJSON-Beispiel und fügen Sie es in http://json.parser.online.fr/ ein oder verwenden Sie die Website, um zu versuchen, Ihr eigenes zu validieren.

— Magno C.
quelle

War die Frage nicht nach Polygonen? Wie hat eine Antwort zur Punktgeometrie die Frage gelöst?

— a1an

Und was ist ein Polygon? Du wirst den gleichen Namen haben. Das einzige, was sich ändern wird, ist der Teil "Geometrie". Hat nicht nur die Frage gelöst, sondern bis jetzt 5 Ups erhalten.

— Magno C

Lassen Sie mich dann umformulieren: Ich habe die gleiche Frage, und das Platzieren einer Beschriftung auf einem Polygon unterscheidet sich erheblich von der Platzierung an einem Punkt. Polygon bedeutet für mich in diesem Zusammenhang ein zweidimensionales geschlossenes Objekt mit mehreren Kanten. Deshalb habe ich Interesse an einigen Details, daher mein erster Kommentar. Eine "es hat es gelöst" Antwort ist dann nicht so hilfreich, aber trotzdem danke :-)

— a1an

Fügen Sie einfach die "Eigenschaften" hinzu und alles wird gut. Siehe @ Astron-Antwort return feature.properties.color;Wie Sie sehen können, propertieshandelt es sich um ein featureAttribut und coloreines seiner Attribute. Auf diese Weise können Sie alles, was Sie wollen, in dieses Objekt einfügen.

— Magno C

RFMist völlig unangebracht. Und der Unterschied zwischen einem Punkt und einem Polygon ist signifikant, da es hier genau darum geht, welche Geometrie verwendet werden soll

— Stephen Lead,

So habe ich es mit Leaflet-Polygonen und Beschriftungen gelöst, sodass Sie eine schwebende Beschriftung auf dem Polygon mit seiner Namenseigenschaft erhalten.

Annehmen:

Sie erhalten die json-Antwort, die in die Variable json analysiert wird
Es gibt nur einfache Polygone ohne Löcher in Json
polygon_style enthält Stiloptionen, die von Ihrer Stilfunktion zurückgegeben werden
label_layer ist eine Broschüre Layergroup (oder direkt Ihre Karte)

Dann:

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

Bemerkenswerterweise werden die Koordinaten von GeoJson (tatsächlich EPSG: 4326) und Leaflet der Reihe nach vertauscht.

— a1an
quelle

Für Benutzer von Leaflet 1.0+ wurde das L.Label als L.Tooltip in den Leaflet-Kern verschoben und das Plugin ist veraltet. Sie würden bindTooltip () anstelle von bindLabel () verwenden. github.com/Leaflet/Leaflet.label

— Äthergie

Ich denke, diese Frage bezieht sich auf openlayers.if, also können Sie für die Kennzeichnung verwenden;

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

ich hoffe es hilft dir ...

— Aragon
quelle

Es ist nicht OpenLayers. Ich verwende Leaflet in Kombination mit GeoJSON-Funktionen. Das funktioniert also nicht. Aber danke, dass du es versucht hast.

— Gegenstrom

Warum nicht fillColor: "${color}"anstatt eine Funktion zu erstellen?

— Magno C

@Magno C gibt es keinen Unterschied zwischen Ihrem Punkt. Beide sind gleich. Ich habe dies geschrieben, wenn Sie kompliziertere Funktionen als zufällige Farbe oder irgendetwas anderes hinzufügen möchten. Trotzdem danke ich Ihnen für Ihren Punkt.

— Aragon

Aragon verstanden. Danke für die neue Methode. Kann in Zukunft nützlich sein. Daumen hoch !

— Magno C

Ich denke, es gibt keine Möglichkeit, dass @againstflow aus dem von mir gezeigten Format herausläuft, da hier eine Spezifikation für GeoJSON gilt: Link

— Magno C