1 Web Mapping Emmanuel Fritsch – 8 décembre 2009

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








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

http://www.bidule.fr/

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

http://www.bidule.fr/machin/truc.html


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"

http://www.ensg.ign.fr/

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








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


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


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








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








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


2. Client et serveur, internet






41

typologie des web-mapping

vecteur image

• serveur cartographique• accès à une BD• chaque image est générée• compatibilité totale• souplesse

42


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








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


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


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


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

66

pause

questions ?

67


serveur client

une image une image

des vecteurs une image

des vecteurs des vecteurs

statique

dynamique

68


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


type de solution avantage

image image simple

vecteur image sécurité

compatibilité

vecteur vecteur compacité

vitesse

70

FIN

questions ?

Documents

1 Web Mapping Emmanuel Fritsch – 8 décembre 2009