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

Emmanuel Fritsch – 8 décembre 2009

Présentations similaires


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

1 Emmanuel Fritsch – 8 décembre 2009
Web Mapping Emmanuel Fritsch – 8 décembre 2009

2 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

3 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)

4 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

5 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

6 Architecture client-serveur
comment cela fonctionne et à quoi cela sert

7 { ?

8 Que trouve-t-on dans un serveur ?
= un programme = des fichiers de données = une base de données = +

9 Architecture client-serveur
+ truc.html + identifiant exp. serveur internet Apache truc.html affichage navigateur IE, Netscape, Firefox, etc.

10 Le client affichage navigateur

11 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

12 Le serveur c:\ wwwroot\ Program Files\ apache\ c:\ Program Files\
truc.html wwwroot\ truc.html machin\ Apache

13 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\

14 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\

15 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

16 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

17 Web Services Webservice navigateur affichage javascript PHP plug-in
MySQL javascript plug-in affichage Webservice navigateur

18 API Client 3 2 1 4 5 6 Page Dynamique Serveur de l’API Page dynamique
affichage

19 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

20 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

21 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)

22 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

23 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>

24 La carte comme image Usage : simplicité extrême sécurité totale
maîtrise du rendu Exemple : site de réservation touristique

25 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" >

26 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

27 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).

28 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>

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

30 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

31 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

32 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

33 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

34 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

35 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

36 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

37 MapServer Avant fichiers shape image (gif, jpeg)

38 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

39 MapServer services services fichiers image SGBD vecteur

40 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

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

42 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é

43 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

44 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

45 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

46 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

47 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

48 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é

49 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

50 Serveurs cartographiques
Deux modes de fonctionnement : soit la carte est générée à la volée soit la carte est stockée temporairement

51 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

52 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

53 MapServer Apache navigateur truc.php?x=12&y=45
truc.php affichage javascript $x=12 $y=45 PHP plug-in navigateur MySQL

54 MapServer Apache navigateur Mode cgi MapServer affichage MapScript PHP
javascript plug-in navigateur MySQL

55 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

56 questions ?

57

58 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=# 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>

59 Serveurs cartographiques
truc.svf?x=12&y=45 Apache truc.svf affichage javascript Module plug-in navigateur

60 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

61

62

63

64

65 typologie des web-mapping
image  image simplicité statique pas de programmation éditable en HTML bon rendu cartographique

66 pause questions ?

67 typologie des web-mapping
serveur client une image des vecteurs statique dynamique

68 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

69 typologie des web-mapping
type de solution avantage image  image simple vecteur  image sécurité compatibilité vecteur  vecteur compacité vitesse

70 FIN questions ?


Télécharger ppt "Emmanuel Fritsch – 8 décembre 2009"

Présentations similaires


Annonces Google