Konturlinie Etiketten auf Prospektkarte

Question

Ich habe eine Leaflet Karte mit einem GeoJSON contour Linien enthalten. Die Höhe, die jeder Zeile entspricht, befindet sich in feature.properties.Elevation des geoJSON. Ich möchte folgendes erreichen:

Was ich habe versucht, diese in Merkblatt zu erreichen, ist die Mitte jeder Linienzug zu berechnen und dann eine Markierung zu dieser Position hinzufügen, um die Daten von feature.properties enthält. Elevation.

L.geoJson(contourJSON, { 
    onEachFeature: function(feature, layer) { 
    var label = L.marker(layer.getBounds().getCenter(), { 
     icon: L.divIcon({ 
     className: 'label', 
     html: feature.properties.Elevation, 
     iconSize: [100, 40] 
     }) 
    }).addTo(map); 
    } 
}); 

Welche Art von Arbeiten, aber nicht über ein schönes Design und es ist nicht wirklich klar, welcher Wert zu einer bestimmten Zeile gehört:

Was wäre eine bessere Methode des des Hinzufügens Elevationsetiketten so zu formatieren, dass sie lesbar und vielleicht dynamisch zur aktuellen Zoomstufe sind? Ich verwende Leaflet 1.0.3, also könnte Tooltip eine Lösung anbieten? Vielen Dank!

Answer 1

Sie könnten in dieser Broschüre Plugins interessiert sein, möglicherweise kombiniert: (nicht sicher, wie einfach es ist, sie zu kombinieren wäre)

• Leaflet.LabelTextCollision (demo)

... Anzeige [s ] Labels auf Vektordaten unter Vermeidung von Label-Kollisionen.

• Leaflet.TextPath (demo)

Zeigt einen Text entlang einer Polylinie.

Sie können auch den Rest von Leaflet plugins überprüfen.

BTW, ich bin mir nicht sicher, ob Sie Ihr Etikett/Marker an der Polylinie "center" angebracht haben. Sie können einfach einen der Eckpunkte auswählen, zum Beispiel den am weitesten rechts/östlich, um einen ähnlichen Effekt wie das von Ihnen bereitgestellte Beispiel zu erzielen.