11
22 aoû 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 :






OpenLayers exemples


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





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





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





A propos de l'auteur: 
Arnaud Vandecasteele

Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !

Commentaires

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 de m'avoir fait remonter l'information.

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 sur deux lignes.

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,

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.

Merci pour le tuto,
Avec open layers 2.12 si je ne donne pas un taille au

la carte n’apparaît pas
Toujours en 2.12, le Control.MouseDefaults n'existe plus.

C'est normal que la carte n'apparaisse pas, car dans ce cas le div n'a aucune propriété.
Il est nécessaire de le spécifier au préalable.

Arnaud

Bonjour, j'ai exactement le même problème que ce dernier et je ne vois pas du tout comment le résoudre :/

Bonjour Alban,

Les tutos datent un peu et mériteraient un coup de jeune.
Effectivement la bibliothèque OpenLayers a évolué depuis (heureusement).
je ne désespère pas de trouver un peu de temps afin d'effectuer les corrections nécessaires.

A.

Bonjour,
m'intéressant de près maintenant à OpenLayer, je commence à suivre les tutos. J'ai recopié proprement vos codes, et çà ne fonctionnait pas du coup j'ai regardé et :
Dans le premier : en entrée de ligne ne marchait pas ->
et un

manquait selon moi donc je l'ai rajouté et maintenant le code fonctionne
Je ne suis pas un gros dév mais si çà peut vous aider voilà le code que j'ai changé :