:: 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 2 : Les couches

Chaque cartes OpenLayers possède une ou plusieurs couches. Les couches contiennent toutes les données géospatiales que l'utilisateur voit sur la carte.

Il y a plusieurs sortes de couches. Certaines demandent les données sous forme de tuiles d'images qui couvrent la carte. Deux exemples de ce type de couche sont les couches WMS ('Web Map Service“), qui sont récupérées en utilisant le protocole standard ouvert de l'OGC (“Open Geospatial Consortium”), et les couches propriétaires (“commerciales”) tels que celles fournies par Google et Yahoo. D'autres types de couches chargent des données brutes objet par objet. Un exemple de celle-ci est la couche WFS (“Web Feature Service”). Des détails supplémentaires seront données plus bas.

Section 1 : Couche WMS

La page 1-basics.html créée dans le module 1 utilise une couche WMS. WMS signifie Web Map Service. C'est un protocole standard de l'OGC pour le requetage de données spatiales dynamiquement rendu par une image. Les images sont renvoyées sous forme de tuiles qui couvrent tous le conteneur de la carte.

Une couche WMS est créée dans OpenLayers avec quatre arguments (le quatrième étant optionnel).

Lisez la documentation de la classe pour les références : http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/WMS-js.html

Dans le module précédent, nous avons :

  • donnés à notre couche le titre “Blue Marble”. C'est juste par commodité.
  • définie l'URL à “http://localhost/geoserver/wms”. C'est l'URL à partir de laquelle OpenLayers récupérera les tuiles.
  • définie le paramètre layers à “world”. Puisque le serveur WMS à partir duquel les images sont demandées peut avoir plusieurs jeux de données, ce paramètre définie lequel vous demandez.

Tâches :

  • Copier la page que vous avez écrite dans le Module 1 et modifiez la afin que la couche WMS soit titré ”OpenLayers WMS“, l'URL est ”http://labs.metacarta.com/wms/vmap0“, et le paramètres layers à “basic” (par exemple {layers: “basic”}). Vous devriez être capable de voir une carte des limites politiques du monde quand vous naviguez sur cette page.
  • (Bonus) Il y a beaucoup de sources WMS disponible publiquement en ligne. Cherchez des sites wms sur Google ou essayez sur http://wms-sites.com/ et ajoutez une nouvelle couche à votre carte.

Section 2 : Couche commerciale

En plus de couches WMS disponible, il y a également des fournisseurs commerciaux de cartes tuilées. OpenLayers fournit une gestion de Google Maps, Yahoo Maps, Virtual Earth et MultiMap.

Tâche : dans cette étape, nous allons ajouter une couche Google Maps à notre page 1-basics.html. Faîtes une copie de cette page et sauvez la sous le nom de 2-commercial.html (nous utilisons la couche “Blue Marble” dans ce workshop parce qu'elle est hébergé localement, nous aurons donc de meilleure temps de chargement).

Cela implique d'ajouter une nouvelle balise <script> qui télécharge le code Google Map et créer une seconde couche à votre carte. Éditer votre page 2-commercial.html pour contenir le code suivant.

Remarque importante : dans le code ci-dessous, des retours à la lignes ont été insérés dans la balise script de Google Map, mais elle doit être sur une seule ligne. Enlevez tous les espaces des attributs src de la balise sscript démarrant par “http://maps.google.com”.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <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: 'topp:bluemarble'}
            );
 
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );
 
            map.addLayers([wms, gphy]);
 
            // add a layer switcher
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
            map.zoomToMaxExtent();
        }
    </script>
  </head>
 
  <body onload="init()">
    <div id="map" style="width: 600px; height: 300px"></div>
  </body>
</html>

Rechargez votre page dans votre navigateur et vous devriez voir deux couches disponibles dans le sélecteur de couche sur la droite. Étendez le sélecteur de couche avec le bouton ”+“. Passez d'une couche à l'autre pour voir la différence des tuiles entre celle de Blue Marble et celle de Google. Vous remarquerez que les images de Blue Marble semblent un peu écrasées comparé à celles de Google. Cela est dû au fait que les deux couches utilisent des projections différentes (connu officiellement comme “systèmes de référence spatiale”).

Section 3 : Les couches WFS

Jusqu'ici, nous avons seulement utilisé des fonds de cartes (NdT : appelés “Base layers”). Un seul fond de carte peut être affiché à la fois dans une carte. Mais les couches superposées (NdT : appelées “overlay layers”) peuvent être empilées sur d'autres couches et affichées au même moment.

Dans cette section nous allons créé une couche superposée WFS. WFS signifie “Web Feature Service” ; c'est un auter standard de l'OGC. Au lieu de demander des images de données interprétées, les requêtes WFS renvoient une représentation sérialisée des données (vecteurs). Les couches OpenLayers demandées via WFS retournent des points, deslignes et des polygones dans votre navigateur.

Tâche : démarrez avec une copie de votre première carte basique avec la couche Blue Marble. Appelez-la 2-wfs.html. Maintenant éditez la pour qu'elle ressemble à ceci :

<html>
  <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'}
        );
 
        //initialize the WFS layer here
        var wfs = new OpenLayers.Layer.WFS(
            "States",
            "http://localhost/geoserver/wfs",
            {typename: "topp:states"}
 
        );
 
        //add both layers here
        map.addLayers([wms, wfs]);
        map.zoomToMaxExtent();
    }
    </script>
  </head>
  <body onload="init()">
    <div id="map"  style="width: 600px; height: 300px"></div>
  </body>
</html>

Ouvrez la page dans votre navigateur. Vous devriez voir des polygones représentés les États-Unis superposées dessus la couche de base qui vous est maintenant familière.

Tâche : regarder la carte dans le navigateur. Déplacer la carte jusqu'à ce qu'elle soit centrée sur les États-Unis et affiche une douzaine d'état.

(pour les utilisateurs avancés : si vous utilisez Firefox et avez installé Firebug, ouvrez la console Firebug (Ctrl+shift+L ou Cmd+Shift+L en fonction de votre système). Dans l'onglet Console, essayez de lancer ceci :

  map.getExtent();

Vous devriez pouvoir voir comment vous pouvez regarder l'état de votre application, en accédant à n'importe quelles propriétés ou méthodes décrites dans la documentation de l'API; le lien a été donnée plus haut).

Tâche : Éditez le fichier 2-wfs.html et définissez l'option maxExtent de l'objet map. Vous réalisez cela en donnant au constructeur un deuxième argument, dans ce cas l'objet de type OpenLayes.Bounds, qui représente un zone délimité sur la carte par un contour.

Éditez le fichier 2-wfs.html pour changer la propriété maxExtent de votre carte. Si vous utilisez Firebug, vous pouvez utiliser les valeurs que vous avez obtenu à partir de celui-ci, ou utilisez simplement le code suivante :

map = new OpenLayers.Map('map', {
    maxExtent: new OpenLayers.Bounds(
        -83.02587890625, 38.96728515625,
        -69.84228515625, 45.55908203125
    )
});

Sauvez votre fichier et rafraîchissez la page pour voir la carte centrée sur votre nouvelle zone au démarrage.

Regardons d'un peu plus prés le code suivant :

      //initialize the WFS layer here
      var wfs = new OpenLayers.Layer.WFS(
          "States",
          "http://localhost/geoserver/wfs",
          {typename: "topp:states"}
          
      );

Ce code est très semblable au code de la couche WMS écrit plus haut. Les différences sont :

  • nous avons initialisé une classe d'OpenLayers différente ;
  • l'URL a été changée par ce que le serveur utilise une URL différente pour le WFS ;
  • nous avons inclus un paramètre typename. Ce paramètre qui définit quelle données récupérer du serveur, semblable au layers du WMS. Plus loin dans ce workshop, vous récupérerez différentes données en changeant ce paramètre.

Enfin, nous avons ajoutés cette couche à la carte en l'ajoutant à la liste des couches que nous envoyons à la méthode map.AddLayers() :

map.AddLayers([wms,wfs]);

Au premier chargement, la carte a été zoomée sur son étendue maximale. Cela rend difficile la visualisation de la couche WFS. OpenLayers vous permet de définir le centre le niveau de zoom de votre carte à son ouverture afin que les utilisateurs n'aient pas à zoomer à l'endroit qui les intéresse.

Tâche en bonus : La carte ci-dessus affiche deux couches avec des données dans le même système de référence spatial. Lors de l'affichage de la couche Google, nous avons mentionné comment les tuiles apparaissaient différemment des tuiles Blue Marble parce que les données étaient dans un système de référence spatiale différent. Pour les couches WMS (ou les images tuilés en générale), vous êtes limité à des requêtes dans les systèmes de références spatiales que le serveur gère - c'est à dire que nous ne pouvons pas transformer l'image en un nouveau système de référence spatial dans le navigateur. Nous pouvons cependant transformer les données vecteurs (d'un serveur WFS) côté client.

Créez une carte, avec deux couches : un fond de carte commercial (Google), et une couche superposée WS (comme définie ci-dessus). Pour la couche commerciale, vous voudrez vous documenter sur le paramètre sphericalMercator. Pour la couche superposée vectorielle, cherchez des informations sur l'option projection. Il y a des exemples dans le répertoire examples d'OpenLayers qui vous seront utiles.

Contact - Information et copyright - Statistique

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