SlideShare une entreprise Scribd logo
1  sur  14
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




                1- Annuler configuration par défaut

                     2- Ajout des options zoom, aperçu




                                                      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

Contenu connexe

Similaire à OpenLayers

La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informationsLa caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
ChristopheTricot
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
Laurent Moccozet
 

Similaire à OpenLayers (20)

Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informationsLa caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
 
formation docker.pdf
formation docker.pdfformation docker.pdf
formation docker.pdf
 
Drupalcamp Nantes - Open layers
Drupalcamp Nantes - Open layersDrupalcamp Nantes - Open layers
Drupalcamp Nantes - Open layers
 
Drupalcamp Nantes - Open layers
Drupalcamp Nantes - Open layersDrupalcamp Nantes - Open layers
Drupalcamp Nantes - Open layers
 
Rmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-frRmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-fr
 
Open layers - utilisation simple et avancée
Open layers - utilisation simple et avancéeOpen layers - utilisation simple et avancée
Open layers - utilisation simple et avancée
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
 
Du code à la carte
Du code à la carteDu code à la carte
Du code à la carte
 
tn005.ppt
tn005.ppttn005.ppt
tn005.ppt
 
Découvrir Drupal, le CMS Open Source de référence
Découvrir Drupal, le CMS Open Source de référenceDécouvrir Drupal, le CMS Open Source de référence
Découvrir Drupal, le CMS Open Source de référence
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
 
tp-spring.pdf
tp-spring.pdftp-spring.pdf
tp-spring.pdf
 
CI-Jenkins.pptx
CI-Jenkins.pptxCI-Jenkins.pptx
CI-Jenkins.pptx
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Sudoc plus - Technique
Sudoc plus - TechniqueSudoc plus - Technique
Sudoc plus - Technique
 
PostgreSQL, plus qu'une base de données, une plateforme aux multiples usages
PostgreSQL, plus qu'une base de données, une plateforme aux multiples usagesPostgreSQL, plus qu'une base de données, une plateforme aux multiples usages
PostgreSQL, plus qu'une base de données, une plateforme aux multiples usages
 
Barre pour développeur Firefox et Eclipse
Barre pour développeur Firefox et EclipseBarre pour développeur Firefox et Eclipse
Barre pour développeur Firefox et Eclipse
 
Docker nice meetup #1 construire, déployer et exécuter vos applications, ...
Docker nice meetup #1   construire, déployer et exécuter vos applications, ...Docker nice meetup #1   construire, déployer et exécuter vos applications, ...
Docker nice meetup #1 construire, déployer et exécuter vos applications, ...
 

Plus de leilameherzi (11)

Dropbox Amine Amimi
Dropbox Amine AmimiDropbox Amine Amimi
Dropbox Amine Amimi
 
Latex
LatexLatex
Latex
 
AppEngine
AppEngineAppEngine
AppEngine
 
Arc Gis
Arc GisArc Gis
Arc Gis
 
B2 g
B2 gB2 g
B2 g
 
Plateforme BI
Plateforme BIPlateforme BI
Plateforme BI
 
google wallet
google walletgoogle wallet
google wallet
 
Titanium
Titanium Titanium
Titanium
 
Cloud Computing
Cloud Computing Cloud Computing
Cloud Computing
 
Core audio
Core audioCore audio
Core audio
 
Réalité augmentée
Réalité augmentée Réalité augmentée
Réalité augmentée
 

OpenLayers

  • 2. Plan • Définition • Fonctionnalités • Architecture • Exemple • Conclusion 1
  • 3. Définition Bibliothèque JavaScript OpenSource permettant la mise en place des interfaces cartographiques. 2
  • 4. 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
  • 6. 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
  • 7. Exemple : afficher une carte 1- Instanciation 2- Choix des couches 3- Ajout des couches à la carte 4- Zoomer au max 5- Appel 6
  • 8. Exemple : résultat 7
  • 9. 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
  • 10. Exemple : enrichir l’interface 1- Annuler configuration par défaut 2- Ajout des options zoom, aperçu 9
  • 11. Exemple : résultat 10
  • 12. 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
  • 13. 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
  • 14. Merci