openlayers & l’api web 2d en javascript du...

ign.fr

OpenLayers &

l’API Web 2D en JavaScript du Géoportail

08/01/2013Géoportail

Plan

08/01/2013Géoportail 2/56

� Qu’est-ce qu’une API?

� Qu’est-ce que OpenLayers?

� TP

� Qu’est-ce l'API du Géoportail?

� Pourquoi l'API du Géoportail?

� Comment ça marche?

� Mise en œuvre

� TP

Qu’est-ce qu’une API?

08/01/2013Géoportail 3/56

Qu’est-ce qu’une API?

�API = Application Programming Interface

Une bibliothèque de fonctions documentées dans un langage donné (JavaScript, Flash, …)

�Basée sur une application existante

�Utilisable par un développeur pour mettre en place une nouvelle application

08/01/2013Géoportail 4/56

Qu’est-ce qu’une API?

08/01/2013Géoportail

�Développer une application pour son propre site

5/56

varOpenLayers={singleFile:true};OpenLayers.String={startsWith:function(b,a){return(b.indexOf(a)==0)},contains:function(b,a){…

1- L’IGN fournit une bibliothèques de fonctions

(code source) Géoportail

2- Un webmaster utilise ce code pour interfacer son site Web avec le Géoportail

3- Un site Web affiche lesréférentiels Géoportail via sapropre interface en ajoutantses propres outils

Qu’est-ce qu’une API?

08/01/2013Géoportail

�API Google Search

6/56

Qu’est-ce qu’une API?

08/01/2013Géoportail

�API Google Calendar

7/56

Qu’est-ce qu’une API?

08/01/2013Géoportail

�API Google Maps

8/56

Qu’est-ce que OpenLayers?

08/01/2013Géoportail 9/56

Qu’est-ce que OpenLayers?

� une API Javascript Opensource pour

construire des applications de Webmapping

08/01/2013Géoportail 10/56

OpenLayers

�Compatibilité :

� Principaux navigateurs (FF, IE, Opéra, Chrome, Safari)

�Maturité : première version en 2006

�Communauté : grande communauté d'utilisateurs, des mises à

jour régulières

�Documentation :

� Doc des classes OpenLayers

� Exemples

� Forums

Utilisation d'OpenLayers

Les Objets OpenLayers

Map

Layer Control

addControl()addLayer()

// import d'OpenLayers.js<script src= />

// création de la cartevar map = new OpenLayers.Map(...)

// ajout des couchesvar layer = new OpenLayers.Layer...()map.addLayer(layer);

// ajout des controlesvar control = new OpenLayers.Control...()map.addControl(control);

carte

couche évènement

Format

Style

Marker

Popup

Geometry

Request

Parcours des classes OpenLayers

� Map : objet principal qu'il est obligatoire d'instancier pour

accéder aux fonctionnalités d'OpenLayers.

� Layer :classe représentant les couches (vectorielles, WMS,

image ...)

� Control : classe pour la gestion des différents outils

MousePosition, OverviewMap,LayerSwitcher,EditingToolBar

� …

La documentation OpenLayers

http://dev.openlayers.org/docs/files/OpenLayers-js.html http://openlayers.org/dev/examples/

Les classes Les exemples

TP 1 : Une carte très simple

TP2 : OpenLayers.Control

Les autres APIs cartos

Géoportail :

Google Maps :

Bing Maps :

Qu’est-ce que l’API du Géoportail?

08/01/2013Géoportail 19/56

Qu’est-ce que l’API du Géoportail?

� Une bibliothèque de fonctions qui permet:

�d’intégrer une cartographie dynamique dans son site Web.

�de superposer des couches métiers utilisateurs avec les référentiels Géoportail

� Disponible dans deux langages: JavaScript et Flex

� Avantages:�Liaison directe avec les référentiels IGN

�Bibliothèque OpenSource

�De nombreux outils et services web

�Evolutive (retours des utilisateurs) + support IGN

08/01/2013Géoportail 20/56

� 93 couches de données en octobre 2012

� Couverture nationale (France métropolitaine, DOM et COM)

� Une mise à jour continue des données IGN

Les données de référence Géoportail

Les données accessibles depuis les APIs Géoportail

08/01/2013Géoportail 22/5622/56

ORTHOIMAGERY.ORTHOPHOTOS Ortho-imagerie

GEOGRAPHICALGRIDSYSTEMS.MAPS Cartes IGN

CADASTRALPARCELS.PARCELS Parcelles cadastrales

BUILDINGS.BUILDINGS Bâtiments

HYDROGRAPHY.HYDROGRAPHY Hydrographie

TRANSPORTNETWORKS.ROADS Routes

ADMINISTRATIVEUNITS.BOUNDARIES Limites administratives

TRANSPORTNETWORKS.RAILWAYS Réseaux ferroviaires

TRANSPORTNETWORKS.RUNWAYS Réseaux aériens (Aérodrome)

UTILITYANDGOVERNMENTALSERVICES.ALL Services d'utilité publique

Les données accessibles depuis les APIs Géoportail

Géoportail 23/56

ELEVATION.SLOPES Teintes hypsométriques

ELEVATION.LEVEL0 Trait de côte

LANDUSE.AGRICULTURE2007 Îlots de culture (2007)

LANDUSE.AGRICULTURE2008 Îlots de culture (2008)

LANDUSE.AGRICULTURE2009 Îlots de culture (2009)

ORTHOIMAGERY.ORTHOPHOTOS.COAST2000 Ortho-imagerie du littoral (2000)

GEOGRAPHICALGRIDSYSTEMS.CASSINI Cartes de Cassini

GEOGRAPHICALGRIDSYSTEMS.ETATMAJOR40 Cartes État-Major (1/40 000)

LANDCOVER.FORESTINVENTORY.V1 Inventaire forestier (v1)

LANDCOVER.FORESTINVENTORY.V2 Inventaire forestier (v2)

ORTHOIMAGERY.ORTHOPHOTOS2000-2005 Ortho-photographie (2000-2005)

En superposition avec vos référentiels

08/01/2013Géoportail

� Différentes méthodes disponibles pour afficher ses propres données dans les principaux standards du Web (KML, GPX, WMS,…)

� Des outils facilitant l’affichage des données métiers (popups, styles, reprojection)

24/56

Les principales fonctionnalités

08/01/2013Géoportail 25/56

Outils de mesureOutils de

Géocodage

Gestionnaire

de couches

Outils d’édition de

géométries

Outil d’export de

données

Outils

d’impression

Outil d’import

de données

� API Géoportail JavaScript (2D)� API Géoportail Flex (2D)� API Géoportail 3D

Les différentes APIS

L’API JavaScript

08/01/2013Géoportail

� Projet OpenSource

27/56

� possibilité de récupérer et modifier les sources (débogage)

� Socle OpenLayers + gestion des projections (proj4)

� Historique des versions

Les différents niveaux de l’API JavaScript

08/01/2013Géoportail

�L'API Minimum:

Connexions aux flux Géoportail

28/56

Contient uniquement les surcharges nécessaires à l'affichage des données de l'infrastructure Géoportail

Les différents niveaux de l’API JavaScript

08/01/2013Géoportail

�L'API Standard:

Connexions aux flux Géoportail

Gestionnaire des couches

Gestionnaire des projections, échelles

Interface graphique

29/56

Contient la plupart des fonctionnalités, des outils et des éléments d'interface graphique

Les différents niveaux de l’API JavaScript

08/01/2013

�L'API Etendue:

Impression

Mesures

Recherche par adresses

Recherche de métadonnées

Dessin

Historique de navigation

30/56

Contient l’intégralité des fonctionnalités

L’API Flash

08/01/2013Géoportail 31/56

� Utilise Openscales

� L’API Géoportail Flex est plus récente que la JavaScript et n'a connu que 2 versions.

� La version 2.0 est celle qui est utilisée par le site internet du Géoportail dans sa 3e version : http://www.geoportail.gouv.fr.

� Réalisée en javascript

� permet d'intégrer dans une page web le globe virtuel VirtualGeo avec les données du Géoportail.

L’API 3D

L'API Haut Niveau est constituée :

• d'un loader: méthode pour charger le client de visualisation 2D JavaScript, 2D Flash ou 3D

• de setters: appelables depuis l'objet JavaScript interfaceViewer, retourné par le loader pour interagir avec le viewer

• d’évènements : envoyés par le viewer auxquels l'interfaceViewer peut s'abonner

L’API Haut Niveau (AHN)

Pourquoi l’API du Géoportail

08/01/2013Géoportail 34/56

A quels besoins répond l’API du Géoportail

08/01/2013Géoportail 35/56

�Visualiser de l’information géographique

� Des données IGN

� Des données partenaires (WMS, WFS, KML, GML, etc.)

�Publier des données métiers

� Dans les principaux formats standards du Web

�Saisir des données

� Géométrie simple (point, ligne, polyligne)

� Sur fond de données de référence

Comment ça marche

08/01/2013Géoportail 36/56

L'infrastructure Géoportail

08/01/2013Géoportail 37/56

Les données

08/01/2013Géoportail 38/56

�L'infrastructure du Géoportail héberge des données brutes sousdifférents formats:

� image (ortho photographies, cartes scannées, etc.)

� vectoriel (routes de la BDTOPO® par exemple).

� Tuiles d’images pré-calculées

Les services

�Le Géoportail propose divers services de diffusion de données:

�WMS : met à disposition d’utilisateurs distants des données raster ou vecteur géoréférencées via une simple requête HTTP.

�WFS : sert à diffuser des données vecteur

�WMTS: permet de diffuser des images en utilisant des tuiles prédéfinies

�Geocodage direct: à l’adresse, au nom de lieu ou à la parcelle cadastrale

�Geocodage inverse

08/01/2013Géoportail 39/56

08/01/2013Géoportail 40/56

� Le service WMTS (Web Map Tile Service) permet de diffuser des images en utilisant des tuiles prédéfinies..

Web Map Tile Service (WMTS)

Pyramide d’images précalculées

• Les tuiles du WMTS sont organisées sous forme d’une pyramide d’images de 256x256 pixels.

• Chaque niveau de pyramide correspond à un niveau d’échelle.

• Définition d’une projection unique

• 21 échelles prédéfinies pour le Géoportail (du monde à la rue)

• Une pyramide par couche de données

08/01/2013Géoportail 41/56

Contraintes de sécurité

�Chaque requête aux serveurs nécessite une clé d’accès représentée parune chaîne unique de 24 caractères alpha-numériques.

�Exemple de requêtehttp://gpp3-wxs.ign.fr/1711091050407331029/wmts?...

� Il existe deux types de clefs :

�Les clefs referer/IP/User-Agent

�Les clefs login/password

08/01/2013Géoportail 42/56

Affichage de données

Projection :

� Projection Web Mercator Sphérique

� Une projection pour tous les territoires

� Compatible avec les systèmes de référence de coordonnées suivants:

� WGS84

� RGF93 géographique

� ETRS89 géographique (INSPIRE)

� sinon il faut reprojeter…

08/01/2013Géoportail 43/56

Mise en oeuvre

08/01/2013Géoportail 44/56

Conditions d’utilisation

Offre gratuite� Pour des usages Web ne procurant aucun avantage économique

direct ou indirect ou avec une utilisation limitée� Pour un usage de type SIG dans le cadre d’une mission de service

public Offre commerciale

� Pour un site web commercial� Pour une application SIG privée ou mobile

08/01/2013Géoportail 45/56

La documentation

08/01/2013Géoportail 46/56

Tutoriels

Pages d’exemples

Documentation développeur

Forum

Le forum API

08/01/2013Géoportail 47/56

• Lancé en mai 2009

• Lieu d’échanges entre l’IGN et développeurs

• Aide à la résolution de problèmes

• Patch correctifs avant mise en production

Galerie d’exemples

08/01/2013Géoportail 48/56

Galerie d’exemples

08/01/2013Géoportail

�Site institutionnel

� http://www.inrap.fr/archeologie-preventive/Sites-archeologiques/

� L'Institut National de Recherches Archéologiques Préventives

49/56

Galerie d’exemples

08/01/2013Géoportail

�Site institutionnel

� http://public.geofoncier.fr/

� Portail GéoFoncier de l’Ordre des Géomètres-Experts

50/56

Galerie d’exemples

08/01/2013Géoportail

�Site institutionnel

� http://www.observatoire.savoie.equipement-agriculture.gouv.fr/

� Observatoire de Territoires de la Savoie

� Prévention des risques naturels

51/56

Galerie d’exemples

08/01/2013Géoportail

�Site de loisirs�http://www.utagawavtt.com�Randonnée VTT

�Partager son parcours à partir de sa trace GPS

52/56

Galerie d’exemples

08/01/2013Géoportail

�Site de loisirs

� http://vivlig.free.fr/

� anciennes cartes postales des communes du Haut-Lignon et du Haut-Vivarais

53/56

Pour conclure

08/01/2013Géoportail 54/56

L’API Géoportail c’est :

� Des accès natifs à des services reposants sur des standards

en géomatique tels que :

� WMS, WMTS…

� WFS, OpenLS …

� KML, GPX, OSM …

� Des composants intégrables dans une application :

� Navigation, Mesures, Recherches

� Des possibilités d’extension, d’adaptation

L’API Géoportail ce n’est pas :

� Une application figée, clef en main :

� C’est une Interface de Programmation d’Applications

� Un accès limité aux seuls flux du Géoportail :

� Google, Bing, Yahoo sont « insérables »

� Vos WMS, WFS, KML etc… aussi

� Un moyen pour l’IGN de récupérer vos données

� Ce n’est pas le cas de Google

� Une bibliothèque sans support