Einfaches Etikett auf einem Flugblatt (Geojson) Polygon

Question

Ich versuche, was ich mir vorstelle, ein ziemlich häufiger Anwendungsfall mit einem Flugblatt Multipolygon-Objekt.

Ich schaffe das Multipolygon mit GeoJSON:

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

Was Ich mag würde, ist eine einfache Text-Label in der Mitte jedes Polygon zu setzen. (Zum Beispiel so etwas wie den Namen eines Staates in die Mitte eines jeden Staates zu setzen).

Ich habe sehe: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

die den Text tatsächlich überlagern, aber wenn ich ein paar Polygone hinzufügen, werden das Etikett in seltsamen Wegen nicht in die Mitte zu setzen, und ich bin derzeit nicht in der Lage um das Problem aufzuspüren.

Ich habe auch betrachtet: https://github.com/jacobtoye/Leaflet.label

aber das erscheint nur auf Polygone um das Etikett zu setzen, wenn Sie die Maus über das Polygon, und bleibt nicht statisch auf dem Polygon.

Ich denke, meine beste Vorgehensweise ist es, diesen ersten Link zu verwenden und herauszufinden, warum es den Standort ändert, aber in der Zwischenzeit, wenn jemand eine schnelle und einfache Möglichkeit kennt, ein Etikett auf einem Polygon im Prospekt zu verlegen Ich wäre sehr dankbar.

Auch, wenn ich irgendwelche fehlerhaften Annahmen über die beiden Links oben habe, bitte zögern Sie nicht, mich auszurichten.

Vielen Dank im Voraus.

Answer 1

Das Broschüren-Etikett-Plugin erlaubt auch statische Etiketten, siehe demo. Der einzige Grund, warum die Polylinienbeschriftung nicht statisch ist, ist, dass sie sich bewegt, wenn Sie sich entlang der Polylinie bewegen.

Sie können sich wahrscheinlich besser als diese, durch zwingende bindLabel() für Polygone, aber dies ist ein einfacher Weg, um eine statische Label in die Mitte eines Polygons hinzuzufügen:

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

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

Answer 2

Sie kann die -Option von L.geoJson verwenden, um ein neues L.divIcon für jedes Polygon zu erstellen.

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