931 likes | 1.28k Views
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.
E N D
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 enmode raster ou maillé ou matriciel : un quadrillage régulier du terrain Image satellitale Document scanné valeur = radiométrie (intensité lumineuse)
PrimitivesExemple x le pointune 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 information géographique Les données enmode vecteur (ou vectoriel) Les primitives géométriques sont des objets élémentaires :
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 = +
serveur internet Apache Architecture client-serveur www.bidule.fr + truc.html + identifiant exp. www.bidule.fr/truc.html 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
c:\ Program Files\ apache\ wwwroot\ truc.html machin\ Le serveur c:\ Program Files\ apache\ truc.html wwwroot\ Apache
c:\Program Files\apache\wwwroot\machin\truc.html Le serveur c:\ Program Files\ www.bidule.fr /machin/truc.html apache\ truc.html wwwroot\ Apache truc.html machin\
c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.htm c:\Program Files\apache\wwwroot\machin\index.html c:\Program Files\apache\wwwroot\machin\index.htm c:\Program Files\apache\wwwroot\machin\index.php Le serveur www.bidule.fr /machin/ Apache truc.html machin\
truc.php?x=12&y=45 truc.php javascript plug-in Client et plug-in – serveur et modules Apache www.bidule.fr/truc.php?x=12&y=45 affichage $x=12 $y=45 PHP navigateur MySQL => Le web dynamique
www.ensg.ign.fr + truc.html + identifiant exp. 3- appelle l’image Un image dans une page 1- appelle le document www.bidule.fr/truc.html truc.html 2- lit le document : il y a une image dedans src="Guernesey.jpg" 4- reçoit l’image et l’insère dans la page
javascript PHP plug-in MySQL Web Services affichage Webservice navigateur
5 Page Dynamique API Client 3 2 Page dynamique 1 Serveur de l’API 4 6 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 <html> <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"> <inputtype="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"> • <inputtype="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?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
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. Les contrôles 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 image (gif, jpeg) fichiers shape
MapServer Après WMS WMS services services WFS WFS GPX image (gif, jpeg) fichiers shape png tab mdb tif SVG PostGIS vecteur SGBD GML Oraclespatial GeoJSON mySQL
MapServer services services image fichiers vecteur SGBD
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 vecteurimage • serveur cartographique • accès à une BD • chaque image est générée • compatibilité totale • souplesse
typologie des web-mapping vecteurvecteur • 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
Pourquoi ? un syndicat de professionnels des recommandations et des standards des logiciels labellisés de la veille et des évolutions Recommandations de l’OGC • spécifications abstraites • standards techniques • bonnes pratiques Une procédure de labellisation • change requests, • discussion papers • OGC Reference Model
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 Spécifications abstraites Géométrie Relations spatiales Gestion des droits Métadonnées etc. Recommandations de l’OGC
Web Map Service 3 requêtes : getCapabilities getMap getFeatureInfo Web Feature Services 3+2 requêtes : getCapabilities describeFeatureType getFeature lockFeature transaction WFS-T WMS et WFS
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 Langages porteurs
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é La standardisation en marche
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