Je veux ajouter un texte à la carte qui n'est pas échoué lorsque le zoom change et reste avec les tailles d'origine.
J'utilise ce code (JavaScript): P>
var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001});
text.bindLabel("TEXT", styleProperties);
text.addTo(myLayer);
4 Réponses :
Utilisez un marqueur avec un l.divicon .
Merci, mais avez le même effet de l'étiquette lorsque vous zoomez. J'ai trouvé cet exemple: jsfiddle.net/erictheise/uaddv
Vous pouvez utiliser Leaflet.Label Plugin (à partir de la notice 1.0, L.Label est ajouté au noyau de dépliant comme l.tooltip). Vous pouvez le styler avec votre propre CSS. Voir le exemple .
J'utilise ce plugin (en second lieu, vous pouvez voir la fonction Bindlabel), le problème est que le texte de l'étiquette est mis à l'échelle lorsque je zoomez. Je souhaite qu'une fois ajouté à la carte, le texte reste dans la même taille fixe (voir la première image à gauche). "Brûlé sur la carte".
Cela me semble que votre texte n'est pas vraiment lié à votre carte.
Qu'en est-il de l'ajout du texte dans un autre div sur le conteneur de la carte? Voir l'exemple complet
Merci, mais n'est pas ce que je veux. Le texte doit bouger avec la carte, comme un nom des villes.
Dans mon cas, c'est exactement ce que je veux! Merci!
Autant que je sache, vous voulez une taille de police dynamique en fonction du niveau de zoom. Juste le regard que vous avez mentionné.
Vous pouvez modifier la taille de la police en fonction du niveau de zoom. Pour le plug-in Levoir.Label, vous pouvez ajouter un gestionnaire d'événements pour Zoomend et jouer avec la taille de la police de l'étiquette et d'autres styles de l'étiquette.
J'ai un autre exemple sans feuillet.Label, qui ajoute un élément de texte à côté de l'objet de chemin. Donc, le texte est incorporé dans le SVG et je modifie la taille de la police en fonction du niveau de zoom. Bien que je ne puisse pas trouver une meilleure fonction.