1 / 11 ensg, 7 mars 2012 développer avec lapi géoportail web 2d en javascript développer avec...
TRANSCRIPT
1 / 11 ENSG, 7 mars 2012
Développer avec l’API Géoportail Web 2D en JavaScript
Développer avec l’API Géoportail Web 2D en JavaScript
FORMATION API GEOPORTAILFORMATION API GEOPORTAIL
2 / 11
Forum API sur developpez.com
Documentation en ligne JsDoc
Exemples
Téléchargements
Codes sources
Doc API en PDF
Documentation disponible : API.IGN.FRDocumentation disponible : API.IGN.FR
3 / 11
ZazouMiniWebServer (ZWMS) PHP, Apache, MySQL
Installer ZWMS
Copier le dossier : « TP_API » dans le dossier « _web.zmwsc »
Double cliquer sur le fichier '_start_all.bat' pour démarrer le serveur
Firefox / Firebug
Notepad++
Environnement de DéveloppementEnvironnement de Développement
4 / 11
Objectifs :
Afficher sa première fenêtre carto Analyser le code source
Étapes :
Se rendre sur le site http://api.ign.fr Créer un compte Créer un contrat Copier / coller le code source généré dans le fichier tp.html Afficher la première page dans votre navigateur Web
http://localhost/tp_api/tp.html
Premiers pas avec l’API Géoportail JavascriptPremiers pas avec l’API Géoportail Javascript
5 / 11
Premier pas avec l’API Géoportail JavascriptPremier pas avec l’API Géoportail Javascript
Analyse
<meta> : pour la définition de la langue, de l’encodage…
<<style> : définition des CSS
<script> : contient l’import de l’API Géoportail
- Appel du loader
cf documentation du Geoportal.load()
6 / 11
Personnaliser la cartePersonnaliser la carte
Objectifs : Modifier les paramètres par défaut Identifier les composants du viewer Changer le style par défaut du viewer
Étapes : - Modifier le type de visualiseur
option viewerClass du loader
- Afficher seulement la carte et les limites administratives option layers du loader
- Rendre toutes les couches visibles au chargement de la page et mettre l’opacité de la couche administrative à 1.0
option layerOptions du loader
- Recentrer la carte sur Marseille, au zoom 9
argument lon, lat et zoom du loader
- Modifier la couleur du Panneau de Zoom et la couleur du bord du viewer
Avec Firebug repérer les noms des différents composants de l’API, et modifier leurs propriétés CSS.
7 / 11
Personnaliser le ViewerPersonnaliser le Viewer
La gestion des styles : 1- Repérer les classes de styles à modifier (Firebug)
2- Modifier les propriétés CSS dans la balise <style>
gpToolBoxClassgpLayersClass
gpControlNavToolbar
gpSelectProjections
gpControlMousePosition
gpControlInformation
gpLong gpLat
8 / 11
Ajouter des couches de données localesAjouter des couches de données locales
Objectifs :
Importer des données métiers locales
Manipuler des couches KML, GPX
Étapes :
LLe code qui suit est à ajouter au sein de la méthode init() associée à l'évènement 'onView' du loader:
- Ajouter la couche KML (monumentmarseille.kml)
utiliser la méthode Geoportal.Map.addLayer
- Ajouter la couche GPX (cassisrando.gpx)
- Modifier le style de la couche GPX ajouter le paramètre styleMap aux options de la couche GPX
- Changer le comportement sur la couche GPX : quand on clique sur le parcours, une popup s'ouvre et indique la distance.
option onSelect, onUnselect des options de la couche GPX
9 / 11
Ajouter des données provenant d’un serveur Ajouter des données provenant d’un serveur distantdistant
Objectifs :
Importer des données à partir d’un serveur distant Manipuler des couches WMS, WFS
Étapes :
- Ajouter la couche WMS «Cours d’eau» du sandre : url : http://services.sandre.eaufrance.fr/geo/zonage-shp?
couche : RWBODY
- Ajouter la couche «Cours d’eau» WFS du sandre :url : http://services.sandre.eaufrance.fr/geotest/mdo_metropole?
couche : 'MasseDEauRiviere'
projection: 'EPSG:2154‘
NB: l’appel à une couche vectorielle provenant d’un serveur distant nécessite
l’utilisation d’un proxy! (Paramètre proxyUrl du loader) L'utilisation du wfs nécessite de passer en version étendue de l'api
10 / 11
Ajouter des données provenant d’un serveur Ajouter des données provenant d’un serveur distantdistant
Analyse :
Cross-domain & Proxy
Proxy
11 / 11
Ajouter des outilsAjouter des outils
Objectifs :
Maîtriser les outils fournis par l’API
Intégrer ses propres outils
Étapes :
- Ajouter les outils de mesure en grâce au contrôle MeasureToolbar
- Ajouter un bouton extérieur à la visualisation permettant de se recentrer sur Paris au zoom 12.
ajouter une bouton html dans la page
utiliser la méthode setCenter sur la Map.