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 :
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.
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.
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>
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 :
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 ;RESOLUTIONSPar exemple :
var google = new OpenLayers.Layer.Google( "Google Streets", {type: G_NORMAL_MAP, 'sphericalMercator': true} );
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
