Comment afficher des données attributaires d’un vecteur avec Openlayers?

Après avoir chargé des vecteurs via les protocoles WFS et WM(T)S, on s’intéresse désormais à l’affichage des données attributaires. L’API d’Openlayers (v 3.20.1 dans cet article) propose divers déclencheurs (fires) de méthodes liées à la carte et les couches affichées.  Ici, la fonction Javascript utilise le fire singleclick qui pour un pixel donné, permet d’obtenir les propriétés ou attributs (properties) des objets géographiques (features) des vecteurs chargés par WM(T)S et WFS. Pour rappel, le protocole WFS fournit une donnée vecteur alors que le WM(T)S une donnée raster image (tuilée). Pour le WFS, les attributs du vecteur  sont directement chargés dans la source de la couche alors que pour le WM(T)S, les propriétés sont accessibles par l’URL du protocole.

1. Définition des attributs, des objets géographiques et de la source d’un vecteur en programmation

Dans OpenLayers, il est important de bien appréhender les notions d’attributs (properties), d’objets géographiques (features) et de structure (source) de la donnée. La structure de la donnée vectorielle contient la géométrie et l’ensemble des objets géographiques qui sont eux aussi caractérisés par une géométrie et des attributs.

Ici, la fonction est déclenchée par le clic sur la carte mais on ne tient pas compte de l’objet et de ses attributs en lien avec les coordonnées ciblées. En clair, c’est une démonstration pour mieux appréhender le traitement d’un vecteur. La couche coucheWFS est définie au préalable. La commande console.log retourne la variable indiquée dans la console du navigateur.

En programmation, la source du vecteur retourne un objet :

map.on('singleclick', function(evt) { 
	var source = coucheWFS.getSource();
	console.log('source : ', source);
});

et les objets géographiques (features) issus de la source du vecteur retourne un tableau (Array) d’objets :

map.on('singleclick', function(evt) { 
	var features = coucheWFS.getSource().getFeatures();
	console.log('objets géographiques: ', features);
});

Et comme tout tableau, tu peux lire son contenu avec une boucle :

map.on('singleclick', function(evt) {
	// On compte le nombre d'objets du vecteur
	var nb_objet = coucheWFS.getSource().getFeatures().length;
	// On définit tous ces objets retournés dans un tableau
	var features = coucheWFS.getSource().getFeatures();
	// On lit chaque objet du tableau
	for(var i=0; i<nb_objet; i++){
		console.log('objet '+i+' : ', features[i]);
	}
});

Openlayers a implémenté une méthode pour lire tous les objets (features) du vecteur :

map.on('singleclick', function(evt) {
	// On lit chaque objet du vecteur
        coucheWFS.getSource().forEachFeature(function(feature) {
              console.log('objet: ', feature);
        });
});

Pour chaque objet du tableau, tu peux obtenir les propriétés (ou attributs) :

map.on('singleclick', function(evt) {
    var nb_objet = coucheWFS.getSource().getFeatures().length; 
    var features = coucheWFS.getSource().getFeatures(); 
    // On lit tous les champs des différents attributs d'un objet par la méthode getKey()
    // Ici, on considère le premier objet du vecteur 
    var champs = features[0].getKeys(); 
    // On compte le nombre de champs 
    var nb_propriete = features[0].getKeys().length; 
    for(var i=0; i<nb_objet; i++){ 
        // On charge les propriétés de chaque objet 
        var proprietes = features[i]; 
        for(var j=0; j<nb_propriete; j++){ 
            // Pour chaque objet, on affiche chaque attribut 
            console.log('objet '+i+' attribut '+champs[j]+': ', proprietes.get(champs[j])); 
        } 
    }
});

Ou plus simplement avec les méthodes de l’API d’Openlayers :

map.on('singleclick', function(evt) { 
	coucheWFS.getSource().forEachFeature(function(feature) {
		//console.log('feature : ', feature);
		var champs = feature.getKeys();
		var nb_propriete = feature.getKeys().length;
		for(var j=1; j<nb_propriete; j++){
			console.log(' attribut '+champs[j]+': ', feature.get(champs[j]));
		}
    });
});

On sait désormais comment mieux manipuler les attributs, les objets géographiques et sources d’un vecteur.

2. Affichage des données attributaires d’un vecteur pour un pixel donné

Dans ce paragraphe, on montre comment obtenir les données attributaires d’un vecteur pour un lieu précis sur la carte. On utilise la méthode forEachFeatureAtPixel qui retourne l’objet géographique (feature) du premier vecteur sur la carte pour le pixel donné.

map.on('singleclick', function(evt) { 
	var donnees = map.forEachFeatureAtPixel(evt.pixel, function(feature, couche) {
		//ici on retourne l'objet géographique et la couche (facultatif pour la couche)
		var donnees = [feature, couche];
		return donnees;
	});
    //si l'objet géographique et la couche sont retournés
    if(donnees){
		var feature = donnees[0];
		var couche = donnees[1];
		// On définit les champs de l'objet géographique ciblé
		var champs = feature.getKeys();
		var nb_propriete = feature.getKeys().length;
		for(var j=1; j<nb_propriete; j++){
			console.log(' attribut '+champs[j]+': ', feature.get(champs[j]));
		}
	}
});

Toutefois, si tu connais déjà les champs du vecteur, il est possible d’obtenir directement l’attribut de l’objet géographique ciblé correspondant à ce champs.

map.on('singleclick', function(evt) { 
	var donnees = map.forEachFeatureAtPixel(evt.pixel, function(feature, couche) {
		//ici on retourne l'objet géographique et la couche (facultatif pour la couche)
		var donnees = [feature, couche];
		return donnees;
	});
    //si l'objet géographique et la couche sont retournés
    if(donnees){
		var feature = donnees[0];
		// On définit les propriétés (attributs) de l'objet géographique ciblé
		var proprietes = feature.getProperties();
		// Nom de l'attribut pour le champs LANAME
		var nom = proprietes.LANAME;
		console.log('nom de l\'attribut du champs LANAME: ', nom);
	}
});

Ou plus simplement avec la méthode get();

map.on('singleclick', function(evt) { 
	var donnees = map.forEachFeatureAtPixel(evt.pixel, function(feature, couche) {
		//ici on retourne l'objet géographique et la couche (facultatif pour la couche)
		var donnees = [feature, couche];
		return donnees;
	});
    //si l'objet géographique et la couche sont retournés
    if(donnees){
		var feature = donnees[0];
		var nom = feature.get("LANAME");
		console.log('nom de l\'attribut du champs LANAME: ', nom);
	}
});

En conclusion, les scripts proposés ont permis de montrer comment obtenir les données attributaires des objets géographiques d’un vecteur avec OpenLayers. L’objectif de ce tutoriel d’afficher ces données en un pixel ciblé est atteint! On envisage désormais de réaliser la même chose avec les données images (flux WMS par exemple). Et dans un prochain article, il sera aussi question d’obtenir les attributs de toutes les couches et non plus d’une seule en cliquant sur la carte.