API CUB > Tutoriaux > Couches dynamiques

Les couches dynamiques

Difficulté :

Objectif du tutorial

Apprendre à utiliser les couches dynamiques de l'API CUB.

Prérequis

Principe des couches dynamiques

Une couche dynamique, à l'inverse d'une couche statique, est une couche dont on PEUT interagir avec les données. Ainsi, nous avons accès à la géométrie de l'objet lui-même, ce qui permet de récupérer sa position ou même de modifier cette géométrie. De plus, nous avons accès aux attributs de chaque objet, véritables informations portées par ceux-ci, qui sont invisibles à priori sur la carte. Le format du fichier ou du flux d'origine n'a aucune importance, la manipulation de la couche se fera de la même façon.

Charger du KML

Nous allons commencer par charger un fichier KML, format assez courant sur l'Internet et normalisé par l'OGC. La version actuelle de l'API CUB, la 0.9a, ne supporte pas le cross-domain (domaine croisé), c'est-à-dire que vous ne pouvez pas charger un fichier qui n'est pas sur le même serveur que votre page. Ce problème sera résolu dans la version 0.9b de l'API.

En attendant, nous allons utiliser un jeu de test, à savoir des stations VCUB. Téléchargez le fichier suivant et placez le sur votre serveur web, dans le même dossier que la page HTML que vous utilisez pour ce tutorial :
Télécharger le fichier TB_STVEL_P.kml

Remarque : ce jeu de données n'est pas à jour, il sert juste d'exemple pour notre tutorial.

Nous allons maintenant créer une couche dynamique avec ce jeu de données. La façon de procéder est similaire aux couches statiques :

var dynamique = new CUB.Layer.Dynamic('Ma couche dynamique', 'TB_STVEL_P.kml');

Voici ce que vous devriez obtenir :



Que se passe-t-il ? Vos points n'ont pas la même couleur que sur l'image ! Essayons de recharger la page encore une fois :



La couleur change encore ! Pourquoi ? En fait, nous n'avons pas défini de style d'affichage pour notre couche. L'API va donc mettre un style aléatoire sur les objets au chargement de la couche. Pour définir un style (qui ne changera pas à chaque chargement de la page), reportez-vous au tutorial sur les styles.

Charger du WFS

Le chargement d'un WebService WFS se fait de la même façon que du KML, à la différence que, comme une couche statique, il faut préciser quelle couche du serveur nous voulons afficher. Nous allons utiliser le WFS de la CUB sur les stations vélo. Dans l'URL du WFS, comme il s'agit d'un WebService de data.lacub.fr, nous n'oublions pas de passer notre clé logicielle en paramètre (N'oubliez pas de remplacer ABCDE01234 par votre clé ! Sinon, cet exemple ne fonctionnera pas) :

Attention, à cause de la limitation de cross-domain, ce code ne fonctionnera qu'à partir de la version 0.9b de l'API CUB.

var dynamique = new CUB.Layer.Dynamic('Ma couche dynamique', 'http://data.bordeaux-metropole.fr/wfs?key=ABCDE01234', { layerName: 'TB_STVEL_P' });


Le résultat est identique au KML. La différence se situe au niveau du zoom : les objets de la couche sont rechargés à chaque déplacement sur la carte, mais uniquement dans l'étendue géographique du cadre.

Échelles d'apparition

Le serveur WFS de Bordeaux Métropole étant limité à 10000 objets délivrés par requête, il est impossible d'afficher par exemple les bordures de trottoir sur la Métropole entière. En effet, le serveur WFS refuse de les envoyer, car il y a 130000 bordures au total. On peut s'affranchir de ce problème en n'affichant les objets qu'en dessous d'une certaine échelle. Par exemple, nous pouvons afficher les bordures de trottoir seulement en dessous du 1/1000e, ce qui fait que seulement quelques centaines de bordures seront chargées à chaque zoom :

var dynamique = new CUB.Layer.Dynamic('Ma couche dynamique', 'http://data.lacub.fr/wfs?key=ABCDE01234', { layerName: 'DP_BORD_L' });

// Limitation d'échelle au 1/1000e (on ne passe que le dénominateur d'échelle)
dynamique.maxScaledenom(1000);


Les bordures ne s'affichent maintenant que si l'on zoome jusqu'à atteindre au moins l'échelle du 1/1000e

Récupération des attributs d'objet

Nous allons aborder ici très sommairement la récupération des attributs, qui est abordée plus en détail dans le tutorial sur la manipulation d'objets.

Pour récupérer les attributs d'un objet de la couche, nous allons permettre à l'utilisateur de cliquer dessus. Une petite modification du code précédent permet d'activer la sélection sur la couche, avec ici les communes de la Métropole :

var dynamique = new CUB.Layer.Dynamic('Ma couche dynamique', 'http://data.lacub.fr/wfs?key=ABCDE01234', { 
	layerName: 'FV_COMMU_S',
	selectable: true
});


L'API attribue trois types de couleurs aléatoires, une par défaut, une pour le survol de l'objet et une pour la sélection. Vous trouverez plus de détails dans le tutorial sur les styles.

Maintenant que nos objets (ici les communes) sont sélectionnables, nous pouvons intercepter l'évènement déclenché dès qu'un objet est sélectionné. Pour ce faire, nous allons associer une fonction à l'évènement de sélection, qui sera déclenchée dès que l'utilisateur sélectionnera un objet de la couche. Ajoutez ce code après la création de la couche :

dynamique.onSelect = function(entity) 
{
	alert('Vous avez sélectionné ' + entity.attributes.NOMNG);
}

Maintenant, dès que vous sélectionnerez une commune, une boite d'alerte affichera son nom complet. L'API se charge de passer à notre fonction l'entité (ou l'objet) qui a été sélectionné : c'est la variable entity. Vous pouvez essayer d'afficher la valeur d'autres attributs de la couche.

Voici le code JavaScript complet de cet exemple :

CUB.ready(function() {
	CUB.init();
		
	// Création de la couche
	var dynamique = new CUB.Layer.Dynamic('Ma couche dynamique', 'http://data.bordeaux-metropole.fr/wfs?key=ABCDE01234', { 
		layerName: 'FV_COMMU_S',
		selectable: true
	});

	// Évènement déclenché à la sélection d'un objet (entité)
	dynamique.onSelect = function(entity) 
	{
		alert('Vous avez sélectionné ' + entity.attributes.NOMNG);
	}
});
Forum | Contrat de licence | Conditions d'utilisation | Mentions légales | Clé logicielle | FAQ | bordeaux-metropole.fr
Flux RSS du site OpenData Bordeaux Métropole