Accueil

Introduction à OpenLayers

Ecrit par Arnaud le 22/08/2008.
| |

Ce tutorial est un aperçu rapide des possibilités d'OpenLayers. Il vous permettra de comprendre globalement le fonctionnement de cette bibliothèque Javascript OpenSource tournée vers la cartographie.

- Intégration d'OpenLayers
- Afficher une carte
- Enrichir l'interface
- Ajouter des marqueurs

- Intégration d'OpenLayers -

La dernière version d'OpenLayers est librement téléchargeable à l'adresse suivante : OpenLayers.

Une fois dézippé, placer le répertoire OpenLayers dans votre environnement de développement Web (ex: le localhost d'apache). Pour l'instant rien de bien sorcier. Il faut maintenant créer une page internet (de type htm par ex) dans laquelle sera spécifiée à l'intérieur du header la localisation du répertoire d'OpenLayers. Cela se fait de la manière suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>OpenLayers exemples</title>
   <script src="./js/OpenLayers/OpenLayers.js" type="text/javascript">
   </script>
</head>

- Afficher une carte -

Nous allons aborder ici une partie un peu longue et compliquée. Pour comprendre ce qui va suivre, des connaissances en Javascript sont nécessaires.

L'une des premières étapes est de créer un nouvel objet map grâce au constructeur OpenLayers.Map (1), il prend comme paramètre l'id de la balise qui contiendra la carte. C'est à partir de ce dernier que nous pourrons manipuler les éléments relatifs à la carte. Ensuite, nous allons utiliser ce qui fait un des nombreux atouts d'OpenLayers qu'est la possibilité d'interroger des serveurs cartographique grâce au protocole wms(2). Pour finir nous allons afficher la carte désirée (3).

Le résultat est visible sur cette page : exemple 1.

</head>
   <script src="./js/OpenLayers/OpenLayers.js" type="text/javascript">
   <script type="text/javascript">
    function init() {
      var map, ol_wms;     // (1) instanciation du constructeur
     map = new OpenLayers.Map('map');
         // (2) Choix des couches
           var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
         // (3) ajout des couches a la carte
          map.addLayers([ol_wms]);
     //On zoom au max
     map.zoomToMaxExtent();;
   }
  </script>
</head>
  <body onload="init()" >
    <div id="map"></div>
  </body>
</html>

- Enrichir l'interface -

Comme vous avez pu le constater dans l'exemple 1, OpenLayers dispose d'une interface par défaut. Mais il est possible de rajouter un certain nombre d'options de configuration grâce à la classe controls. Comme par exemple une barre pour ajuster le seuil de zoom, l'affichage des coordonnées...

Dans la liste ci-dessous sont définies les boutons de contrôles les plus courants (une liste complète est néanmoins disponible ici) :

Classe Description
PanZoomBar Affiche une barre de zoom (par défaut c'est panZoom qui est utilisé).
Scale Affiche l'échelle courante.
LayerSwitcher Affiche un sélécteur permettant de choisir la couche désirée.
EditingToolbar Affiche la barre d'édition des objets géographiques.
MousePosition Affiche la position du curseur.
OverviewMap Ajoute une carte de référence.

Il existe deux manières pour modifier l'apparence général de la carte :

- En indiquant les options au constructeur :

--> new OpenLayers.Map('map', {controls:[new OpenLayers.Control.OverviewMap()]}); )

- En utilisant la méthode addcontrol() :

--> map.addControl(new OpenLayers.Control.PanZoomBar());

L'exemple ci-dessous (visible sur cette page : exemple 2) explique comment changer l'apparence de la carte en utilisant successivement les deux méthodes exposées précédemment. Ainsi dans un premier temps nous annulons la configuration par défaut d'OpenLayers grâce à MouseDefaults, puis nous ajoutons une barre de zoom et la carte d'aperçu.

</head>
   <script src="./js/OpenLayers/OpenLayers.js" type="text/javascript">
   <script type="text/javascript">
    function init() {
      var map, ol_wms;     //instanciation du constructeur
     map = new OpenLayers.Map('map', { controls:
     [new OpenLayers.Control.MouseDefaults()]});
         //Ajout des options graph, zoom + apercu
     map.addControl(new OpenLayers.Control.PanZoomBar());
     map.addControl(new OpenLayers.Control.OverviewMap());
         //Choix des couches
           var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
         //ajout des couches a la carte
          map.addLayers([ol_wms]);
     //On zoom au max
     map.zoomToMaxExtent();
   }
  </script>
</head>
  <body onload="init()" >
    <div id="map"></div>
  </body>
</html>

- Ajouter des marqueurs -

Les marqueurs sont des indicateurs de position, ils vont permettre de localiser un objet géographique sur la carte.

La création d'un marqueur se fait grâce au constructeur "OpenLayers. Marker". Il suffit ensuite d'ajouter celui-ci à la carte par l'intermédiaire de la méthode markers.addMarker.

Il existe différents types de marqueurs mais pour des raisons de simplicité nous n'en verrons ici qu'un seul. L'objectif du code ci-dessous est tout d'abord d'afficher un marqueur à une position géographique définie. Ensuite, nous allons ajouter un peu d'interactivité en spécifiant qu'au click de l'utilisateur sur le marqueur une fenêtre d'information doit s'afficher. Le résultat du code ci-dessous est visible ici : exemple 3.

 </head>
   <script src="./js/OpenLayers/OpenLayers.js" type="text/javascript">
   <script type="text/javascript">
    function init() {
      var map, layer;     
      map = new OpenLayers.Map('map', { controls: [new OpenLayers.Control.MouseDefaults()]});
     //Caracteristiques de la carte
      var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                                             "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
     map.addLayer(ol_wms);
     map.setCenter(new OpenLayers.LonLat(0, 0), 2);
     map.addControl(new OpenLayers.Control.LayerSwitcher());
     //Creation du layer Marker
     markers = new OpenLayers.Layer.Markers("Marker");
     map.addLayer(markers);
    //Creation du Marker
     feature = new OpenLayers.Feature(ol_wms, new OpenLayers.LonLat(0,45));
     marker = feature.createMarker();
     markers.addMarker(marker);
     marker.events.register("mousedown", marker, mousedown);
    //Gestion des evenements
     function mousedown(evt) {
       popup = feature.createPopup(true);
          popup.setContentHTML("Exemple de PopUp sur un marqueur");
            popup.setBackgroundColor("yellow");
          popup.setOpacity(0.6);
       markers.map.addPopup(popup);
     }
   }
  </script>
</head>
  <body onload="init()" >
    <div id="map"></div>
  </body>
</html>
Retour en haut

Bonjour, Je viens de

Par fowlie (non vérifié), le jeu, 16/06/2011 - 11:12am.

Bonjour,

Je viens de découvrir openlayer et j'ai suivi ce tuto d'ailleur trés bien présenté. J'ai voulu mettre l'image sur mon serveur local cependant lors de l'affichage, si je veux zoomer j'affiche une mosaïque de l'image plutot que l'image elle-même en plus gros. J'ai remarqué qu'en fait vous utilisiez des "morceaux" de l'image assemblé les uns aux autres pour pouvoir zoomer sur l'image. Serait-il possible de savoir comment obtenir le même résultat que vous mais en utilisant une image stockée sur mon propre serveur?

Merci pour vos réponses.

Bonjour, Je suis en train

Par fowlie (non vérifié), le jeu, 16/06/2011 - 11:01am.

Bonjour,

Je suis en train d'apprendre à me servier openlayer et votre tuto m'a beaucoup aidé. Cependant lorsque je copie l'image sur mon serveur local et que je met l'url correspond dans mon code j'ai un petit problème à l'affichage.
En effet lorsque je zoom, au lieu d'agrandir l'image elle se démultiplie pour former une mosaïque de la même image. Cela est-il du au fait que j'ai copié une image pt trop petite?

Est-il possible d'afficher des images au format dwg? car c'est ce que je recherche au final.

Merci pour vos réponse

bonjour, cette ligne : " map

Par thefone (non vérifié), le mar, 10/05/2011 - 12:26am.

bonjour,
cette ligne : " map = new OpenLayers.Map('map', { controls:"
dans la troisième partie n'est pas terminée.

Bonjour, en fait il faut lire

Par fabien, le mar, 10/05/2011 - 10:56am.

Bonjour,
en fait il faut lire sur deux lignes.

Pour le probleme de nom de

Par Jerome Teisseire (non vérifié), le dim, 05/07/2009 - 1:05am.

Pour le probleme de nom de variable c'est dans cette page, titre de l'exemple:
- Ajouter des marqueurs -

//Caracteristiques de la carte
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
^
layer

L'erreur est réparée. Merci

Par Arnaud, le dim, 05/07/2009 - 8:41am.

L'erreur est réparée. Merci de m'avoir fait remonter l'information.