Semplice etichetta su un poligono (geojson) poligono

Question

Sto tentando quello che immagino essere un caso d'uso abbastanza comune con un oggetto multipolygon di volantini.

creo il MultiPolygon utilizzando GeoJSON:

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

Quello che mi piacerebbe è quello di mettere una semplice etichetta di testo al centro di ogni poligono. (Ad esempio, qualcosa come mettere il nome dello stato nel centro di ogni stato).

Ho guardato: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

che in realtà si sovrappone al testo, ma quando aggiungo un po 'di poligoni, sembra mettere l'etichetta fuori centro in modi strani, e io sono attualmente in grado per rintracciare il problema.

Ho anche guardato: https://github.com/jacobtoye/Leaflet.label

ma che sembra solo mettere l'etichetta su poligoni quando il mouse sopra il poligono, e non rimane statico sul poligono.

Penso che la mia migliore linea d'azione sia quella di utilizzare quel primo collegamento e rintracciare il motivo per cui sta cambiando la posizione, ma nel frattempo, se qualcuno conosce un modo semplice e veloce per deporre un'etichetta su un poligono nel volantino , Sarei molto grato.

Inoltre, se ho qualche ipotesi errata sui due collegamenti sopra, non esitate a raddrizzarmi.

Grazie mille in anticipo.

Answer 1

Il plug-in dell'opuscolo consente anche etichette statiche, vedere demo. L'unica ragione per cui l'etichetta polilinea non è statica è che si muove mentre ci si sposta lungo la polilinea.

Probabilmente si può fare meglio di questo, sovrascrivendo bindLabel() per i poligoni, ma questo è un modo semplice per aggiungere un'etichetta statica al centro di un poligono:

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

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

Answer 2

È possibile utilizzare l'opzione onEachFeature di L.geoJson per creare un nuovo L.divIcon per ogni poligono.

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