La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 / 11 ENSG, 7 mars 2012 Développer avec lAPI Géoportail Web 2D en JavaScript Développer avec lAPI Géoportail Web 2D en JavaScript FORMATION API GEOPORTAIL.

Présentations similaires


Présentation au sujet: "1 / 11 ENSG, 7 mars 2012 Développer avec lAPI Géoportail Web 2D en JavaScript Développer avec lAPI Géoportail Web 2D en JavaScript FORMATION API GEOPORTAIL."— Transcription de la présentation:

1 1 / 11 ENSG, 7 mars 2012 Développer avec lAPI Géoportail Web 2D en JavaScript Développer avec lAPI Géoportail Web 2D en JavaScript FORMATION API GEOPORTAIL

2 2 / 11 Forum API sur developpez.comdeveloppez.com Documentation en ligne JsDoc Exemples Téléchargements Codes sources Doc API en PDF Documentation disponible : API.IGN.FR

3 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éveloppement

4 4 / 11 Objectifs : Afficher sa première fenêtre carto Analyser le code source Étapes : Se rendre sur le site 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 Premiers pas avec lAPI Géoportail Javascript

5 5 / 11 Premier pas avec lAPI Géoportail Javascript Analyse : pour la définition de la langue, de lencodage… : définition des CSS : contient limport de lAPI Géoportail - Appel du loader cf documentation du Geoportal.load()documentation

6 6 / 11 Personnaliser 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 lopacité 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 lAPI, et modifier leurs propriétés CSS.

7 7 / 11 Personnaliser 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 gpToolBoxClass gpLayersClass gpControlNavToolbar gpSelectProjections gpControlMousePosition gpControlInformation gpLonggpLat

8 8 / 11 Ajouter des couches de données locales Objectifs : Importer des données métiers locales Manipuler des couches KML, GPX Étapes : L Le 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.addLayerGeoportal.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 GPXstyleMap - 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 9 / 11 Ajouter des données provenant dun serveur distant Objectifs : Importer des données à partir dun serveur distant Manipuler des couches WMS, WFS Étapes : - Ajouter la couche WMS «Cours deau» du sandre : url : couche : RWBODY - Ajouter la couche «Cours deau» WFS du sandre : url : couche : 'MasseDEauRiviere' projection : 'EPSG:2154 NB: lappel à une couche vectorielle provenant dun serveur distant nécessite lutilisation dun proxy! (Paramètre proxyUrl du loader) L'utilisation du wfs nécessite de passer en version étendue de l'api

10 10 / 11 Ajouter des données provenant dun serveur distant Analyse : Cross-domain & Proxy Proxy

11 11 / 11 Ajouter des outils Objectifs : Maîtriser les outils fournis par lAPI Intégrer ses propres outils Étapes : - Ajouter les outils de mesure en grâce au contrôle MeasureToolbar 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.setCenter


Télécharger ppt "1 / 11 ENSG, 7 mars 2012 Développer avec lAPI Géoportail Web 2D en JavaScript Développer avec lAPI Géoportail Web 2D en JavaScript FORMATION API GEOPORTAIL."

Présentations similaires


Annonces Google