:: 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 1

Module 1 : Les bases d'OpenLayers

Afficher une carte est le coeur d'OpenLayers, commençons par créer une carte très simple.

Une carte très simple

Copier le code suivant dans un éditeur de texte et sauver dans un répertoire appelé ol_workshop à la racine des documents Apache sous le nom de 1-basics.html. Ouvrez-le dans votre navigateur : http://localhost/ol_workshop/1-basics.html.

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <script src="openlayers/lib/OpenLayers.js"></script>
        <script type="text/javascript">
 
            var map = null;
 
            function init(){
 
                map = new OpenLayers.Map('map');
 
                var wms = new OpenLayers.Layer.WMS(
                    "Blue Marble",
                    "http://localhost/geoserver/wms",
                    {layers: 'world'}
                );
 
                map.addLayers([wms]);
                map.zoomToMaxExtent();
            }
        </script>
      </head>
 
      <body onload="init()">
        <div id="map"  style="width: 600px; height: 300px"></div>
      </body>
    </html>

Quand vous ouvrez la page dans votre navigateur, il affiche ceci :

Le script peut être vue comme ayant 6 étapes distinctes :

  • La bibliothèque est chargée en utilisant la balise script.
  • Il y a un élément div avec l'id “map” qui contient la carte.
  • Une carte est créée en utilisant JavaScript.
  • Une couche est créée en utilisant JavaScript.
  • La carte zoom au large que possible.
  • Le code JavaScript est appelé seulement après l'événement OnLoad de la balise body.

Les étapes suivantes détaillent ces étapes.

Étape 1 : Obtenir la bibliothèque OpenLayers

  <script src="openlayers/lib/OpenLayers.js"></script>

L'url openlayers/lib/OpenLayers.js pointe vers la localisation du fichier JavaScript qui charge OpenLayers. Parce qu'OpenLayers est open source, vous pouvez utilisez des outils de débugages tel que Firebug pour tester la bibliothèque OpenLayers de suite dans votre navigateur !

(Pour les utilisateurs avancés : il est également possible de compresser OpenLayers en un seul fichier qui améliore spectaculairement le temps de chargement. Pour plus d'information sur la manière de compiler un profile, lisez http://trac.openlayers.org/wiki/Profiles)

Il est aussi facile de compresser OpenLayers en un seul fichier qui améliore énormément le temps de chargement. Pour plus d'information sur la manière de définir un profile, lisez http://trac.openlayers.org/wiki/Profiles (anglais).

Étape 2 : La carte dans le Document Object Model (DOM)

  <div id="map" style="width:600px; height:300px" ></div>

Il y a un conteneur pour la carte que nous somme en train de créer dans notre page. Plus tard, quand nous initialiserons l'objet “map”, nous donnerons l'id de cet élément div au constructeur de la carte.

La taille de la carte est déterminé par la taille de l'élément qui le contient. Ici nous avons définie la taille de la carte avec une déclaration de style dans le code à 600 pixels par 300 pixels (Remarquez que ces déclarations devraient mieux être placé dans un élément <style> - nous le plaçons ici directement dans l'élément ``div`` pour une question de simplicité).

Étape 3 : L'objet map

  map = new OpenLayers.Map('map');

Les cartes dans OpenLayers sont représentées par la classe Map. Chaque objet Map représente une carte différente sur la page. Nous créons une nouvelle carte en utilisant l'opérateur new en javaScript avec le constructeur de la classe OpenLayers.Map.

Dans ce code, nous avons passés au constructeur Map un argument qui est l'identifiant ('map') de l'élément que nous utilisons comme conteneur de la carte. Le constructeur Map() peut également prendre en second argument optionnel un objet contenant plus de paramètre pour une personnalisation fine des fonctionnalités de la carte.

Pour plus d'information, la référence pour la documentation de l'API pour le constructeur Map peut être trouvé sur la page http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.OpenLayers.Map

Ce code un nouveau objet OpenLayers.Map et lui donne le nom de la variable map. Nous avons déclaré cette variable quelque part en dehors de la fonction init (voir var map = null;) afin que vous pussiez y accéder globalement (pour débuguer).

si vous utilisez Firebug, essayez de taper 'map' dans la console. Cela vous permet de naviguer dans l'objet map et toutes ces propriétés).

Étape 4 : Créer une couche

    var wms = new OpenLayers.Layer.WMS(
        "Blue Marble",
        "http://localhost/geoserver/wms",
        {layers: 'world'}
    );
 
    map.addLayers([wms]);

OpenLayers organise une carte en plusieurs couches. Ce code construit une couche (référencé sous le nom wms) et l'ajoute à la carte. Pour plus d'information sur la création de couches, voyez le Module 2 de ce workshop).

Étape 5 : Positionner la carte

    map.zoomToMaxExtent();

Ce code dis à la carte de zoomer sur l'étendue maximale, qui est par défaut le monde entier. Il est possible de définir une étendue maximale différente comme une option dans le constructeur Map.

Les cartes d'OpenLayers nécessitent de savoir quelle partie du monde elles doivent afficher avant que quelques choses n'apparaissent sur la page. zoomToMaxExtent() est une manière de réaliser cela. D'autres manières existent offrant plus de précision comme zoomToExtent() et setCenter(). Vous pouvez trouver pour ces deux méthodes de l'objet map dans les documents de l'API : http://dev.openlayers.org/apidocs/files/OpenLayers/Map‑js.html

Étape 6 : Charger la carte

    <body onload="init()">

Dans le but de ne pas avoir de comportement imprévisible, il est important de s'assurer que la page entière a été chargée avant que le script qui créé la carte ne soit exécuté.

Nous nous assurons de cela en plaçant le code de création de la carte dans une fonction qui est appelée lorsque l'élément <body> de la page reçoit l'événement onload.

Contact - Information et copyright - Statistique

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