Suite

Comment définir un ol.style.text en utilisant une source dans OpenLayers ?


J'ai le code suivant:

var cbcWFS = new ol.source.GeoJSON({ projection : 'EPSG:3857', url : 'http://localhost:7070/geoserver/CuerpoBomberosCurico/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=CuerpoBomberosCurico:Cuericopomax& 50&outputFormat=application/json' }); var cuerpoBomberosVector = new ol.layer.Vector({ title : 'Cuerpo Bomberos', source : cbcWFS, style : new ol.style.Style({ image : new ol.style.Icon({ scale : 0.04, src : 'https ://dl.dropboxusercontent.com/u/27798645/fireman/truck65.svg' }), texte : nouveau ol.style.Text({ texte : « Bonjour », échelle : 1.3, remplissage : nouveau ol.style.Fill ({ couleur : '#000000' }), trait : nouveau ol.style.Stroke({ couleur : '#FFFF99', largeur : 3,5 }) }) }) });

Mais maintenant, dans la partie "Texte", j'aimerais utiliser la valeur qu'il provient de la source.

Une idée pour le développer ?


Vous pouvez y parvenir en utilisant une fonction de style sur votre calque vectoriel. Il s'agit d'une fonction qui est appelée chaque fois qu'une fonctionnalité est rendue, avec la fonctionnalité et la résolution de vue comme arguments. La fonction est censée renvoyer un tableau de styles. L'exemple officiel de la couche vectorielle montre comment procéder. Pour voir l'exemple en direct, allez sur http://openlayers.org/en/v3.3.0/examples/vector-layer.html et zoomez plusieurs fois.

Dans votre cas particulier, vous devrez changer votre code en quelque chose comme ceci :

var cuerpoBomberosVector = new ol.layer.Vector({ title : 'Cuerpo Bomberos', source : cbcWFS, style : (function() { var style = new ol.style.Style({ image : new ol.style.Icon({ échelle : 0,04, src : 'https://dl.dropboxusercontent.com/u/27798645/fireman/truck65.svg' }), texte : nouveau ol.style.Text({ texte : 'Bonjour', échelle : 1,3, remplissage : nouveau ol.style.Fill({ couleur : '#000000' }), trait : nouveau ol.style.Stroke({ couleur : '#FFFF99', largeur : 3,5 }) }) }); var styles = [ style] ; return function(feature, resolution) { style.getText().setText(feature.get("text")); return styles; }; })() });

L'extrait ci-dessus suppose que vos entités ont un attribut « texte » qui contient le texte que vous souhaitez avoir comme étiquette.


Voir la vidéo: Openlayers 6 Tutorial #9 - Interaction With Vector Features (Octobre 2021).