GML/SVG - Université de La Rochelle

Université de La Rochelle
LUP-SIG
2004-2005
Programmation SIG et Internet Cartographique
Web et présentation d’information spatiale
Formats GML et SVG
Jean-Michel FOLLIN
[email protected]
Échange de données
Échange d’informations entre différents SIG :
• Quel format de données?
• Quelle langage de requêtes?
• Quelles fonctionnalités?
• Quels paramètres et résultats?
Conversion/export A2B
Conversion/export B2A
SIG A
[traitement
local]
?
?
SIG B
[traitement
local]
SIG C
2
Interopérabilité des SIG
Reconnaissance des standards et formats communs :
• Format connu !
• Fonctionnalités connues !
• Paramètres et résultats connus !
Format
Format
commun
commun
dd ’échange
’échange
SIG A
[traitement local +
appels distants]
SIG B
[traitement local +
appels distants]
SIG C
3
Un monde "multilingue" de SIG
Web
Web Browser
Browser
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
Web
Web Browser
Browser
Web
Web Browser
Browser
X
X
Web
Web Browser
Browser
Web
Web Browser
Browser
X
X
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
X
Web
Web Browser
Browser
Web
Web Browser
Browser
X
X
Web
Web Browser
Browser
Web
Web Browser
Browser
X
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
GIS
DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA
TIGER Map Server
STAR Next Surf
MapGuide™
GeoMedia™ WebMap
NetGIS
GLOBE Visualization
Spatial Web Broker
ModelServer Imager
MapObjects IMS
TerraServer PARC Map Viewer
EnviroMapper GIS Viewer
OGDI
ELVIS
Orthophoto Browser
CARIS Internet Server
Mapquest Internet
MapXtreme™
4
OpenGIS
OGC (OpenGIS Consortium, 1994) – un consortium industriel qui
cherche à développer de manière consensuelle des spécifications
dans le domaine géographique
• représentation commune des phénomènes spatiaux
⇒ formats de données
• modèle commun pour l’accès, la gestion, la représentation et le
partage
⇒ fonctionnalités
Deux thèmes centraux :
• partager l’information géospatiale,
• fournir des services géospatiaux.
Deux types de spécification :
• spécification abstraite (création et documentation de modèles
conceptuels)
• spécification d’implémentation (spécification des plates-formes).
5
Spécifications OpenGIS (1)
Ensemble des spécifications abstraite :
Topic 1 – Feature Geometry
Topic 2 – Spatial Referencing by Coordinates
Topic 3 – Locational Geometry Structures
Topic 4 – Stored Functions and Interpolation
Topic 5 – The OpenGIS Feature
Topic 6 – The Coverage Type
Topic 7 – Earth Imagery
Topic 8 – Relationships Between Features
Topic 9 – Quality
Topic 10 – Feature Collections
Topic 11 – Metadata
Topic 12 – The OpenGIS Service Architecture
…
Topic 16 – Image Coordinate Transformation
Services
6
Spécifications OpenGIS (2)
Top ic 1
Feature
G eom etry
Topic 2 Spatial
R eferen ce
System s
Top ic 3
Location al
G eom etry
Top ic 10
Featu re
C ollection s
Topic 4 Stored
Functions and
Interp olation
Topic 6
Th e C overag e
T ype
Top ic 7
E arth Im agery
Top ic 5
Th e O pen
G IS F eatu re
Topic 8
R elations
B et’n Features
Topic 11
M etadata
Top ic 14
Sem antics and
Info C om ’t’s
Top ic 9
Q uality
Topic 12
The O p en G IS
Service A rch.
Top ic 13
C atalog
Services
Topic 15
Im age E xpl.
S ervices
Topic 16
Im ag e C oord .
T ransf S ervices
7
OpenGIS Feature
FEATURE : Unité de base de toute information
géographique.
⇒ entité abstraite ou concrète du monde réel.
Trois types d ’informations :
• localisation (où se trouve l’objet?)
• attributaire (que représente-t-il ?)
• relations topologiques (quelles relations entretient-il avec
les autres features?)
Exemple de FEATURE : un segment de route entre 2
intersections, une image satellite géoréférencée, une
rivière, ...
8
OpenGIS Modèle Géométrique
Geometry
Point
Curve
Surface
LineString
Polygon
SpatialReferenceSystem
GeometryCollection
1+ 2+
1+
MultiSurface
MultiCurve
MultiPoint
1+
1+
Line
LinearRing
MultiPolygon
MultiLineString
9
GML : Geography Markup Language
GML (v. 3.0, 2003)
• Concepts clés tirés des spécifications abstraites OGC
• Grammaire XML pour la modélisation, le transport et le
stockage d ’informations géographiques.
• Description des entités simples :
informations géographiques et descriptives (hôtels,
rues, …)
informations géométriques "simples" (points, lignes, …)
• Description uniquement du contenu des données, mais
pas de leur représentation
10
GML : un exemple (1)
City
CityModel
Model
name
name
boundedBy
boundedBy
cityMember
cityMember
Cambridge
gml:Box
gml:Box
gml:River
gml:River
gml:coord
gml:coord
XX
gml:coord
gml:coord
YY
description
description The river that ...
name
name
Cam
gml:centerLineOf
gml:centerLineOf
11
GML : un exemple (2)
<?xml
<?xml version="1.0"
version="1.0" encoding="UTF-8"?>
encoding="UTF-8"?>
<!-<!-- File:
File: cambridge.xml
cambridge.xml -->
-->
<CityModel
<CityModel xmlns="http://www.opengis.net/examples"
xmlns="http://www.opengis.net/examples" …
… >>
<gml:name>Cambridge</gml:name>
<gml:name>Cambridge</gml:name>
<gml:boundedBy>
<gml:boundedBy>
<gml:Box
<gml:Box srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
<gml:coord><gml:X>0.0</gml:X><gml:Y>0.0</gml:Y></gml:coord>
<gml:coord><gml:X>0.0</gml:X><gml:Y>0.0</gml:Y></gml:coord>
<gml:coord><gml:X>100.0</gml:X><gml:Y>100.0</gml:Y></gml:coord>
<gml:coord><gml:X>100.0</gml:X><gml:Y>100.0</gml:Y></gml:coord>
</gml:Box>
</gml:Box>
</gml:boundedBy>
</gml:boundedBy>
<cityMember>
<cityMember>
<River>
<River>
<gml:description>The
<gml:description>The river
river that
that runs
runs through
through Cambridge.</gml:description>
Cambridge.</gml:description>
<gml:name>Cam</gml:name>
<gml:name>Cam</gml:name>
<gml:centerLineOf>
<gml:centerLineOf>
<gml:LineString
<gml:LineString srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
<gml:coord><gml:X>0</gml:X><gml:Y>50</gml:Y></gml:coord>
<gml:coord><gml:X>0</gml:X><gml:Y>50</gml:Y></gml:coord>
<gml:coord><gml:X>70</gml:X><gml:Y>60</gml:Y></gml:coord>
<gml:coord><gml:X>70</gml:X><gml:Y>60</gml:Y></gml:coord>
<gml:coord><gml:X>100</gml:X><gml:Y>50</gml:Y></gml:coord>
<gml:coord><gml:X>100</gml:X><gml:Y>50</gml:Y></gml:coord>
</gml:LineString>
</gml:LineString>
</gml:centerLineOf>
</gml:centerLineOf>
</River>
</River>
</cityMember>
</cityMember>
…
…
12
SVG : Scalable Vector Graphics
SVG (v. 1.1, 2003) – un format pour la définition des
présentations vectorielles 2D sur le Web :
• format basé sur XML (spécification W3C)
• format texte (facilité de traitement et de manipulation)
• possibilité de recherche dans le contenu
• format vecteur 2D (qualité de la présentation, zoom)
• Intégration de données vectorielles, images et textuelles
• gestion dynamique des présentations (animations,
événements, scripts, …)
• standard ouvert
GML contenu → SVG visualisation
13
Document SVG
<?xml
<?xml version="1.0"
version="1.0" encoding="ISO-88591"
encoding="ISO-88591" standalone="no"?>
standalone="no"?>
<!DOCTYPE
<!DOCTYPE svg
svg PUBLIC
PUBLIC "-//W3C//DTD
"-//W3C//DTD SVG
SVG 20010904//EN
20010904//EN »»
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
<svg width="96px"
width="96px" height="76px"
height="76px" viewBox="0
viewBox="0 00 9600
9600 7600
7600 »»
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg">
<-<-- Le
Le contenu
contenu du
du document
document SVG
SVG -->
-->
</svg>
</svg>
Le contenu :
Déclaration
XML standard
Indication du
DTD
Racine SVG (+
taille, zone
visualisée,
spacename)
• transformation de coordonnées
• styles (couleurs, polices, traits des lignes, transparence, …)
• éléments géométriques (rectangles, ellipse, lignes, …)
• texte
• scripts, gestion d’événements (souris, clavier,…)
• liens vers d’autres documents (images rasteurs)
...
14
SVG : éléments géométriques
<circle
<circle cx="25"
cx="25" cy="25"
cy="25" r="20"
r="20" fill="red"/>
fill="red"/>
<ellipse
<ellipse cx="25"
cx="25" cy="25"
cy="25" rx="20"
rx="20" ry="10"
ry="10" fill="red"/>
fill="red"/>
<line
<line x1="5"
x1="5" y1="5"
y1="5" x2="45"
x2="45" y2="45"
y2="45" stroke="red"/>
stroke="red"/>
<path
<path d="M5,5
d="M5,5 C5,45
C5,45 45,45
45,45 45,5"
45,5" stroke="red"
stroke="red" fill="none"/>
fill="none"/>
<polygon
<polygon points="5,5
points="5,5 45,45
45,45 5,45
5,45 45,5"
45,5" stroke="red"
stroke="red" fill="none"/>
fill="none"/>
<polyline
<polyline points="5,5
points="5,5 45,45
45,45 5,45
5,45 45,5"
45,5" stroke="red"
stroke="red" fill="none"/>
fill="none"/>
Groupement des éléments :
<g
<g id="batiments">
id="batiments">
<path
<path d="M1983
d="M1983 1099l0
1099l0 00 22 ...>
...>
<path
<path d="M279
d="M279 982l0
982l0 00 55 66 ...>
...>
...
...
</g>
</g>
→ définitions des couches
15
Imbrication d'un fichier SVG dans HTML
Etat actuel : visualisation à l’aide de plugins (Corel SVG Viewer 2.1
Adobe SVG Viewer 3.01, …)
A moyen terme : insertion directe du code SVG dans du code XHTML
Inclus dans le document HTML
à l’aide de la balise <embed> :
Document
Document HTML
HTML
<EMBED
<EMBED WIDTH="450"
WIDTH="450"
HEIGHT="340"
HEIGHT="340"
SRC="tiger.svg"
SRC="tiger.svg"
NAME="svg_map"
NAME="svg_map"
TYPE="image/svg+xml">
TYPE="image/svg+xml">
SVG n’est pas un format uniquement pour la visualisation
des cartes !
16
SVG et script
Inclus dans le document HTML ou SVG à l’aide de la balise <script> :
Document
Document HTML
HTML
Document
Document SVG
SVG
<SCRIPT
<SCRIPT type="text/ecmascript">
type="text/ecmascript">
<![CDATA[
<![CDATA[
function
function animate_object()
animate_object()
{{
déclaration
déclaration variables,
variables, actions
actions
}}
]]>
]]>
</SCRIPT>
</SCRIPT>
Document
Document HTML
HTML
<SCRIPT
<SCRIPT type="text/javascript">
type="text/javascript">
function
function animate_object()
animate_object()
{{
déclaration
déclaration variables,
variables, actions
actions
}}
</SCRIPT>
</SCRIPT>
Document
Document SVG
SVG
⇒ Action sur une image SVG depuis le document HTML la contenant
⇒ Modification depuis un document SVG de son document parent HTML
⇒ Accès à une image SVG depuis une autre image SVG lorsque les deux sont incluses
dans un même document HTML
17
SVG vs Flash
SVG
⇒ Inconvénients
Pas (encore) aussi répandu que
Flash
⇒ Avantages
Format texte (lisible/ humains et
ordinateurs), standard W3C
Scripts : Javascript et
ECMAScript
Flash
⇒ Avantages
95% des clients ont un plug-in
Script : Actionscript
⇒ Inconvénients
Format binaire, propriétaire
(Macromédia)
Besoin de programmes speciaux
pour le développement
⇒ Intégration possible : interaction, animation, film et son
⇒ Taille des fichiers : difficulté pour dire lequel est le + léger
18
Editeurs SVG
Solutions payantes :
• EvolGrafiX Xstudio,
• Jasc Web Draw,
• Sketska (basé sur Batik), …
Solutions gratuites :
• Batik (développée par le « Apache XML Project »
et basée sur Java),
• Amaya (développée par le W3C),
• Sodipodi, …
Des convertisseurs :
• map2svg (MapInfo → SVG),
• shp2svg (ArcView → SVG),
• SVGMaker (Office → SVG),
• SVG Builder, …
19
Références
Ce document :
http://perso.univ-lr.fr/jmfollin/LupSIG/s3/cours/s3_coursGML-SVG.pdf
OpenGIS / GML :
http://www.opengis.org
http://www.opengis.org/docs/02-023r4.pdf (spécification GML)
W3C :
http://www.w3.org/TR/SVG/ (spécification SVG)
Tutorial SVG :
http://www.w3schools.com/svg/default.asp
http://www.kevlindev.com/tutorials/basics/index.htm
Ressources
http://www.carto.net/
http://wiki.svg.org/
Adobe :
http://www.adobe.com/svg/
MapInfo → SVG :
http://www.dbxgeomatics.com/SVGMapMaker.asp
http://www.gis-news.de/svg/map2svg.htm
20