API CUB > Tutoriaux > Navigation

2. Navigation

Difficulté :

Objectif du tutorial

Apprendre à utiliser les fonctions de navigation par programmation

Prérequis

Activation / désactivation de la carte

Il existe deux fonctions très simples, permettant d'activer ou de désactiver l'ensemble des contrôles de la carte : zoom, panoramique, rotation... Ces fonctions peuvent vous être utiles si vous souhaitez bloquer la carte et ses fonctionnalités.

L'utilisation est très simple; pour désactiver la carte, reprenez le code du tutorial 1 générant une carte simple, et tapez le code suivant (Vous pouvez rentrer ce code directement dans la console de débogage de votre navigateur si vous en avez une) :

CUB.disable()

Vous pouvez constater que la carte ne réagit plus aux intéractions utilisateur.
Pour la réactiver :

CUB.enable()

Vue générale

Pendant la navigation, il est parfois utile de revenir en "vue générale". La vue générale est la vue telle que toute l'étendue maximale de la carte soit visible dans l'écran. Par défaut, l'étendue maximale sur l'API CUB est l'étendue du territoire de la CUB. Vous pouvez changer cette étendue, nous verrons cela au chapitre "Étendue de la carte".

Il existe une fonction qui permet de revenir en vue générale. Vous pouvez l'insérer par exemple dans un bouton sur votre page :

<input type="button" value="Vue générale" onclick="CUB.moveToWhole()">

Rotation de la carte

La rotation de la carte est une fonctionnalité importante sur l'API CUB. Elle permet d'orienter la carte en fonction des objets sur lesquels on travaille ou en fonction de l'environnement si on utilise un appareil mobile.

La rotation étant gérée nativement par l'API, vous pouvez savoir à tout moment quel est l'angle de rotation de la carte. Pour ce faire, utilisez la fonction suivante, qui retourne l'angle de rotation en degrés de la carte, par rapport au nord :

CUB.rotate();

Il s'agit d'une fonction lecture / écriture, c'est-à-dire que l'on peut l'invoquer soit pour lire la valeur, soit pour la changer.
Vous pouvez donc changer la valeur de rotation de la carte en lui passant un angle de degrés :

CUB.rotate(0);

Ce qui aura ici pour fonction de remettre la carte plein nord. À noter que la fonction renvoie toujours l'angle de rotation courant de la carte, même quand on lui fixe une valeur.

Autre point, il est possible de désactiver la rotation de la carte. Utilisez :

// Pour désactiver la rotation
CUB.disableRotation();

// Pour la réactiver
CUB.enableRotation();

Centrage sur un point

Un fonction qui permet de faire des déplacements panoramiques ainsi que des zooms est la fonction de centrage sur point. Vous lui passez en paramètre un point localisé, et elle va déplacer la carte afin que ce point soit au centre de la vue.

Vous pouvez, en plus, passer un dénominateur d'échelle à laquelle vous voulez que la carte se déplace. Bien entendu, l'API se cadrera à l'échelle de zoom la plus proche.
Voici une utilisation de cette fonction :

// Centrage sur l'Esplanade des Quinconces à Bordeaux (la position est en RGF93/CC45). L'échelle courante est conservée.
CUB.moveToPoint(new CUB.Position(1417626, 4189068));

// Pour changer d'échelle et cadrer au 1/1000e
CUB.moveToPoint(new CUB.Position(1417626, 4189068), 1000);

Zoom sur une étendue

Le zoom sur une étendue permet d'effectuer un panoramique et de zoomer à la fois. Une étendue est définie par un point bas gauche et un point haut droit. Le zoom se fera de telle façon que l'étendue sera contenue dans la vue :

// Cadrage sur Bordeaux (Coordonnées en RGF93/CC45)
CUB.moveToExtent(new CUB.Extent(1411750, 4185585, 1420575, 4192045));

Étendue de la carte

L'étendue de la carte est la zone dans laquelle on peut se déplacer. On n'a pas le droit d'en sortir, car elle définit les limites de la carte. Par défaut, l'étendue de la carte correspond à l'étendue de la CUB. Bien entendu, nous pouvons la changer. Nous allons utiliser la fonction CUB.maxExtent().

La fonction CUB.maxExtent() renvoie ou définit l'étendue maximum :


Pour illustrer ceci, nous allons utiliser le jeu de coordonnées de l'extrait de code précédent, afin de limiter l'étendue de la carte à Bordeaux :

CUB.maxExtent(new CUB.Extent(1411750, 4185585, 1420575, 4192045));

Essayez...Vous ne pouvez pas vous déplacer au-delà des limites que nous venons de fixer !

Forum | Contrat de licence | Conditions d'utilisation | Mentions légales | Clé logicielle | FAQ | bordeaux-metropole.fr
Flux RSS du site OpenData Bordeaux Métropole