Prosta etykieta na ulotce (geojson) wielokąt

Question

Próbuję tego, co uważam za dość powszechny przypadek użycia z ulotką typu multipolygon.

I utworzyć MultiPolygon korzystając GeoJSON:

var layer = L.GeoJSON(g, style_opts); 

Co chciałbym jest umieścić prostą etykietę tekstową w środku każdego wielokąta. (Na przykład coś takiego jak umieszczanie nazwy stanu w centrum każdego stanu).

Sprawdziliśmy: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

Które faktycznie przykrywa tekst, ale kiedy dodać kilka wielokątów, wydaje się, aby umieścić etykietę mimośrodowo w dziwnych sposobów, a ja jestem obecnie w stanie aby wyśledzić problem.

Ja również spojrzał na: https://github.com/jacobtoye/Leaflet.label

ale wydaje się, że tylko umieścić etykietę na wielokątów, gdy mysz nad wielokąta, i nie zatrzymać się statycznie na wieloboku.

Uważam, że najlepszym sposobem działania jest skorzystanie z tego pierwszego linku i ustalenie, dlaczego zmienia on lokalizację, ale w międzyczasie, jeśli ktoś wie o szybkim i łatwym sposobie umieszczenia etykiety na wielokącie w ulotce Byłbym bardzo zobowiązany.

Ponadto, jeśli mam jakieś błędne założenia dotyczące dwóch powyższych linków, proszę, wyprostuj mnie.

Dziękuję bardzo z góry.

Answer 1

Wtyczka z etykietami ulotek umożliwia również stosowanie etykiet statycznych, patrz: demo. Jedynym powodem, dla którego etykieta polilinii nie jest statyczna, jest to, że porusza się podczas poruszania się wzdłuż polilinii.

Prawdopodobnie można to zrobić lepiej niż ten, nadrzędnymi bindLabel() dla wielokątów, ale jest to prosty sposób na dodanie statycznej wytwórnię do środka wielokąta:

label = new L.Label() 
label.setContent("static label") 
label.setLatLng(polygon.getBounds().getCenter()) 
map.showLabel(label); 

http://jsfiddle.net/CrqkR/6/

Answer 2

You można użyć opcji onEachFeature z L.geoJson, aby utworzyć nowy L.divIcon dla każdego wielokąta.

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