Introduction à la cartographie Web open source

Introduction à la
cartographie Web open
source
Au-delà de Google Maps
Julien-Samuel Lacroix
Mapgears
jlacroix@mapgears.com
Géomatique 101
Navigation web
Côté serveur
Base de données
Géomatique 101
La géomatique en quelques mots
Discipline ayant pour objet la gestion des données
géographiques en faisant appel aux sciences et
technologies reliées à
● l'acquisition
● le stockage
● le traitement
● et la diffusion
... de données géographiques. (réf: OQLF)
La géomatique en 1000 mots
Acquisition
Diffusion
Stockage
Traitement
et analyse
Google Maps
●
●
●
Depuis 2005
La cartographie disponible pour tous
Néogéographe vs Paléogéographe
Les logiciels libres en géomatique
●
●
●
●
●
freegis.org
356 entrées
OSGeo
14 projets logiciels
+ 7 en cours d'incubation
La cartographie web
OpenLayers
MapFish
Fusion
Acquisition
(MapBuilder)
MapServer
GeoServer
MapGuide
Mapbender
deegree
geomajas
GeoNetwork
Stockage
PostGIS
GDAL/OGR
FDO
GEOS
GeoTools
MetaCRS
Diffusion
Traitement
GRASS
et analyse Quantum GIS
gvSIG
OSSIM
La cartographie web
Navigateur
Application
OpenLayers
Services
MapServer
Données
PostGIS
Côté serveur
OpenLayers
MapFish
Fusion
Acquisition
(MapBuilder)
MapServer
GeoServer
MapGuide
Mapbender
deegree
geomajas
GeoNetwork
Stockage
PostGIS
GDAL/OGR
FDO
GEOS
GeoTools
MetaCRS
Diffusion
Traitement
GRASS
et analyse Quantum GIS
gvSIG
OSSIM
MapServer
Permet de construire ses propres cartes avec ses propres
données géospatiales.
●
MapServer lit des données géoréférencées et retourne des
images standards dans le format désiré.
●
●
Implémente les normes OGC :
●WMS
●WFS
●SLD
●GML
●KML
MapServer
MapServer
Configuration
Configuration
Configuration
Polyvalence
●
●
●
Windows, Linux, Unix, Mac, etc
Format de fichier d'entrée multiple via GDAL/OGR
Standard OGC
Performance
Performance
Données?
Shapefile :
● roads.shp
● roads.shx
● roads.dbf
Fichiers statiques
Attributs stockés dans un fichier DBF
L'extension dbase de PHP est encore utile!!!
Base de données
OpenLayers
MapFish
Fusion
Acquisition
(MapBuilder)
MapServer
GeoServer
MapGuide
Mapbender
deegree
geomajas
GeoNetwork
Stockage
PostGIS
GDAL/OGR
FDO
GEOS
GeoTools
MetaCRS
Diffusion
Traitement
GRASS
et analyse Quantum GIS
gvSIG
OSSIM
PostGIS
Base de données relationelle
Ajout de nouveaux types “spatiaux”
Opérateurs et fonctions géographiques
- interrogation
- édition
- analyse
Aussi puissant qu'un SIG
PostGIS
Extension spatiale pour PostgreSQL
● Stockage, requête et manipulation d'objets spatiaux
directement dans la base de données
● Suit la spécification OGC Simple Features for SQL
● Base de données relationnelle...
●
Jonction de 2 tables
Table avec géométrie
Table avec géométrie et attributs
Jonction de 2 tables
Jonction de 2 tables
SELECT * FROM roads
LEFT JOIN roads_attr
ON roads.gid = roads_attr.gid;
PostGIS et MapServer
LAYER
CONNECTIONTYPE POSTGIS
CONNECTION "host=yourhost dbname=db user=you password=pass port=pgport"
DATA "the_geom FROM roads"
....
PostGIS et MapServer
LAYER
CONNECTIONTYPE POSTGIS
CONNECTION "host=yourhost dbname=db user=you password=pass port=pgport"
DATA "the_geom FROM (
SELECT *
FROM roads
LEFT JOIN roads_attr
ON roads.gid=roads_attr.gid
) as jointable”
.....
Fonctions spatiales
L'hôpital le plus proche?
SELECT
distance(hospitals.the_geom,roads.the_geom)
FROM hospitals, roads;
SELECT
road.gid,
road.street,
min(distance(hospitals.the_geom,r.the_geom)) as
min_distance
FROM roads,hospitals
GROUP BY road.gid, street;
CLASS
EXPRESSION ([dist] < 1000)
COLOR 0 255 0
END
CLASS
EXPRESSION ([dist] >= 1000 AND [dist] < 2000)
COLOR 255 255 0
END
CLASS
EXPRESSION ([dist] >= 2000 AND [dist] < 4000)
COLOR 192 192 0
END
CLASS
EXPRESSION ([dist] >= 4000)
COLOR 255 0 0
END
PostGIS
Il y a beaucoup de fonctions comme distance()
http://postgis.refractions.net/docs/reference.html
OpenLayers
http://openlayers.org/
●
●
●
●
●
●
Cartographie dynamique
API complet
Librairie JavaScript
Aucune dépendance à
un logiciel serveur
Licence de type BSD
Offre les
fonctionnalités
de base de navigation
À la base: JS
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
map.addLayer(layer);
}
Pour en faire plus
Sources de données
●
●
●
●
GYMO
KML
Fichier texte
WMS
var map = new OpenLayers.Map({
div: "map",
point
title
description icon
layers: [
10,20
my orange title
my orange description
new OpenLayers.Layer.WMS(
2,4
my aqua title
my aqua description
"WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
42,-71
my
purple
title
description<br/>is great
{layers: "basic"}
47.543,-78.222
title
description
),
46.789,-77.123
title2
description2
new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/lines.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepAth: 2
})
})
})
],
center: new OpenLayers.LonLat(-112.169, 36.099),
zoom: 11
});
Couches
ArcGIS93Rest
ArcIMS
Boxes
EventPane
FixedZoomLevels
GeoRSS
GML
Google
Grid
HTTPRequest
Image
KaMap
KaMapCache
MapGuide
MapServer
MapServer. Untiled
Markers
MultiMap
PointTrack
SphericalMercator
Text
TileCache
TMS
Vector
RootContainer
VirtualEarth
WFS
WMS
WMS. Untiled
WMS.Post
WorldWind
Yahoo
XYZ
Google/ v3.js
WMTS
Zoomify
Vecteurs
●
●
●
●
●
Points, lignes, polygones, textes
Formats multiples:
● GML
● GeoJSON
● KML
● Texte
● etc
CSS
Outils d'édition
Outils d'analyse
Architecture
Attributs
var aussie = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.LIKE,
property: "location",
value: "Australia"
}),
symbolizer: {
fillColor: "red"
}
});
Cluster
Control
ArgParser
Attribution
Button
DragFeature
DragPan
DrawFeature
EditingToolbar
GetFeature
Graticule
KeyboardDefaults
LayerSwitcher
Measure
ModifyFeature
MouseDefaults
MousePosition
MouseToolbar
Navigation
NavigationHistory
NavToolbar
OverviewMap
Pan
Panel
PanPanel
PanZoom
PanZoomBar
Permalink
Scale
ScaleLine
SelectFeature
SLDSelect
Snapping
Split
TransformFeature
WMSGetFeatureInfo
WMTSGetFeatureInfo
ZoomBox
ZoomIn
ZoomOut
ZoomPanel
ZoomToMaxExtent
Édition
●
●
●
●
●
Disponible pour tous les types de géométrie
Différents protocoles de sauvegarde :
HTTP
WFS
SQL
Control
ArgParser
Attribution
Button
DragFeature
DragPan
DrawFeature
EditingToolbar
GetFeature
Graticule
KeyboardDefaults
LayerSwitcher
Measure
ModifyFeature
MouseDefaults
MousePosition
MouseToolbar
Navigation
NavigationHistory
NavToolbar
OverviewMap
Pan
Panel
PanPanel
PanZoom
PanZoomBar
Permalink
Scale
ScaleLine
SelectFeature
SLDSelect
Snapping
Split
TransformFeature
WMSGetFeatureInfo
WMTSGetFeatureInfo
ZoomBox
ZoomIn
ZoomOut
ZoomPanel
ZoomToMaxExtent
Documentation
Documentation de l'API
Listes de discussion très actives (Users, Dev)
- Plusieurs centaines de messages par mois sur 2 listes
Exemples!
Exemples OpenLayers
Accessible
OpenLayers Document Drag
GML Parser
All Overlays with Google and OSM
Double Set Center
Google with Overlay
OpenLayers Overlays Only
Drag Feature
Google (v3) allOverlays Layer
map.panTo
OpenLayers Draw Feature
Google (v3) Layer
ArcGIS Server 9.3 Rest API
Dynamic POIs via a Text Layer
Google Layer
ArcIMS Thematic
Editing Toolbar
Named Graphics
ArcIMS
Event Handling
Graticule
Attribution
OpenLayers
Gutter
Base Layers
Filter Strategy
OpenLayers Select and Highlight Feature
Vector Behavior (Fixed/HTTP/GML)
Filter Encoding
Hover Handler
Bing
Fractional Zoom
Image Layer
Boxes
Full Screen
OpenLayers Geometry Intersection
Showing Browser Name
GeoJSON
KaMap
Buffer
GeoRSS from Flickr in OpenLayers
KML Layer
Canvas Renderer
GeoRSS Marker
Parsing gx:Track in KML
Click Handler
GeoRSS
KML Parser
Click Event
WFS GetFeature (GeoServer)
Late Rendering
Map Controls
Feature Info
Layer Opacity
Custom Control
Feature Info in Popup
Layer Load Monitoring
Custom Style
Feature Info
Layer Switcher
Debug
GML Layer
Basic Single WMS
Paging Strategy
Rule Based Style
StyleMap
Feature Styles
Exemples OpenLayers
MapGuide Layer
Advanced OSM Layer
Snapping
MapServer Layer
Basic OSM
SOS client
MapServer Single Tile Mode
Overview Map
OpenLayers Spherical Mercator
Resize a Marker
Pan and Zoom Panels
OpenLayers Split Feature
Markers Layer
Custom Control.Panel
BBOX Strategy
Using a Layer.Text to display markers
GeoRSS PointTrack in OpenLayers
Cluster Strategy Threshold
OpenLayers Measure
Popup Matrix
Cluster Strategy
MultiMap
Popup Mayhem
Paging Strategy
OpenLayers Modify Feature
Layer Projections
Rule Based Style
MousePosition Control
Gears Protocol
StyleMap
OpenLayers Mousewheel Interval
OpenLayers Regular Polygon
Feature Styles
MultiMap Mercator
Resize Features Programatically
Rotation Style
Multiple Server URLS
OpenLayers Restricted Extent
Unique Value Styles
Navigation Control
Rotate vector features
OSM + Google Maps + KML Reprojection
Map Navigation History
Open Popup on Layer.Vector
KML Layer
A navToolbar with an alwaysZoom ZoomBox
OpenLayers Select Feature
OpenLayers
Navigation Toolbar: Outside the Map
Setting a Visual Extent
Map "Teleportation" and Rendering
NavToolbar Demo
SLD Parser
TileCache
Untiled
Styled Layer Descriptor (SLD)
Tiled Map Service
Z-Index/Y-Order
SLD based selection on WMS layers
Vector Feature Transformation Box
OSM and Google Togethe
Snapping & Splitting
Transition
WorldWind layers
Snapping
WorldWind
Wrapping the Date Line
SOS client
Virtual Earth
XHTML
OpenLayers Spherical Mercator
Virtual Earth
XML Format
OpenLayers Split Feature
OpenLayers Labeled features
Basic ESRI Map Cache
BBOX Strategy
Drawing Simple Vector Features
Yahoo Base Layer
Cluster Strategy Threshold
Vector Formats
Zoomify Layer
Cluster Strategy
OpenLayers Spherical Mercator
Zoom Level
Rotation Style
Unique Value Styles
OSM + Google Maps + KML Reprojection
KML Layer
Map "Teleportation" and Rendering
TileCache
Tiled Map Service
Vector Feature Transformation Box
Transition
WorldWind
XYZ Layer with Offset
Virtual Earth
OpenLayers Labeled features
Drawing Simple Vector Features
Vector Formats
OpenLayers Spherical Mercator
WFS Protocol and Filter
WFS Transaction
Vector Behavior
WFS Reprojection
Snap/Split and Persist via WFS
WFS United States (GeoServer)
WMC
WMS Untiled
WMS version 1.3 (axis order)
WMS
WMSDescribeLayer Parser
Basic WMS via HTTP-POST protocol with a large SLD included
WMS Time
Web Map Tile Service (WMTS) Capabilities Parsing
WMTS GetFeatureInfo Control
Web Map Tile Service (WMTS) Layer
OpenLayers +
+
=
Interface usager riche
Toolbars
Window
AJAX
Menu
Tree
Tab
Combo
Grid
Layout
Panel
Concept
Absence de la composante géospatiale dans ExtJS
● Absence des concepts pour les applications riches dans
OpenLayers
● Présence de la carte dans un panel ExtJS
● Encapsulement des objets d'OpenLayers dans des
composantes data d'ExtJS
●
MapPanel
new Ext.Window({
title: "GeoExt in Action",
height: 280, width: 450, layout: "fit",
items: [{
xtype: "gx_mappanel",
Layers: [
new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
)
],
zoom: 1
}]
}).show();
MapPanel
Exemples GeoExt
Attribute Form
Attribute Store & Reader
Grid with Features
Layer Tree
Layer Opacity Slider
Legend Panel
Map Panel
Map Panel (in a Viewport)
Map Panel (in a Window)
Permalink
Feature Popup
Modifying Popups
Interactive Print Extent
Print Your Map
Print Preview Window
Feature Renderer
Filter Form Panel
Toolbar with Actions
Tree Nodes
Tree Legend
Vector Legend
WMS Capabilities Store
WMS Capabilities Tree
Scale Chooser
Zoom Slider
Questions?
Julien-Samuel Lacroix
Mapgears
jlacroix@mapgears.com