Suite

Étiquettes multiples avec placement multiple dans OpenLayers

Étiquettes multiples avec placement multiple dans OpenLayers


J'ai une couche vectorielle dansOpenLayers. Il a des attributs commela gauche,droite,Haut,bas, etc. Je veux que chaque fonctionnalité soit multi-étiquette (pour avoir plus d'une étiquette).
Le code javascript est le suivant :

style = new OpenLayers.Style(); règle = new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({… }), symbolizer: { fillColor: 'blue', label: ?????, } }); style.addRules([règle]); styleMap = new OpenLayers.StyleMap({ 'default': style }); myLayer.styleMap = styleMap

Je veux que mon style soit comme ça :

Comment fais-je?

Remarque: je sais que je pourrai le faire en "SLD", mais je dois utiliser la carte de style dans OpnenLayers.


L'étiquette est un élément de texte SVG. Je vous suggère de faire une dérogation pourOpenLayers.Renderer.SVG.prototype.drawTextune fonction.

Ouvrez votre package d'installation OpenLayers et trouvez-le ici :libOpenLayersRendererSVG.js:649

Prenez la fonction et remplacez-la dans votre propre code comme ceci :

// Mon drawText remplace OpenLayers.Renderer.SVG.prototype.drawText = function (featureId, style, location) { // Code d'origine ici }

L'override doit être lu après la bibliothèque OpenLayers par le navigateur. Dans l'override, vous devez tester si lestylel'objet contient vos attributs additifs commela gauche,Haut, ou quel que soit votre nom et si oui, appliquez une transformation à l'étiquette. Pour la gauche, ce sera

var translate = 'translate(' + -shift + ',' + 0 + ')'; label.setAttributeNS(null, "transformer", traduire);

changementest le décalage souhaité en pixels.

J'ai fait un remplacement similaire pour la rotation des étiquettes, mais votre cas est un peu plus compliqué, car si j'ai bien compris, vous voulez pouvoir ajouter quatre étiquettes pour une fonctionnalité. Cela signifie que votre remplacement devra pouvoir ajouter quatre étiquettes au lieu d'une.


Je suis intéressé par la réponse car j'ai eu le même problème.

Je l'ai résolu (mais ce n'est pas vraiment une bonne solution) en publiant plusieurs vecteurs en utilisant les mêmes données de saisie et en leur donnant un style différent.


Voir la vidéo: Webinaaritallenne: Monipuolisen projektilaskutuksen kulmakivet