Broşür (geojson) poligonunda basit etiket

Question

Bir kitapçık multipolygon nesnesi ile oldukça yaygın bir kullanım durumu olarak hayal ettiğim şeyi denemeye çalışıyorum. İsterdim Ne

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

her poligonun merkezinde basit metin etiketi koymaktır:

Ben MultiPolygon kullanarak GeoJSON'a oluşturun. (Örneğin, her bir durumun merkezine durum adı koymak gibi bir şey). aslında metni kaplayan ama çokgen bir demet eklediğinizde, bunun etiketini merkez dışında garip şekillerde koymak görünüyor ve şu anda veremiyoruz https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

:

ben baktım sorunu izlemek için.

Ben de baktım: https://github.com/jacobtoye/Leaflet.label

ama çokgen üzerinde fare ve poligonunda statik kalmaz zaman sadece çokgenler etiket koymak gibi görünüyor.

En iyi hareket tarzım, ilk bağlantıyı kullanmak ve neden konumu değiştirdiğini anlamaktır, ancak bu arada, kimse broşürde çokgen üzerine bir etiket koymanın hızlı ve kolay bir yolunu biliyorsa Çok mecbur olurum. Ben yukarıdaki iki bağlantılar hakkında herhangi bir hatalı varsayımlar varsa

Ayrıca, beni düzeltmek için çekinmeyin.

Önceden çok teşekkürler.

Answer 1

broşür etiket eklenti ayrıca statik etiketler, demo bakınız verir. Polyline etiketinin statik olmamasının tek nedeni, polyline boyunca ilerlerken hareket etmesidir.

Muhtemelen Poligon için bindLabel() geçersiz kılarak, bundan daha iyisini yapabiliriz ancak bu çokgenin merkezine statik etiket eklemek için basit bir yoludur:

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

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

Answer 2

You Her bir çokgen için yeni bir L.divIcon oluşturmak için L.geoJsononEachFeature seçeneğini kullanabilirsiniz. cevap için

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