Wie fügt man jedem Feature in einer geoJSON-Ebene permanente Labels hinzu?

Question

Ich habe einige geoJSON-Objekte aus einer Datenbank importiert und möchte sie mit Leaflet auf einer Karte anzeigen.

Da ich mehrere Objekte mit dem gleichen Stilsymbol/Marker habe, weiß ich nicht welche welche ist, bis ich im Moment auf jeden klicke. Ich habe Arbeitscode, um eine Box mit vollständigen Informationen zu öffnen, wenn ich auf jedes Objekt klicke.

Was ich wirklich will ist, dass jedes Element mit einem Label die ganze Zeit sichtbar ist, damit ich weiß, auf welches man klickt, um mehr Informationen zu bekommen.

Ich kann von der .bindTooltip Methode sehen, wie man eine feste Bezeichnung erhält, aber wenn ich meinen Code ausführe, erhält nur das erste Objekt aus der geoJSON-Datei die Bezeichnung.

Ich kann keine Beispiele dafür finden, dass irgendjemand etwas Ähnliches macht - alle Maps mit mehreren Labels werden aus manuell erstellten Punkten erstellt.

Das Codesegment insbesondere wie folgt aussieht:

// This shows correct geoJSON name but shows fixed label only for 1 (first) geoJSON object! 
 
function fixedLabel(layer) { 
 
    return layer.feature.properties.name 
 
}; 
 
\t 
 
function clickLabel (feature,layer) { 
 
    layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°"); 
 
}; 
 
\t 
 
var vesselsLayer = L.geoJson(vessels,{ 
 
    onEachFeature: clickLabel 
 
    }) 
 
    .addTo(map).bindTooltip(fixedLabel, {permanent: true, direction: 'right'}).openTooltip(); 
 
    map.fitBounds(vesselsLayer.getBounds());

Der Code vollständige Code & GeoJSON sind in GitHub hier: https://github.com/DPB61/leafletjs_test01

Bin ich völlig in die falsche Richtung gehen um Etiketten für jedes Objekt zu bekommen?

Answer 1

Sie binden den Tooltip an die GeoJSON-Ebene, nicht an jede einzelne darin enthaltene Ebene. Versuchen Sie etwas wie das:

L.geoJson(vessels,{ 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°"); 
     layer.bindTooltip(feature.properties.name, {permanent: true, direction: 'right'}).openTooltip(); 
    } 
}).addTo(map)