:: Yves Jacolin :: Ludovic Granjon :: Softlibre :: OSGeo-fr ::
"Quand on veut reprendre avec utilité, et montrer à un autre qu'il se trompe, il faut observer par quel côté il envisage la chose, car elle est vraie ordinairement de ce côté-là, et lui avouer cette vérité, mais lui découvrir le côté où elle est fausse." Pascal, Pensées Br. 9, Lafuma 5.

Sommaire | Module suivant


Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide

Module 3 : Les contrôleurs

Dans OpenLayers, les contrôleurs fournissent un moyen pour les utilisateurs d'interagir avec la carte. Certains contrôleurs ont une représentation visuelle et d'autres sont invisibles à l'utilisateur. Quand vous créez une carte avec les options par défaut, quelques contrôleurs par défaut vous sont fournit. Ces contrôleurs permettent à l'utilisateur de naviguer avec la souris (déplacer, zoomer par le click) et les boutons pour se déplacer et zoomer. De plus il y a des contrôleurs par défaut qui prépare la carte pour les attributions des couches et la création de signets pour revenir à votre carte.

Ajouter de nouveaux contrôleurs

Dans cette section, nous allons ajouter quelques nouveaux contrôleurs à votre carte.

(Trouvez une liste des contrôleurs disponibles dans la documentation de l'API d'OpenLayers : http://dev.openlayers.org/apidocs/files/OpenLayers-js.html)

Carte d'aperçu

Ouvrez la page 3-controls.html dans votre navigateur (http://localhost/ol_workshop/3-controls.html). Parce que cette carte n'a été créée avec aucune options spéciales, elle possède les contrôleurs par défaut. Nous allons ajouter le contrôleur d'aperçu de carte qui s'affiche dans la carte (parfois nommé “viewport”).

Juste avant la ligne map.zoomToMaxExtent(), ajoutez le code suivant :

  var overview = new OpenLayers.Control.OverviewMap();
  map.addControl(overview);

De la même manière que nous avons créé une nouvelle carte et ajouter des couches, nous pouvons créer un nouveau contrôleur et l'ajouter à la carte. Comme nous avons fournit aucun argument au constructeur de la carte d'aperçu, les options par défaut sont utilisées. La seconde ligne du code ci-dessus ajoute le contrôleur à la carte. Vous verrez cette procédure répétée pour les autres contrôleurs : construire un nouveau contrôleur, l'ajouter à votre carte.

Personnaliser les options de la carte d'aperçu

Par défaut, quand vous ajoutez un contrôleur d'aperçu de carte à votre carte, il est configuré avec le même fond de carte comme pour votre carte principale. Si vous voulez changer cela ou n'importe quel comportement de votre contrôleur, vous devez fournir des arguments supplémentaires lors de la création du contrôleur. La carte créée par le contrôleur de l'aperçu de carte peut être une couche différente de la carte principale.

La page wiki du contrôleur OverviewMap propose certain détail pour personnaliser ce contrôleur : http://trac.openlayers.org/wiki/Control/OverviewMap.

Créez une nouvelle couche WMS et ajoutez la à votre carte d'aperçu. Vous pouvez utiliser la couche d'image global Blue Marble (“top:bluemarble”) à partir de notre serveur GeoServer.

  var ov_imagery = new OpenLayers.Layer.WMS(
      "Countries",
      "http://localhost/geoserver/wms",
      {layers: "topp:bluemarble"}
  );
  var overview = new OpenLayers.Control.OverviewMap({
      layers: [ov_imagery]
  });
  map.addControl(overview);

Vous pouvez vous amuser avec d'autres options pour configurer le contrôleur d'aperçu de carte en suivant les exemples de la page wiki du contrôleur. Dans la prochaine étape, nous allons ajouter un contrôleur supplémentaire à la zone de carte et comment faire une bonne utilisation de la zone d'écran sur la carte.

Un contrôleur de plus pour la zone de carte

Un autre contrôleur typique pour une application de cartographie sur Internet est un sélecteur de couche. Un sélecteur de couche permet aux utilisateurs de désactiver ou d'activer différentes couches. Pour que le sélecteur de couche soit d'une quelconque utilité, vous devrez vouloir au moins deux couches dans votre carte. Éditez votre page pour créer deux couches (“topp:bluemarble”, et “topp:countries”) et ajoutez un sélecteur de couche à votre carte. Changez la carte d'aperçu afin qu'elle utilise les options par défaut.

  map = new OpenLayers.Map('map');
 
  var imagery = new OpenLayers.Layer.WMS(
      "Global Imagery",
      "http://localhost/geoserver/wms",
      {layers: "topp:bluemarble"}
  );
 
  var countries = new OpenLayers.Layer.WMS(
      "Countries",
      "http://localhost/geoserver/wms",
      {
          layers: "topp:countries",
          format: "image/gif",
          transparent: "TRUE"
      },
      {isBaseLayer: false}
   );
 
  map.addLayers([imagery, countries]);
 
  map.addControl(new OpenLayers.Control.OverviewMap());
 
  map.addControl(new OpenLayers.Control.LayerSwitcher());
 
  map.zoomToMaxExtent();

Le code ci-dessus utilise quelques paramètres supplémentaires pour la couche countries pour demander des images GIF avec un fond transparent. De plus, l'option isBaseLayer est à false, lui permettant de se comporter comme une couche de superposition au lieu d'une couche de base.

Le contrôleur de sélection de couche a été créé avec les options par défaut et ajouté à la carte en une seule ligne de code. Rafraîchissez votre page pour voir à la fois le sélecteur de couche et la carte d'aperçu dans la zone de la carte (cliquez sur le symbole plus en bleu pour l'étendre). À ce moment, votre carte devient un peu à l'étroit. Par défaut, OpenLayers place les contrôleurs qui ont une représentation visuelle dans la zone de la carte. Avec une petite carte, il devient rapidement nécessaire de placer les contrôleurs en dehors de la carte.

Placer les contrôleurs en dehors de la carte

Si vous désirez afficher les coordonnées de la souris, vous pouvez utiliser le contrôleur MousePosition. L'affichage pour ce contrôleur ne prend pas beaucoup de place, mais puisque notre zone de carte est déjà à l'étroit, créons un contrôleur de la position de la souris et plaçons le quelque part dans la page.

D'abord dans le body HTML de votre code, ajoutez un élément de niveau bloc avec aucun contenu. Pour cette exemple, copiez juste le code suivant en-dessous de votre carte (l'élément div avec l'id “map”) :

<div id="mouseposition"></div>

Cela créé un conteneur pour la sortie à partir du contrôleur de la position de la souris. Puis, construisez le contrôleur avec la propriété div définie dans l'argument en option, et ajoutez le contrôleur à votre carte.

  map.addControl (new OpenLayers.Control.MousePosition({
     div: document.getElementById("mouseposition")
  }));

Rafraîchissez votre page, quand vous passez la souris au-dessus de la carte, vous devriez voir les coordonnées de la souris s'afficher en-dessous de la carte. Cet affichage peut utiliser un peu de style,et vous pouvez définir votre déclaration de style dans un Cascading Style Sheet (CSS), mais pour l'instant nous laissons le style par défaut.

Grouper les contrôleurs dans un panneau

En plus de placer des contrôleurs individuels dans un élément que vous créez en dehors de la zone de la carte, vous pouvez regrouper les contrôleurs dans un panneau de contrôle.

Comme avant, ajoutez une balise qui créée une conteneur pour un panneau de contrôle dans votre page. En dessous de l'élément de position de la souris (l'élément div avec un id “mouseposition”), ajoutez la balise suivante.

<div id="panel"></div>

Maintenant créez un panneau de contrôle et ajoutez le à votre carte (juste avant la ligne contenant map.zoomToMaxExtent()).

  var panel = new OpenLayers.Control.Panel({
    div: document.getElementById("panel")
  });
  map.addControl(panel);

Si vous rafraîchissez votre page, vous ne devriez rien voir de significativement différent dans votre application. Nous devons ajouter des contrôleurs au panneau pour voir quelque chose, mais d'abord il est important de comprendre un peu les types des contrôleurs.

Les types des contrôleurs

Il y a trois types de contrôleurs dans OpenLayers - représentés par trois constantes :

  1. OpenLayers.Control.TYPE_BUTTON
  2. OpenLayers.Control.TYPE_TOOL
  3. OpenLayers.Control.TYPE_TOGGLE

Les contrôleurs de type OpenLayers.Control.TYPE_BUTTON déclenchent une action quand ils sont cliqués. Le contrôleur zoomOut est un contrôleur de type bouton. Quand vous cliquez dessus, le zoome de la carte diminue.

Les contrôleurs de type OpenLayers.Control.TYPE_TOOL deviennent actif quand on clique dessus, et sont désactivé lors d'un second clic. Dans un panneau de contrôle, un seul contrôleur de type outil (NdT : tool signifiant outil) peut être activé à la fois. Un contrôleur DrawFeature est un contrôleur de type outil. Quand il est actif, le contrôleur DrawFeature répond aux événements de la souris (dessin d'un objet). Le contrôleur Navigation est également un contrôleur de type outil. Vous ne pouvez pas dessiner des objets et naviguer avec votre souris en même temps, quand ces contrôleurs font partie du même panneau un seul peut être activé à la fois.

Les contrôleurs de type OpenLayers.Control.TYPE_TOGGLE peuvent être activés et désactivés (par un clic de souris par exemple) sans affecté l'état des autres contrôleurs du même panneau. Dans un panneau de contrôles, plus d'un contrôleur de type toogle peut être activé à la fois. Dans un environnement d'édition vectoriel, un contrôleur d'aimantation peut être activé pour que les sommets soient attirés par d'autres sommets ou bords quand ils sont créés. Un tel contrôleur serait un toogle - puisqu'il pourrait être activé et désactivé sans modifier l'état des autres contrôleurs d'édition.

Un panneau de contrôleur en tant que tel n'ajoute pas de fonctionnalité à votre application. Cependant, quand vous ajoutez des contrôleurs à un panneau, le comportement de ces contrôleurs est modifié en fonction du type de contrôle.

Contrôleur de navigation dans l'historique

Dans la prochaine étape, vous allez ajouter un contrôleur de navigation dans l'historique à votre carte. Ce contrôleur a deux sous-contrôles : “précédent” et “suivant”. Ces sous-contrôles sont des contrôleurs de type bouton. Quand vous cliquez sur les contrôles “précédent” ou “suivant”, la carte affiche l'état précédent ou suivant dans l'historique de la navigation de la carte (similaire aux boutons précédent et suivant de l'historique du navigateur, sauf qu'il est limité à la navigation de la carte).

Pour configurer l'affichage des contrôles précédent et suivant, vous devez ajouter quelques déclarations de style à voter page. Dans l'en-tête de votre page, ajoutez le code suivant :

  <style>
    #panel {
        right: 0px;
        height: 30px; 
        width: 200px;
    }
    #panel div { 
        float: left;
        margin: 5px;
    }
  </style>

La déclaration de style ci-dessus détermine la position et la taille de l'élément panel et définie la mise en page des éléments div dans l'élément panel.

Puis, créez un contrôleur de navigation dans l'historique, ajoutez le à la carte, et ajoutez deux sous-contrôles au contrôleur panel créé au-dessus.

  var history = new OpenLayers.Control.NavigationHistory();
  map.addControl(history);
  panel.addControls([history.next, history.previous]);

Rafraîchissez votre page. Vous devriez voir deux contrôleurs de type bouton dessous l'affichage de la position de la souris.

Contact - Information et copyright - Statistique

Recent changes RSS feed Creative Commons License Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki