2014-12-03 40 views
8

Bir dizi geoJSON noktam var ve bunlara ekli etiketler var.Leaflet.label işaretçiler üzerinde gösterilmiyor

var points = L.geoJson (null, { 
    onEachFeature: function (feature, layer) { 
     layer.options.riseOnHover=true; //tried adding this 
     layer.options.riseOffset=9999; //as well as this 
     layer.bindLabel(feature.properties["name"], {className: 'map-label'}); 
     L.setOptions(layer, {riseOnHover: true}); //this as well 
    } 
}); 

JSON dosyasındaki her özellikten geçen ve nokta kümesi oluşturan kod budur. Şimdi haritaya işaretleri ekler gerçek işlevi şöyledir:

var addJsonMarkers = function() { 
    map.removeLayer(markers); 
    points.clearLayers(); 

    markers = new L.layerGroup(); 
    points.addData(dataJson); 
    markers.addLayer(points); 

    map.addLayer(markers); 

    return false; 
}; 

ben yaşıyorum sorunu ben (siz açıklamalarım görebilir) eklemeyi deneyin ne olursa olsun, etiketler arkasında daima olmasıdır belirteçler, beklenen davranış değildir.

Screenshot of label behind the

bunun üstünde olmak için etiketi istiyorum. map-label sınıfında z-index sınıfını manuel olarak değiştirmeyi denedim ve bunun için bir çözüm olarak görünen riseOnHover ile çok sayıda çözüm var, ancak etiketler hala geride. Neyi yanlış yaptığımı gören var mı?

tam kod, bringToFront() ve bringToBack() Yöntemler bir göz atın belirteçleri için bir grup işlevi oluşturmak ve bu arada etiketlerin zıddını, geri getirmek

+0

Sen etiket iliştirilmiş olan haritanın nasıl bölmesi görmek ve taşımak için bakmak gerekir İşaretleyicilerin üzerinde bire. İşaretçiler için {optimized: false} adresine de bakabilirsiniz (eğer uygunsa). – geocodezip

+0

Bu, div içindeki tüm işaretçiler listesindeki son öğe olarak, 'yaprakçık-işaretçi-panosuna ekleniyor. –

cevap

6

bindLable seçenekleri pane olarak popupPane belirtin: Broşür popupPane yılında

layer.bindLabel(
    feature.properties["name"], 
    { 
     className: 'map-label', 
     pane:'popupPane' 
    } 
); 

markerPane böylece etiketler belirteçlerin üstünde görünür daha yüksektir.

https://github.com/Leaflet/Leaflet.label

Ayrıca, bu jsfiddle kontrol seçenekleri bilgi ile Leaflet.label için küçük doc vardır: http://jsfiddle.net/L6kqu54a/

+0

Bunu yaptı. Bu seçeneği belgelemede gözden kaçırdım ve yanlış yerlerde çözüm aradım. Teşekkürler! –

+0

Sadece * options.pane = 'popupPane'; * çözümünü onaylıyor. Bu sorun LeafletJS 0.7.3 ve 0.7.5'te yoktu, ancak LeafletJS 1.0.0-beta'ya geçtiğimde beni ziyarete geldi. JS ve/veya CSS ile zIndex ile uğraşmak işe yaramıyor. Ama options.pane kullanarak yapar. – fris

1

here görülebilir. Ya da bir çözüm bulmazsanız bilgileri göstermek için bir L.info ekleyebilirsin. Burada bir göz atın belki bu yardımcı olabilir: http://leafletjs.com/reference.html#featuregroup-bringtofront Kodunuzu bir yere gönderin, böylece bir göz atabilirim.

+0

Cevabınız için teşekkür ederiz. Buradaki koduma bir göz atabilirsiniz: http://pastebin.com/2iH3U0a7 Bu Broşürü kullandığım için işaretleyiciler ve etiketler için grup işlevleri oluşturma gibi daha gelişmiş şeylerin nasıl yapıldığını gerçekten bilmiyorum. etiket eklentisi ve 'bindLabel()' işlevi, bu yüzden arka planda gerçekte ne yapıldığından emin değilim. –

+0

Bunu yorum yapmayı deneyin: layer.on ({click: highlightFeature}); – Mensch

+0

Hala aynı. Ancak, bu dinleyiciye ihtiyacım var, çünkü işaretçi tıklandığında, içeriğin bir kısmı ile sağ köşede güzel bir bilgi penceresi açılır. '' yalnızca bir yer tutucudur. –