Introduction À La Cartographie Web Open Source Au-Delà De Google Maps

Introduction à la cartographie Web open source Au-delà de Google Maps

Julien-Samuel Lacroix Mapgears [email protected]

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

OpenLayers La cartographie web MapFish Fusion Acquisition (MapBuilder)

MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork

Stockage Traitement GRASS et analyse PostGIS Quantum GIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS

La cartographie web

Navigateur

Application

OpenLayers

Services

MapServer

Données

PostGIS

OpenLayers Côté serveur MapFish Fusion Acquisition (MapBuilder)

MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork

Stockage Traitement GRASS et analyse PostGIS Quantum GIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS

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

Configuration

Polyvalence

● Windows, Linux, Unix, Mac, etc ● Format de fichier d'entrée multiple via GDAL/OGR ● Standard OGC

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

OpenLayers Base de données MapFish Fusion Acquisition (MapBuilder)

MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork

Stockage Traitement GRASS et analyse PostGIS Quantum GIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS

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

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 var map = new OpenLayers.Map({ div: "map", ● GYMO layers: [ point title description icon new OpenLayers.Layer.WMS(10,20 my orange title my orange description ● KML "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",2,4 my aqua title my aqua description {layers: "basic"}42,-71 my purple title description
is great ● Fichier texte ), 47.543,-78.222 title description new OpenLayers.Layer.Vector("KML",46.789,-77.123 title2{ description2 ● WMS 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 KaMapCache RootContainer ArcIMS MapGuide VirtualEarth Boxes MapServer WFS EventPane MapServer. Untiled WMS FixedZoomLevels Markers WMS. Untiled GeoRSS MultiMap WMS.Post GML PointTrack WorldWind Google SphericalMercator Yahoo Grid Text XYZ HTTPRequest TileCache Google/ v3.js Image TMS WMTS KaMap Vector 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 MousePosition SelectFeature Attribution MouseToolbar SLDSelect Button Navigation Snapping DragFeature NavigationHistory Split DragPan NavToolbar TransformFeature DrawFeature OverviewMap WMSGetFeatureInfo EditingToolbar Pan WMTSGetFeatureInfo GetFeature Panel ZoomBox Graticule PanPanel ZoomIn KeyboardDefaults PanZoom ZoomOut LayerSwitcher PanZoomBar ZoomPanel Measure Permalink ZoomToMaxExtent ModifyFeature Scale MouseDefaults ScaleLine

Édition

● Disponible pour tous les types de géométrie ● Différents protocoles de sauvegarde :

● HTTP ● WFS ● SQL

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 Rotation Style Unique Value Styles Exemples OpenLayers OSM + Google Maps + KML Reprojection KML Layer MapGuide Layer Advanced OSM Layer Snapping Map "Teleportation" and Rendering MapServer Layer Basic OSM SOS client TileCache MapServer Single Tile Mode Overview Map OpenLayers Spherical Mercator Tiled Map Service Resize a Marker Pan and Zoom Panels OpenLayers Split Feature Vector Feature Transformation Box Markers Layer Custom Control.Panel BBOX Strategy Transition Using a Layer.Text to display markers GeoRSS PointTrack in OpenLayers Cluster Strategy Threshold WorldWind OpenLayers Measure Popup Matrix Cluster Strategy XYZ Layer with Offset MultiMap Popup Mayhem Paging Strategy Virtual Earth OpenLayers Modify Feature Layer Projections Rule Based Style OpenLayers Labeled features MousePosition Control Gears Protocol StyleMap Drawing Simple Vector Features OpenLayers Mousewheel Interval OpenLayers Regular Polygon Feature Styles Vector Formats MultiMap Mercator Resize Features Programatically Rotation Style OpenLayers Spherical Mercator Multiple Server URLS OpenLayers Restricted Extent Unique Value Styles WFS Protocol and Filter Navigation Control Rotate vector features OSM + Google Maps + KML Reprojection WFS Transaction Map Navigation History Open Popup on Layer.Vector KML Layer Vector Behavior A navToolbar with an alwaysZoom ZoomBox OpenLayers Select Feature OpenLayers WFS Reprojection Navigation Toolbar: Outside the Map Setting a Visual Extent Map "Teleportation" and Rendering Snap/Split and Persist via WFS NavToolbar Demo SLD Parser TileCache WFS United States (GeoServer) Untiled Styled Layer Descriptor (SLD) Tiled Map Service WMC Z-Index/Y-Order SLD based selection on WMS layers Vector Feature Transformation Box WMS Untiled OSM and Google Togethe Snapping & Splitting Transition WMS version 1.3 (axis order) WorldWind layers Snapping WorldWind WMS Wrapping the Date Line SOS client Virtual Earth WMSDescribeLayer Parser XHTML OpenLayers Spherical Mercator Virtual Earth Basic WMS via HTTP-POST protocol with a large SLD included XML Format OpenLayers Split Feature OpenLayers Labeled features WMS Time Basic ESRI Map Cache BBOX Strategy Drawing Simple Vector Features Web Map Tile Service (WMTS) Capabilities Parsing Yahoo Base Layer Cluster Strategy Threshold Vector Formats WMTS GetFeatureInfo Control Zoomify Layer Cluster Strategy OpenLayers Spherical Mercator Web Map Tile Service (WMTS) Layer Zoom Level

OpenLayers + + =

Interface usager riche

Toolbars Window Menu AJAX

Tree Combo Tab 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

Modifying Popups Exemples GeoExt Interactive Print Extent Print Your Map Attribute Form Print Preview Window Attribute Store & Reader Feature Renderer Grid with Features Filter Form Panel Layer Tree Toolbar with Actions Layer Opacity Slider Tree Nodes Legend Panel Tree Legend Map Panel Vector Legend Map Panel (in a Viewport) WMS Capabilities Store Map Panel (in a Window) WMS Capabilities Tree Permalink Scale Chooser Feature Popup Zoom Slider

Questions?

Julien-Samuel Lacroix Mapgears [email protected]