Emmanuel Fritsch – 8 décembre 2009 Web Mapping Emmanuel Fritsch – 8 décembre 2009
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
information géographique 1) Les données en mode raster ou maillé ou matriciel : un quadrillage régulier du terrain Image satellitale Document scanné Document de référence: Des données localisées aux systèmes d ’information géographiques Conseils aux services - Septembre 1996 Commission de l ’information et de la bureautique CODATSI DPS valeur = radiométrie (intensité lumineuse)
information géographique Les données en mode vecteur (ou vectoriel) Les primitives géométriques sont des objets élémentaires : Primitives Exemple x le point une borne x---x le segment (peu utilisé) la ligne un axe de route la surface une commune x AB le texte un toponyme St-Mésis Document de référence: Des données localisées aux systèmes d ’information géographiques Conseils aux services - Septembre 1996 Commission de l ’information et de la bureautique CODATSI DPS
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
Architecture client-serveur comment cela fonctionne et à quoi cela sert
{ ?
Que trouve-t-on dans un serveur ? = un programme = des fichiers de données = une base de données = +
Architecture client-serveur www.bidule.fr + truc.html + identifiant exp. www.bidule.fr/truc.html serveur internet Apache truc.html affichage navigateur IE, Netscape, Firefox, etc.
Le client affichage navigateur
Le serveur La gestion des fichiers sur le serveur : Le client voit : truc.html L’administrateur voit : c:\Program Files\apache\wwwroot\truc.html Tout ce qui est en dehors de : c:\Program Files\apache\wwwroot est invisible pour le client
Le serveur c:\ wwwroot\ Program Files\ apache\ c:\ Program Files\ truc.html wwwroot\ truc.html machin\ Apache
Le serveur c:\ Program Files\ apache\ wwwroot\ Apache machin\ www.bidule.fr /machin/truc.html apache\ truc.html wwwroot\ Apache c:\Program Files\apache\wwwroot\machin\truc.html truc.html machin\
Le serveur Apache machin\ www.bidule.fr /machin/ c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.htm c:\Program Files\apache\wwwroot\machin\index.php c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.htm truc.html machin\
Client et plug-in – serveur et modules truc.php?x=12&y=45 Apache www.bidule.fr/truc.php?x=12&y=45 truc.php javascript plug-in affichage $x=12 $y=45 PHP navigateur MySQL => Le web dynamique
Un image dans une page 1- appelle le document 2- lit le document : www.ensg.ign.fr + truc.html + identifiant exp. 1- appelle le document www.bidule.fr/truc.html truc.html 2- lit le document : il y a une image dedans 3- appelle l’image src="Guernesey.jpg" 4- reçoit l’image et l’insère dans la page
Web Services Webservice navigateur affichage javascript PHP plug-in MySQL javascript plug-in affichage Webservice navigateur
API Client 3 2 1 4 5 6 Page Dynamique Serveur de l’API Page dynamique affichage
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
De l’image statique à la carte interactive Evolution du langage HTML : La balise <img> Les balises <map> et <area> La balise <input> Image statique Navigation entre pages statiques Web dynamique
Balise HTML – le principe <head> <title>titre du document </title> </head> <body> <H1>Titre de la page</H1> </body> </html> = balise ouvrant le fichier = balise ouvrant l’entête du doc. = ce qui apparaît sur la barre sup. = balise fermant l’entête = balise ouvrant le corps du doc. = titre de la page = fin du corps du document = fin du fichier html Principe : langage à base de balise (Hyper Text Mark-up Language)
Balise Les balises permettent d’inclure : du texte des formulaires avec bouton, menu, etc. des images des objets, utilisant des plug-in Les balises permettent d’inclure : du texte des formulaires avec bouton, menu, etc. des images des objets, utilisant des plug-in
La carte comme image Une image dans une page html : la balise <img> <body> <img src="Guernesey/Guernesey.jpg" width="312" height="283" border="0" /> </body> </html>
La carte comme image Usage : simplicité extrême sécurité totale maîtrise du rendu Exemple : site de réservation touristique
La carte cliquable : MAP et AREA La carte cliquable comporte des liens = déclare un groupe de liens = déclare une zone cliquable = coordonnées X1,Y1,X2,Y2, etc. = lien vers la page cible = message qui s’affiche sous la souris = déclare une image = l’image est liée à une map <map NAME="mapGuer"> <area SHAPE=POLY COORDS="86,215,89,217,92,220,93,223,90,222,87,221,86,222,86,217,86" HREF="Jersey.htm" TITLE="Jersey"> </map> <img src="Guernesey.jpg" width=312 height=283 usemap="#mapGuer" >
La carte avec zones cliquables Utilisation : Atlas / fiche région / lien vers des données sémantiques Lien avec javascript => Les balises <map> et <area> Peu pratique pour la navigation graphique http://www.atlasgeo.net/htmlg/Guernesey.htm
poster les coordonnées : INPUT <form method="get" name="MapImage" action="Map.asp"> <input type="image" border="0" name="XgoClickMap" align="center" src="../image.asp?XgoPageName=XMLOUT&XgoUserID=B5797364A8064D13&XgoNbReq=1&XgoAnswer=Gif&sizex=370&sizey=263&CODE=congre" title="Cliquez pour recentrer et zoomer" width="370" height="263" > </form> = déclare un formulaire = déclare une image cliquable = comment a été générée l’image (celle que l’on voit) Lorsqu’on clique sur la carte, - le formulaire est posté vers la page Map.asp - les coord. (x,y) du "clic" sont postées aussi - Map.asp génère une nouvelle image, à partir des coodonnées (x,y).
poster les coordonnées : INPUT <form method="get" name="MapImage" action="Map.asp"> <input type="image" border="0" name="XgoClickMap" align="center" src="../image.asp?XgoPageName=XMLOUT&XgoUserID=B5797364A8064D13&XgoNbReq=1&XgoAnswer=Gif&sizex=370&sizey=263&CODE=congre" title="Cliquez pour recentrer et zoomer" width="370" height="263" > </form>
http://maporama. com/share/Map. asp http://maporama.com/share/Map.asp?SESSIONID=%7B2D1955DA-409C-D &NavigateHeight=46 &NavigateWidth=46 &XgoClickMap.x=226 &XgoClickMap.y=168 &ClickMode=1
poster les coordonnées : INPUT La balise INPUT : la solution pour envoyer les coordonnées d’un clic du client vers le serveur base du serveur cartographique on peut mettre plusieurs cartes sur la même page ex : la carte détaillée + une carte de situation
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
client riche : Ajax, flash, API carto Le client riche prend en charge toutes les opérations de navigations Ces opérations de navigations sont prises en charge par des contrôles Les contrôles gèrent, en dehors de l’interface, les appels aux serveurs
Les contrôles Dans actions dans l’interface widgets clics souris raccourcis claviers + Firegesture ? + motion capture ? + nouvelles interfaces ? Zoom / dézoom / pan Recadrage Sélection Mise en relief Affichage / effacement Gestion de la transparence etc. Des interfaces intuitives et similaires
Définition du client Carto Interface qui gère l’affichage de la carte Les interactions avec l’utilisateur Les connexions avec les sources de données
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
Serveur cartographique - définition Une source de données (ou plusieurs) Et un traitement Pour : un transport par Internet et une visualisation sur écran Client lourd (Google Earth) Client léger = navigateur
MapServer Avant fichiers shape image (gif, jpeg)
MapServer Après services services fichiers shape image (gif, jpeg) WMS services WMS services WFS WFS GPX fichiers shape image (gif, jpeg) tab png mdb tif SVG PostGIS SGBD vecteur Oracle spatial GML GeoJSON mySQL
MapServer services services fichiers image SGBD vecteur
Web Mapping l’information géographique Client et serveur, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
typologie des web-mapping vecteur image serveur cartographique accès à une BD chaque image est générée compatibilité totale souplesse
typologie des web-mapping vecteur vecteur extraction d’une BD rapidité nécessite un plug-in problème de la protection des données légèreté
Quelle solution technique ? La carte statique ☺ Pour conserver la maîtrise de la carte de la mise en page Vecteur => vecteur ☺ Si je suis maître des données de leur volume de leur sécurité Vecteur => Image Dans tous les autres cas
Recommandations de l’OGC Pourquoi ? un syndicat de professionnels des recommandations et des standards des logiciels labellisés de la veille et des évolutions spécifications abstraites standards techniques bonnes pratiques Une procédure de labellisation change requests, discussion papers OGC Reference Model
Recommandations de l’OGC Spécifications abstraites Géométrie Relations spatiales Gestion des droits Métadonnées etc. Standards pour le web WMS : La carte raster WFS : Les objets vecteur SLD : La légende WCS : Les couvertures WPS : Les processus SPS : Les capteurs
WMS et WFS Web Map Service 3 requêtes : getCapabilities getMap getFeatureInfo Web Feature Services 3+2 requêtes : getCapabilities describeFeatureType getFeature lockFeature transaction WFS-T
Langages porteurs XML et ses dérivés (GML, KML, SVG) anciens et rodés standardisés outils répandus mais langage parsé sur le client JSON, GeoJSON (issu de javascript) récent (2 ans) expansion rapide facilité de lecture interprété sur le client
La standardisation en marche Premières utilisations Logiques de projet pour : Prototypage Maintenance Aujourd’hui Logique de service Logique de partage Mais fortes protections sur la sémantique => WMS le plus utilisé
Web Mapping l’information géographique Clients et serveurs, internet Image et internet Client cartographique Serveur cartographique Les flux de données Fonctionnement du serveur
Serveurs cartographiques Deux modes de fonctionnement : soit la carte est générée à la volée soit la carte est stockée temporairement
carte générée à la volée 1- appelle le document www.bidule.fr/truc.php truc.php 2- lit le document : il y a une carte dedans 3- appelle la carte 4- reçoit la carte et l’insère dans la page Serveur carto
carte stockée 1- appelle le document 3- lit le document : www.bidule.fr/truc.php truc.php 3- lit le document : il y a une carte dedans 4- appelle la carte PHP 5- reçoit l’image et l’insère dans la page MapScript 2- renvoie une page, + génère une carte stockée temporairement
MapServer Apache navigateur truc.php?x=12&y=45 www.bidule.fr/truc.php?x=12&y=45 truc.php affichage javascript $x=12 $y=45 PHP plug-in navigateur MySQL
MapServer Apache navigateur Mode cgi MapServer affichage MapScript PHP javascript plug-in navigateur MySQL
MapServer MapScript Carte stockée temporairement Souplesse Ressources externes Coûteux en temps mode cgi-bin Carte stockée (mode browse) ou carte à la volée (mode map) Gain de performance
questions ?
La carte dans un plug-in OBJECT + EMBED : double appel de l’objet PARAM : un paramètre que l’on passe à l’objet PLUGINSPAGE : la page qui permet de télécharger le plug-in si ce dernier n’est pas déjà installé. <OBJECT classid="clsid:D27B6E-AE6D-11cf" codebase="http://active.macromedia.com/swflash.cab#version=4,0,0,0" ID=map3a > <PARAM NAME=movie VALUE=""> <PARAM NAME=loop VALUE=false> . . . . . . <EMBED src="" loop=false quality=high devicefont=true bgcolor=#669966 WIDTH=100% HEIGHT=100% TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" vspace="0" hspace="0"> </EMBED> </OBJECT>
Serveurs cartographiques truc.svf?x=12&y=45 Apache www.bidule.fr/truc.svf?x=12&y=45 truc.svf affichage javascript Module plug-in navigateur
quelques noms Quelques solutions avec plug-in : Flash SVG AlovMap (java) MapGuide OpenLayers Les programmes dédiés : Google Earth World Wind Un téléchargement complet et lourd, contre la richesse des données
typologie des web-mapping image image simplicité statique pas de programmation éditable en HTML bon rendu cartographique
pause questions ?
typologie des web-mapping serveur client une image des vecteurs statique dynamique
typologie des web-mapping type de solution principe utilisation HTML image image image statique artisanale protection maximale IMG, MAP vecteur image gif, jpeg, etc. commande HTML/script Serveur SIG MapServer.. INPUT vecteur vecteur objet indépendant flash, SVG, MapGuide, java, etc. OBJECT, EMBED, APPLET
typologie des web-mapping type de solution avantage image image simple vecteur image sécurité compatibilité vecteur vecteur compacité vitesse
FIN questions ?