Introduction à la cartographie Web open

source

Au-delà de Google Maps

Julien-Samuel LacroixMapgears

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 motsAcquisition

StockageTraitement et analyse

Diffusion

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 webAcquisition

StockageTraitement et analyse

Diffusion

GRASSQuantum GIS

gvSIGOSSIM

PostGISGDAL/OGR

FDOGEOS

GeoToolsMetaCRS

MapServerGeoServerMapGuideMapbender

deegreegeomajas

GeoNetwork

OpenLayersMapFishFusion

(MapBuilder)

La cartographie webNavigateur

Application

OpenLayersOpenLayers

Services

MapServerMapServer

Données

PostGISPostGIS

Côté serveurAcquisition

StockageTraitement et analyse

Diffusion

GRASSQuantum GIS

gvSIGOSSIM

PostGISGDAL/OGR

FDOGEOS

GeoToolsMetaCRS

MapServerGeoServerMapGuideMapbender

deegreegeomajas

GeoNetwork

OpenLayersMapFishFusion

(MapBuilder)

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 statiquesAttributs stockés dans un fichier DBF

L'extension dbase de PHP est encore utile!!!

Base de donnéesAcquisition

StockageTraitement et analyse

Diffusion

GRASSQuantum GIS

gvSIGOSSIM

PostGISGDAL/OGR

FDOGEOS

GeoToolsMetaCRS

MapServerGeoServerMapGuideMapbender

deegreegeomajas

GeoNetwork

OpenLayersMapFishFusion

(MapBuilder)

PostGIS

Base de données relationelleAjout 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 tablesTable 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 MapServerLAYER

CONNECTIONTYPE POSTGIS

CONNECTION "host=yourhost dbname=db user=you password=pass port=pgport"

DATA "the_geom FROM roads"

....

PostGIS et MapServerLAYER

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,hospitalsGROUP 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", layers: [ new OpenLayers.Layer.WMS( "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: "basic"} ), 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});

point title description icon10,20 my orange title my orange description2,4 my aqua title my aqua description42,-71 my purple title description<br/>is great47.543,-78.222 title description46.789,-77.123 title2 description2

CouchesArcGIS93RestArcIMSBoxesEventPaneFixedZoomLevelsGeoRSSGMLGoogleGridHTTPRequestImageKaMap

KaMapCacheMapGuideMapServerMapServer. UntiledMarkersMultiMapPointTrackSphericalMercatorTextTileCacheTMSVector

RootContainerVirtualEarthWFSWMSWMS. UntiledWMS.PostWorldWindYahooXYZGoogle/ v3.jsWMTSZoomify

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

ControlArgParser

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

ControlArgParser

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'APIListes de discussion très actives (Users, Dev) - Plusieurs centaines de messages par mois sur 2 listesExemples!

Exemples OpenLayersAccessible

All Overlays with Google and OSM

OpenLayers Overlays Only

map.panTo

ArcGIS Server 9.3 Rest API

ArcIMS Thematic

ArcIMS

Attribution

Base Layers

Vector Behavior (Fixed/HTTP/GML)

Bing

Boxes

Showing Browser Name

Buffer

Canvas Renderer

Click Handler

Click Event

Map Controls

Custom Control

Custom Style

Debug

OpenLayers Document Drag

Double Set Center

Drag Feature

OpenLayers Draw Feature

Dynamic POIs via a Text Layer

Editing Toolbar

Event Handling

OpenLayers

Filter Strategy

Filter Encoding

Fractional Zoom

Full Screen

GeoJSON

GeoRSS from Flickr in OpenLayers

GeoRSS Marker

GeoRSS

WFS GetFeature (GeoServer)

Feature Info

Feature Info in Popup

Feature Info

GML Layer

GML Parser

Google with Overlay

Google (v3) allOverlays Layer

Google (v3) Layer

Google Layer

Named Graphics

Graticule

Gutter

OpenLayers Select and Highlight Feature

Hover Handler

Image Layer

OpenLayers Geometry Intersection

KaMap

KML Layer

Parsing gx:Track in KML

KML Parser

Late Rendering

Layer Opacity

Layer Load Monitoring

Layer Switcher

Basic Single WMS

Exemples OpenLayersMapGuide Layer

MapServer Layer

MapServer Single Tile Mode

Resize a Marker

Markers Layer

Using a Layer.Text to display markers

OpenLayers Measure

MultiMap

OpenLayers Modify Feature

MousePosition Control

OpenLayers Mousewheel Interval

MultiMap Mercator

Multiple Server URLS

Navigation Control

Map Navigation History

A navToolbar with an alwaysZoom ZoomBox

Navigation Toolbar: Outside the Map

NavToolbar Demo

Untiled

Z-Index/Y-Order

OSM and Google Togethe

WorldWind layers

Wrapping the Date Line

XHTML

XML Format

Basic ESRI Map Cache

Yahoo Base Layer

Zoomify Layer

Zoom Level

Snapping

SOS client

OpenLayers Spherical Mercator

OpenLayers Split Feature

BBOX Strategy

Cluster Strategy Threshold

Cluster Strategy

Paging Strategy

Rule Based Style

StyleMap

Feature Styles

Rotation Style

Unique Value Styles

OSM + Google Maps + KML Reprojection

KML Layer

OpenLayers

Map "Teleportation" and Rendering

TileCache

Tiled Map Service

Vector Feature Transformation Box

Transition

WorldWind

Virtual Earth

Virtual Earth

OpenLayers Labeled features

Drawing Simple Vector Features

Vector Formats

OpenLayers Spherical Mercator

Advanced OSM Layer

Basic OSM

Overview Map

Pan and Zoom Panels

Custom Control.Panel

GeoRSS PointTrack in OpenLayers

Popup Matrix

Popup Mayhem

Layer Projections

Gears Protocol

OpenLayers Regular Polygon

Resize Features Programatically

OpenLayers Restricted Extent

Rotate vector features

Open Popup on Layer.Vector

OpenLayers Select Feature

Setting a Visual Extent

SLD Parser

Styled Layer Descriptor (SLD)

SLD based selection on WMS layers

Snapping & Splitting

Snapping

SOS client

OpenLayers Spherical Mercator

OpenLayers Split Feature

BBOX Strategy

Cluster Strategy Threshold

Cluster Strategy

Paging Strategy

Rule Based Style

StyleMap

Feature Styles

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

Tab

Combo

Menu

Window

Panel

Tree

Layout

Toolbars

AJAX

Grid

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

MapPanelnew 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 FormAttribute Store & ReaderGrid with FeaturesLayer TreeLayer Opacity SliderLegend PanelMap PanelMap Panel (in a Viewport)Map Panel (in a Window)PermalinkFeature Popup

Modifying PopupsInteractive Print ExtentPrint Your MapPrint Preview WindowFeature RendererFilter Form PanelToolbar with ActionsTree NodesTree LegendVector LegendWMS Capabilities StoreWMS Capabilities TreeScale ChooserZoom Slider

Questions?

Julien-Samuel LacroixMapgears

jlacroix@mapgears.com