openlayers

Réalisé par :Bouhniz Amal

Plan

•Définition•Fonctionnalités•Architecture•Exemple•Conclusion

1

Définition

Bibliothèque JavaScript OpenSource permettant la mise en place des interfaces cartographiques.

2

Fonctionnalités •Permet d'afficher sur une page web des

données géographiques sous forme d'une carte.

• Intégrer des données issues de plusieurs sources en utilisant les standards WMS ou WFS et de différents formats KML, JSON, GML.

•Ajouter des contrôles graphiques : zoom, affichage et masquage de couche…

3

Architecture

4

Exemple : intégration d’OpenLayers

•Télécharger http://trac.osgeo.org/openlayers/wiki/HowToDownload

•Placer dans l’environnement de développement (ex: localhost d'apache).

•Créer une page web (ex: html).

5

Exemple : afficher une carte

1- Instanciation

2- Choix des couches

3- Ajout des couches à la carte 4- Zoomer au max

5- Appel

6

Exemple : résultat

7

Exemple : enrichir l’interface Il est possible de rajouter à l’interface par défaut un certain nombre d'options de configuration grâce à la classe controls :

Classe Description

PanZoomBar Affiche une barre de zoom.

Scale Affiche l’échelle courante.

LayerSwitcher Affiche un sélecteur 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.

8

Exemple : enrichir l’interface

2- Ajout des options zoom, aperçu

1- Annuler configuration par défaut

9

Exemple : résultat

10

Conclusion

•Version 2.11 supporte le mobile.

•OpenLayers n'offre pas beaucoup de widgets donc l'interface utilisateur doit être combiné avec d'autres frameworks tels que jQuery ou Sencha.

11

Références

•http://openlayers.org/•http://softlibre.free.fr/ol/html/index-fr.html•https://www.projet-plume.org/fiche/

openlayers•http://dev.openlayers.org/releases/

OpenLayers-2.10/doc/apidocs/files/OpenLayers-js.html

Merci