web-dev-qa-db-fra.com

Étiquette simple sur un polygone de dépliant (geojson)

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.

javascriptmappingopenlayersleaflet
29
Hoopes

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

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

22
flup

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);
  }
);
14
Brendan Nee