J'essaie ce que j'imagine être un cas d'utilisation assez courant avec un objet multipolygone dépliant.
Je crée le MultiPolygon en utilisant geojson:
var layer = L.GeoJSON(g, style_opts);
Ce que j'aimerais, c'est mettre une simple étiquette de texte au centre de chaque polygone. (Par exemple, quelque chose comme mettre le nom de l'État au centre de chaque État).
J'ai regardé: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw
Ce qui recouvre en fait le texte, mais lorsque j'ajoute un tas de polygones, cela semble décaler l'étiquette de manière étrange, et je ne suis actuellement pas en mesure de trouver le problème.
J'ai également regardé: https://github.com/jacobtoye/Leaflet.label
mais cela semble ne mettre l'étiquette sur les polygones que lorsque vous passez la souris sur le polygone et ne reste pas statiquement sur le polygone.
Je pense que mon meilleur plan d'action est d'utiliser ce premier lien et de découvrir pourquoi il change de lieu, mais en attendant, si quelqu'un connaît un moyen rapide et facile de poser une étiquette sur un polygone dans un dépliant, je être très obligé.
De plus, si j'ai des hypothèses erronées sur les deux liens ci-dessus, n'hésitez pas à me redresser.
Merci d'avance.
Le plugin d'étiquette de brochure autorise également les étiquettes statiques, voir démo . La seule raison pour laquelle l'étiquette de polyligne n'est pas statique est qu'elle se déplace lorsque vous vous déplacez le long de la polyligne.
Vous pouvez probablement faire mieux que cela, en remplaçant bindLabel () pour les polygones, mais c'est un moyen simple d'ajouter une étiquette statique au centre d'un polygone:
label = new L.Label()
label.setContent("static label")
label.setLatLng(polygon.getBounds().getCenter())
map.showLabel(label);
Vous pouvez utiliser l'option onEachFeature
de L.geoJson
pour créer un nouveau L.divIcon
pour chaque polygone.
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);
}
);