Leaflet.js geoJson etiketten

Question

Ich verwende eine geoJson-Schicht mit Leaflet.js und zeige Länder here.

ich Land bin Zusatz-Etikett mit dem folgenden:

L.marker(layer.getBounds().getCenter(), { 
       icon: L.divIcon({ 
        className: 'countryLabel', 
        html: feature.properties.name, 
        iconSize: [0, 0] 
       }) 
      }).addTo(map); 

Das Problem ist, das Markup dies gilt das Mouseover im Bereich des jeweiligen Landes behindert, was zu Problemen mit dem Mouseover-Farbwechsel und klickbaren Bereich.

Gibt es in Merkblatt 1.0.3 eine bessere Lösung zur Lieferung von Etiketten, die den klickbaren Bereich des Landes nicht behindern?

Ich habe Code versucht, die die Leaflet.Label Erweiterung wie folgt verwendet:

var label = new L.Label(); 
label.setContent(feature.properties.name); 
label.setLatLng(center); 
map.showLabel(label); 

oder

L.marker(center) 
.bindLabel('test', { noHide: true }) 
.addTo(map); 

Aber diese Ursache Fehler; Ich verstehe, dass Funktionalität von diesem Plugin in Leaflet.js selbst nach v1 integriert wurde.

Dies funktioniert, aber ich möchte lieber einfach Etiketten statt Tooltips:

var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero 
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] }); 
marker.addTo(map); 

Irgendwelche Ideen wäre willkommen.

Answer 1

Ich verstehe nicht, warum Sie es durch einen markierten Marker getan haben möchten.

Sie können einen Tooltip direkt an die Features binden. In Ihrer Funktion onEachFeature, statt var label..., könnten Sie tun:

layer.bindTooltip(
    feature.properties.name, 
    { 
     permanent:true, 
     direction:'center', 
     className: 'countryLabel' 
    } 
); 

mit diesem CSS:

.countryLabel{ 
    background: rgba(255, 255, 255, 0); 
    border:0; 
    border-radius:0px; 
    box-shadow: 0 0px 0px; 
} 

Hier die fiddle ist.

EDIT

Ok ich verstehe, Sie wollen einen Marker verwenden, um der Lage sein, die Position von Hand einzustellen, falls erforderlich. Hier ist eine Arbeitslösung:

Sie definieren eine Hash-Tabelle mit einem latLng für alle Ausnahme Länder, die, für die das Feature-Center ist nicht das Zentrum Sie wollen:

var exceptions = { 
    'France': [45.87471, 2.65], 
    'Spain': [40.39676, -4.04397] 
} 

Um das Label anzuzeigen, setzen Sie eine unsichtbare Markierung an der richtigen Stelle ein Tooltip daran binden:

var label = L.marker(
    exceptions[feature.properties.name] || layer.getBounds().getCenter(), 
    { 
     icon: L.divIcon({ 
      html: '', 
      iconSize: [0, 0] 
     }) 
    } 
).addTo(map); 

label.bindTooltip(
    feature.properties.name, 
    { 
     permanent:true, 
     direction:'center', 
     className: 'countryLabel' 
    } 
); 

Hier ist die andere fiddle.