Post on 03-Apr-2015
1
Web Mapping
Emmanuel Fritsch – 8 décembre 2009
2
Web Mapping
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. Fonctionnement du serveur
3
1) Les données en mode raster ou maillé ou matriciel : un quadrillage régulier du terrain
Image satellitalePixel
n° colonne
n° ligne
Document scanné
information géographique
valeur = radiométrie (intensité lumineuse)
4
Les données en mode vecteur (ou vectoriel)
Les primitives géométriques sont des objets élémentaires :
Primitives Exemple
x le point une bornex---x le segment (peu utilisé)
la ligne un axe de route
la surface une commune
x AB le texte un toponyme
xx
x
x
xx
x
x
x
St-Mésis
information géographique
5
Web Mapping
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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
= une base de données
= des fichiers de données
= +
9
www.bidule.fr + truc.html+ identifiant exp.
serveur internet
Apache
Architecture client-serveur
www.bidule.fr/truc.html
navigateur
IE, Netscape, Firefox, etc.
affichage
truc.html
10
Le client
navigateur
affichage
11
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
12
Apache
truc.html
truc.html
machin\
c:\
wwwroot\
Program Files\
apache\
c:\
wwwroot\
Program Files\
apache\
Le serveur
13
Apache
truc.html
c:\
wwwroot\
Program Files\
apache\
www.bidule.fr/machin/truc.html
truc.html
machin\c:\Program Files\apache\wwwroot\machin\truc.html
Le serveur
14
Apache
www.bidule.fr/machin/
truc.html
machin\ c:\Program Files\apache\wwwroot\machin\index.htmlc:\Program Files\apache\wwwroot\machin\index.htmlc:\Program Files\apache\wwwroot\machin\index.htmc:\Program Files\apache\wwwroot\machin\index.htmlc:\Program Files\apache\wwwroot\machin\index.htmc:\Program Files\apache\wwwroot\machin\index.php
Le serveur
15
Apache
Client et plug-in – serveur et modules
truc.php?x=12&y=45
www.bidule.fr/truc.php?x=12&y=45
javascript
navigateur
affichage
plug-inPHP
MySQL
truc.php
$x=12$y=45
=> Le web dynamique
16
Un image dans une page
www.bidule.fr/truc.html truc.html
2- lit le document : il y a une image dedans
3- appelle l’image
4- reçoit l’image et l’insère dans la page
www.ensg.ign.fr + truc.html+ identifiant exp.
1- appelle le document
src="Guernesey.jpg"
17
Web Services
javascript
navigateur
affichage
plug-inPHP
MySQL
Webservice
18
affichage
1
3 2
54
Page dynamique
Serveur de l’API
Page Dynamique
6
API Client
19
Web Mapping
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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>
Web dynamique
Navigation entre pages statiques
Image statique
21
Principe :
langage à base de balise(Hyper Text Mark-up Language)
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
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
Usage : • simplicité extrême• sécurité totale• maîtrise du rendu
La carte comme image
Exemple : site de réservation touristique
25
La carte cliquable : MAP et AREA
La carte cliquable comporte des liens<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" >
= 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
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
http://www.atlasgeo.net/htmlg/Guernesey.htm
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=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).
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=B5797364A8064D13&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?SESSIONID=%7B2D1955DA-409C-D &NavigateHeight=46 &NavigateWidth=46 &XgoClickMap.x=226 &XgoClickMap.y=168 &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
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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
fichiers shape image (gif, jpeg)
Avant
38
MapServer
fichiers shape image (gif, jpeg)tab
WMS
WFS
PostGIS
Oracle spatial
mdb
GPX
mySQL
services
SGBD
tif
WMS
WFS
Après
services
vecteurGML
GeoJSON
SVG
png
39
MapServer
fichiers image
services
SGBD
services
vecteur
40
Web Mapping
1. l’information géographique
2. Client et serveur, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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
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.
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
1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. 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
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
1- appelle le document
Serveur carto
52
carte stockée
www.bidule.fr/truc.php truc.php
3- lit le document : il y a une carte dedans
4- appelle la carte
5- reçoit l’image et l’insère dans la page
1- appelle le document
PHP
MapScript2- renvoie une page, + génère une carte stockée temporairement
53
truc.php?x=12&y=45
Apache
MapServer
www.bidule.fr/truc.php?x=12&y=45
navigateur
affichage
truc.php
javascript
plug-inPHP
MySQL
$x=12$y=45
54
Apache
MapServer
navigateur
affichagejavascript
plug-in
MySQL
MapScript
PHP
MapServer
Mode cgi
55
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
MapServer
56
questions ?
57
58
La carte dans un plug-in
<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>
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é.
59
truc.svf?x=12&y=45
Apache
Serveurs cartographiques
www.bidule.fr/truc.svf?x=12&y=45
navigateur
affichage
truc.svf
javascript
plug-inModule
60
quelques noms
• Quelques solutions avec plug-in : – Flash– SVG– AlovMap (java)– MapGuide – OpenLayers
• Les programmes dédiés : – Google Earth– World WindUn téléchargement complet et lourd,
contre la richesse des données
61
62
63
64
65
image image
typologie des web-mapping
• simplicité• statique • pas de programmation• éditable en HTML• bon rendu cartographique
66
pause
questions ?
67
typologie des web-mapping
serveur client
une image une image
des vecteurs une image
des vecteurs 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 ?