Emmanuel Fritsch – 8 décembre 2009

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

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
+ truc.html + identifiant exp. 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\
/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 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 :
+ truc.html + identifiant exp. 1- appelle le document 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

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

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=B A8064D13&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).

http://maporama. com/share/Map. asp
&NavigateHeight= &NavigateWidth= &XgoClickMap.x= &XgoClickMap.y= &ClickMode=1

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

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

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

typologie des web-mapping
vecteur  image serveur cartographique accès à une BD chaque image est générée compatibilité totale souplesse

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é

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 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 :
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
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=" ID=map3a > <PARAM NAME=movie VALUE=""> <PARAM NAME=loop VALUE=false> <EMBED src="" loop=false quality=high devicefont=true bgcolor=# WIDTH=100% HEIGHT=100% TYPE="application/x-shockwave-flash" PLUGINSPAGE=" vspace="0" hspace="0"> </EMBED> </OBJECT>

Serveurs cartographiques
truc.svf?x=12&y=45 Apache 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

image  image simplicité statique pas de programmation éditable en HTML bon rendu cartographique

pause questions ?

serveur client une image des vecteurs  statique  dynamique 

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

type de solution avantage image  image simple vecteur  image sécurité compatibilité vecteur  vecteur compacité vitesse

FIN questions ?

Emmanuel Fritsch – 8 décembre 2009

Présentations similaires

Présentation au sujet: "Emmanuel Fritsch – 8 décembre 2009"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Emmanuel Fritsch – 8 décembre 2009

Présentations similaires

Présentation au sujet: "Emmanuel Fritsch – 8 décembre 2009"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back