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


Introduction

Présentation

OpenLayers est une bibliothèque écrite en JavaScript qui permet de développer facilement et rapidement une interface cliente indépendante de tout serveur cartographique. Elle propose par défaut le chargement de données aux formats standards de l'OGC WMS, WFS, de fonds propriétaires Google, Yahoo, Virtual Earth, de données aux formats industriels KML, GeoRSS, GML, etc. Parmi les fonctionnalités proposées, on trouvera le zoom avant et arrière, le déplacement (pan), l'affichage des coordonnées, d'une vue générale, d'une liste de couches (encore sommaire mais qui évoluera), le tuilage des couches et la mise en cache des tuiles côté client. Une mise en cache côté serveur est possible avec TileCache, présenté un peu plus tard.

OpenLayers est développé par une communauté de plus en plus large et disponible,et que vous pouvez contacter par liste, ou IRC. OpenLayers est un projet de l'OSGeo. Le site officielle est situé à http://openlayers.org.

Vous trouverez une documentation succincte mais appelé à évoluer et en anglais ici : http://openlayers.org/doc/, l'API est disponible ici : http://dev.openlayers.org/docs/files/OpenLayers-js.html et des exemples ici : http://openlayers.org/dev/doc/examples.html

Objectifs de ce chapitre :

  • Aperçu des objets map et layers ;
  • Créer sa première carte ;
  • Ajouter ses données en utilisant un fond de carte commercial.

Installation

Il existe deux manières d'utiliser OpenLayers dans son site Internet. La première consiste à appeler la bibliothèque JavaScript par la balise <script> :

<script src='http://openlayers.org/api/OpenLayers.js'></script>

Bien entendu vous pouvez télécharger la bibliothèque en local à partir de la page de téléchargement : http://trac.openlayers.org/wiki/HowToDownload

Il existe deux présentations de la bibliothèque. La première, que l'on nommera les sources d'OpenLayers, est constitué d'un fichier openlayers.js qui appelle tous les autres fichiers inclus dans l'arborescence de la bibliothèque. La deuxième version, une sorte de version compilée, mais pas binaire, est composé de la compilation de tous les fichiers en un seul fichier compacté. Le fichier est ainsi de faible taille, mais illisible : tout espace superflu est enlevé lors de la compression. L'appel à la bibliothèque se fait de la même manière, mais avec pour référence la page d'où elle est appelé :

<script src='api/OpenLayers.js'></script>

Vous êtes maintenant prêt à utiliser la bibliothèque.

Première carte

L'API d'OpenLayers a deux concepts d'objet : les objets map et layers. Un objet Map stocke les informations sur la carte, sa taille, sa projection, les unités, son étendue, etc. Dans une carte, les données sont affichées sous forme de couches (layers). Un objet layers est une source de données qui définit comment OpenLayers doit récupérer les données et les afficher.

Mise en place

Construire une interface OpenLayers nécessite l'ajout de code HTML spécifique au sein de votre page. Vous pouvez mettre une carte là où vous le désirez, la bibliothèque OpenLayers ne vous posera pas de problème. Voici un exemple tout simple pour placer une interface OpenLayers :

  <html>
  <head>
    <title>OpenLayers Example</title>
      <script
      src="http://openlayers.org/api/OpenLayers.js"></script>
      </head>
      <body>
        <div style="width:100%; height:100%" id="map"></div>
  </body>
  </html>

Pour initialiser une carte dans cette interface, vous devez écrire un petit bout de code JavaScript dans l'en-tête de la page ou dans un fichier map.js par exemple. Ce fichier ou ce code devra être placé après l'insertion de la bibliothèque OpenLayers. Généralement, on crée une fonction init() qui, placer dans la balise <body> initialisera la carte au chargement de la page.

  var map;
  function init() {
    //on créer l'objet map
    map = new OpenLayers.Map('map');
    //on crée une couche wms
    var wms = new OpenLayers.Layer.WMS(
       "http://labs.metacarta.com/wms/vmap0", 
       {'layers':'basic'}
    );
    //on ajoute la couche wms à la carte
    map.addLayer(wms);
  }

Voici un exemple complet :

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>
 
</body>
</html>

Ajouter des fonds de carte Google

Google utilise une projection déformée qui implique que les autres couches ne sont pas toujours bien superposée. Google utilise une projection Mercator en assumant que la terre est sphérique (ce qui est incorrect). Il s'ensuit que pour un zoom important un décalage entre le fond cartographique de Google et vos données. Vous pouvez utiliser la possibilité de reprojection des données ou bien définir la projection dans les paramètres de la carte et les options de la couche du fond commercial. Voici comment réaliser la deuxième méthode (la plus facile), définissez les options de l'objet map comme cela :

            var options = {
                projection: "EPSG:900913",
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
            };

La projection sous la forme de proj4 est la suivante :

 +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0
 +k=1.0 +units=m +nadgrids=@null +no_defs

Vous trouverez plus d'information sur la page suivante, en anglais. et pour GeoServer :

   900913=PROJCS["WGS84 / Simple Mercator", GEOGCS["WGS 84",
   DATUM["WGS_1984", SPHEROID["WGS_1984", 6378137.0, 298.257223563]], 
   PRIMEM["Greenwich", 0.0], UNIT["degree", 0.017453292519943295], 
   AXIS["Longitude", EAST], AXIS["Latitude", NORTH]],
   PROJECTION["Mercator_1SP_Google"], 
   PARAMETER["latitude_of_origin", 0.0], PARAMETER["central_meridian", 0.0], 
   PARAMETER["scale_factor", 1.0], PARAMETER["false_easting", 0.0], 
   PARAMETER["false_northing", 0.0], UNIT["m", 1.0], AXIS["x", EAST],
   AXIS["y", NORTH], AUTHORITY["EPSG","900913"]]

La version 1.5.4 et supérieure de GeoServer ne nécessite pas de définir la projection dans la configuration, celle-ci étant déjà incluse dans le code.

Revenons à OpenLayers, pour ajouter une couche Google vous devez ajouter un objet layer à votre objet map, avec la méthode suivante :

new OpenLayers.Layer.Google(NomCouche, options);

Le paramètre options est un tableau qui contient les options à passer à la méthode. Les options possibles sont :

  • type : le type de la couche google (normale, satellite, mixte) ;
  • sphericalMercator : doit on définir la projection ? La valeur true est vivement conseillée.

Pour le paramètre type, vous avez le choix entre :

  • G_NORMAL_MAP
  • G_SATELLITE_MAP
  • G_HYBRID_MAP

Vous avez trois constantes, que vous pouvez modifier :

  • MIN_ZOOM_LEVEL : 0 est la valeur par défaut ;
  • MAX_ZOOM_LEVEL : 19 est la valeur par défaut ;
  • RESOLUTIONS

Par exemple :

  var google = new OpenLayers.Layer.Google(
                 "Google Streets",
                 {type: G_NORMAL_MAP, 'sphericalMercator': true}
  );

Si vous activez plusieurs type de couche Google (hybrid, default, satellite par exemple), ajoutez vos couches avec la méthode addlayers() sinon vous pouvez avoir un décalage de l'étendue à chaque changement de couche Google. Exemple : map.addLayers([google,hybrid,satellite]);

Si vous désirez superposer une couche GML (ou autre) avec un fond Google, vous devez utiliser l'option 'sphericalMercator': true, de plus vous devrez reprojeter vos couches dans “la bonne” projection, comme ceci :

ogr2ogr -f "ESRI Shapefile" -t_srs "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null 
+no_defs" -s_srs "EPSG:4326" Mono2006_2.shp Mono2006_region.shp

Si vous utilisez une version d'OGR supérieure ou égale à 1.5.0, utilisez directement le code 'EPSG:900913' pour reprojeter vos données.

Enfin pour PostGIS cela peut servir :

INSERT INTO spatial_ref_sys (srid,auth_name,auth_srid,srtext,proj4text) VALUES
(900913,'EPSG',900913,'PROJCS["Google Mercator", GEOGCS["WGS 84",DATUM["World Geodetic System 1984", SPHEROID["WGS 84", 6378137.0, 298.257223563, AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4326"]], PROJECTION["Mercator (1SP)", AUTHORITY["EPSG","9804"]], PARAMETER["semi_major", 6378137.0], PARAMETER["semi_minor", 6378137.0], PARAMETER["latitude_of_origin", 0.0], PARAMETER["central_meridian", 0.0], PARAMETER["scale_factor", 1.0], PARAMETER["false_easting", 0.0], PARAMETER["false_northing", 0.0], UNIT["m", 1.0], AXIS["Easting", EAST], AXIS["Northing", NORTH], AUTHORITY["EPSG","900913"]]','+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs');

Yves Jacolin 2008/07/17 21:45

Contact - Information et copyright - Statistique

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