API CUB > Tutoriaux > Couches arriere plan

Les couches d'arrière-plan

Difficulté :

Objectif du tutorial

Apprendre à utiliser les différents fonds de plan de l'API CUB.

Prérequis

Principe des fonds de plan

Une couche d'arrière-plan (ou fond de plan), est une couche constituée d'images, toujours placée "dessous" les autres couches. Elle représente souvent soit une photo aérienne, soit un plan simplifié (mettant en valeur les axes routiers, les bâtiments, les étendues d'eau, etc.). Ce fond de plan permet à l'utilisateur de situer sa position sur la carte par rapport à la réalité, grâce à des objets remarquables (monuments, lacs...).

Dans l'API CUB, on ne peut mettre qu'un seul fond de plan à la fois, car en superposer plusieurs ne serait pas d'un grand intérêt (le fond de plan le plus en dessous serait masqué par celui ou ceux qui sont au-dessus).

Par défaut, le fond de plan est celui de la CUB. Il s'agit d'un fond de plan simplifié :

Changer de fond de plan

L'API met à disposition un certain nombre de fonds de plan paramétrés par défaut, comme par exemple :

Si nous voulons par exemple mettre en fond de plan OpenStreetMap, on peut à tout moment dans le code mettre la directive suivante :

// On remplace le fond de plan par celui d'OpenStreetMap
new CUB.Layer.Background('Mon arrière-plan', CUB.Layer.Background.layerType.OPENSTREETMAP);

Le premier paramètre est le nom à donner à la couche (il peut être omis), et le deuxième est le type de la couche.

Dans l'objet CUB.Layer.Background.layerType se trouvent tous les types de couches disponibles. Vous pouvez essayer avec d'autres types comme par exemple CUB.Layer.Background.layerType.GOOGLESATELLITE :



Veuillez noter que, quel que soit le fond de plan, votre position sur la carte reste la même (ou du moins, approximativement la même, car les différents fonds de plan n'ont pas les mêmes niveaux d'échelle). Bien que chaque fond de plan ait son propre système de coordonnées, (OSM et Google sont en Google Mercator, la CUB en RGF93/CC45...), vous travaillez toujours dans le même système, qui est celui de la projection de travail (voir dans la documentation la fonction CUB.projection()).

Étendue maximale de la carte

Comme vous pouvez le constater, indépendamment du fond de plan, les déplacements sont limités aux étendues de la CUB. Il est bien entendu possible de modifier l'étendue maximale (c'est-à-dire la délimitation de la zone de la carte).

Un chapitre est dédié à l'étendue maximale dans le tutorial 2.

Nous allons essayer de faire une carte autour de l'agglomération Parisienne.

Pour commencer, nous allons changer de système de coordonnées : par défaut, nous sommes en RGF93/CC45, qui est la projection nationale, spécifique à la zone où se situe la CUB; elle est donc inadaptée pour la zone géographique couverte par Paris. Nous allons passer en coordonnées WGS84, qui sont des coordonnées longitude latitude, exprimées en degrés décimaux et utilisées sur la plupart des GPS. Juste après la fonction CUB.init() :

// Passage en coordonnées GPS (longitude latitude en degrés décimaux)
CUB.projection(CUB.projections.WGS84);

Cela veut dire que toutes les coordonnées que nous allons manipuler maintenant seront en WGS84.

Nous mettons maintenant le fond de plan OpenStreetMap :

// On met le fond de plan OpenStreetMap
new CUB.Layer.Background('Mon arrière-plan', CUB.Layer.Background.layerType.OPENSTREETMAP);

Nous allons maintenant modifier l'étendue maximale de la carte, c'est-à-dire la zone dans laquelle nous avons le droit de nous déplacer. Pour ce faire, nous utilisons une étendue.
Une étendue est un cadre, défini par son point bas gauche, et par son point haut droit. Nous définissons une étendue englobant Paris :

// On modifie l'étendue maximale de la carte
CUB.maxExtent(new CUB.Extent(2, 48.7, 2.7, 49))

Il ne nous reste plus qu'à cadrer la vue sur cette étendue (sinon nous resterons au-dessus de la CUB sans pouvoir nous déplacer) :

// On cadre sur Paris
CUB.moveToExtent(CUB.maxExtent());

Et voilà ! Nous avons une carte qui s'ouvre avec OpenStreetMap, et qui est cadrée sur Paris :



Nous pouvons maintenant travailler sur cette carte, en y ajoutant des couches, sur l'étendue de l'agglomération Parisienne !

Voici le code JavaScript complet de cet exemple :

CUB.ready(function() {	
	// Initialise l'API
	CUB.init();
	
	// Passage en coordonnées GPS (longitude latitude en degrés décimaux)
	CUB.projection(CUB.projections.WGS84);
	
	// On met le fond de plan OpenStreetMap
	new CUB.Layer.Background('Mon arrière-plan', CUB.Layer.Background.layerType.OPENSTREETMAP);
	
	// On modifie l'étendue maximale de la carte
	CUB.maxExtent(new CUB.Extent(2, 48.7, 2.7, 49))

	// On cadre sur Paris
	CUB.moveToExtent(CUB.maxExtent());
});
Forum | Clé logicielle
Flux RSS du site OpenData Bordeaux Métropole