0
Introduction à lacartographie Web open         source Au-delà de Google Maps
Julien-Samuel Lacroix          Mapgears  jlacroix@mapgears.com
Géomatique 101Navigation webCôté serveurBase de données
Géomatique 101
La géomatique en quelques motsDiscipline ayant pour objet la gestion des donnéesgéographiques en faisant appel aux science...
La géomatique en 1000 mots   Acquisition                  Diffusion   Stockage                              Traitement    ...
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 dincubat...
La cartographie web                             OpenLayers                                                 MapFish        ...
La cartographie web              Navigateur              Application              OpenLayers               Services       ...
Côté serveur                                    OpenLayers                                                 MapFish        ...
MapServer●Permet de construire ses propres cartes avec ses propresdonnées géospatiales.●MapServer lit des données géoréfér...
MapServer
MapServer
Configuration
Configuration
Configuration
Polyvalence●   Windows, Linux, Unix, Mac, etc●   Format de fichier dentrée multiple via GDAL/OGR●   Standard OGC
Performance
Performance
Données?Shapefile :● roads.shp● roads.shx● roads.dbfFichiers statiquesAttributs stockés dans un fichier DBFLextension dbas...
Base de données                                 OpenLayers                                                 MapFish        ...
PostGISBase de données relationelleAjout de nouveaux types “spatiaux”Opérateurs et fonctions géographiques       - interro...
PostGIS● Extension spatiale pour PostgreSQL● Stockage, requête et manipulation dobjets spatiauxdirectement dans la base de...
Jonction de 2 tablesTable avec géométrie   Table avec géométrie et attributs
Jonction de 2 tables
Jonction de 2 tablesSELECT * 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"...
PostGIS et MapServerLAYER CONNECTIONTYPE POSTGIS CONNECTION "host=yourhost dbname=db user=you password=pass port=pgport" D...
Fonctions spatialesLhô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)) asmin_distanceFROM roads,hospitalsGROU...
CLASSEXPRESSION ([dist] < 1000)COLOR 0 255 0ENDCLASSEXPRESSION ([dist] >= 1000 AND [dist] < 2000)COLOR 255 255 0ENDCLASSEX...
PostGISIl y a beaucoup de fonctions comme distance()http://postgis.refractions.net/docs/reference.html
OpenLayershttp://openlayers.org/●   Cartographie dynamique●   API complet●   Librairie JavaScript●   Aucune dépendance à  ...
À la base: JSfunction init(){        map = new OpenLayers.Map(map);      layer = new OpenLayers.Layer.WMS(          "OpenL...
Pour en faire plus
Sources de données                    var map = new OpenLayers.Map({                       div: "map",●   GYMO            ...
CouchesArcGIS93Rest      KaMapCache           RootContainerArcIMS            MapGuide             VirtualEarthBoxes       ...
Vecteurs●   Points, lignes, polygones, textes●   Formats multiples:      ● GML      ● GeoJSON      ● KML      ● Texte     ...
Architecture
Attributsvar aussie = new OpenLayers.Rule({       filter: new OpenLayers.Filter.Comparison({                type: OpenLaye...
Cluster
ControlArgParser          MousePosition       SelectFeatureAttribution        MouseToolbar        SLDSelectButton         ...
Édition●   Disponible pour tous les types de géométrie●   Différents protocoles de sauvegarde :●   HTTP●   WFS●   SQL
ControlArgParser          MousePosition       SelectFeatureAttribution        MouseToolbar        SLDSelectButton         ...
DocumentationDocumentation de lAPIListes de discussion très actives (Users, Dev)     - Plusieurs centaines de messages par...
Exemples OpenLayersAccessible                         OpenLayers Document Drag           GML ParserAll Overlays with Googl...
Paging Strategy                                                                                                           ...
OpenLayers +        +          =
Interface usager richeToolbars                         Window              Menu                           AJAX            ...
Concept● Absence de la composante géospatiale dans ExtJS● Absence des concepts pour les applications riches dansOpenLayers...
MapPanelnew Ext.Window({   title: "GeoExt in Action",   height: 280, width: 450, layout: "fit",   items: [{       xtype: "...
MapPanel
Modifying PopupsExemples GeoExt             Interactive Print Extent                            Print Your MapAttribute Fo...
Questions?
Julien-Samuel Lacroix          Mapgears  jlacroix@mapgears.com
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Introduction au webmapping  au-dela de google maps
Upcoming SlideShare
Loading in...5
×

Introduction au webmapping au-dela de google maps

2,170

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
153
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction au webmapping au-dela de google maps"

  1. 1. Introduction à lacartographie Web open source Au-delà de Google Maps
  2. 2. Julien-Samuel Lacroix Mapgears jlacroix@mapgears.com
  3. 3. Géomatique 101Navigation webCôté serveurBase de données
  4. 4. Géomatique 101
  5. 5. La géomatique en quelques motsDiscipline ayant pour objet la gestion des donnéesgéographiques en faisant appel aux sciences ettechnologies reliées à● lacquisition● le stockage● le traitement● et la diffusion... de données géographiques. (réf: OQLF)
  6. 6. La géomatique en 1000 mots Acquisition Diffusion Stockage Traitement et analyse
  7. 7. Google Maps● Depuis 2005● La cartographie disponible pour tous● Néogéographe vs Paléogéographe
  8. 8. Les logiciels libres en géomatique● freegis.org● 356 entrées● OSGeo● 14 projets logiciels● + 7 en cours dincubation
  9. 9. La cartographie web OpenLayers MapFish Fusion Acquisition (MapBuilder) MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork Stockage Traitement GRASS et analyse Quantum GIS PostGIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS
  10. 10. La cartographie web Navigateur Application OpenLayers Services MapServer Données PostGIS
  11. 11. Côté serveur OpenLayers MapFish Fusion Acquisition (MapBuilder) MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork Stockage Traitement GRASS et analyse Quantum GIS PostGIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS
  12. 12. MapServer●Permet de construire ses propres cartes avec ses propresdonnées géospatiales.●MapServer lit des données géoréférencées et retourne desimages standards dans le format désiré.● Implémente les normes OGC : ●WMS ●WFS ●SLD ●GML ●KML
  13. 13. MapServer
  14. 14. MapServer
  15. 15. Configuration
  16. 16. Configuration
  17. 17. Configuration
  18. 18. Polyvalence● Windows, Linux, Unix, Mac, etc● Format de fichier dentrée multiple via GDAL/OGR● Standard OGC
  19. 19. Performance
  20. 20. Performance
  21. 21. Données?Shapefile :● roads.shp● roads.shx● roads.dbfFichiers statiquesAttributs stockés dans un fichier DBFLextension dbase de PHP est encore utile!!!
  22. 22. Base de données OpenLayers MapFish Fusion Acquisition (MapBuilder) MapServer GeoServer MapGuide Mapbender Diffusion deegree geomajas GeoNetwork Stockage Traitement GRASS et analyse Quantum GIS PostGIS GDAL/OGR gvSIG FDO OSSIM GEOS GeoTools MetaCRS
  23. 23. PostGISBase de données relationelleAjout de nouveaux types “spatiaux”Opérateurs et fonctions géographiques - interrogation - édition - analyseAussi puissant quun SIG
  24. 24. PostGIS● Extension spatiale pour PostgreSQL● Stockage, requête et manipulation dobjets spatiauxdirectement dans la base de données● Suit la spécification OGC Simple Features for SQL● Base de données relationnelle...
  25. 25. Jonction de 2 tablesTable avec géométrie Table avec géométrie et attributs
  26. 26. Jonction de 2 tables
  27. 27. Jonction de 2 tablesSELECT * FROM roads LEFT JOIN roads_attr ON roads.gid = roads_attr.gid;
  28. 28. PostGIS et MapServerLAYER CONNECTIONTYPE POSTGIS CONNECTION "host=yourhost dbname=db user=you password=pass port=pgport" DATA "the_geom FROM roads"....
  29. 29. 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”.....
  30. 30. Fonctions spatialesLhôpital le plus proche?
  31. 31. SELECT distance(hospitals.the_geom,roads.the_geom)FROM hospitals, roads;
  32. 32. SELECT road.gid, road.street, min(distance(hospitals.the_geom,r.the_geom)) asmin_distanceFROM roads,hospitalsGROUP BY road.gid, street;
  33. 33. CLASSEXPRESSION ([dist] < 1000)COLOR 0 255 0ENDCLASSEXPRESSION ([dist] >= 1000 AND [dist] < 2000)COLOR 255 255 0ENDCLASSEXPRESSION ([dist] >= 2000 AND [dist] < 4000)COLOR 192 192 0ENDCLASSEXPRESSION ([dist] >= 4000)COLOR 255 0 0END
  34. 34. PostGISIl y a beaucoup de fonctions comme distance()http://postgis.refractions.net/docs/reference.html
  35. 35. OpenLayershttp://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
  36. 36. À la base: JSfunction 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);}
  37. 37. Pour en faire plus
  38. 38. Sources de données var map = new OpenLayers.Map({ div: "map",● GYMO layers: [ point title description icon new OpenLayers.Layer.WMS( orange title 10,20 my my orange description● KML 2,4 my aqua title "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", my aqua description 42,-71 {layers: "basic"} my purple title description<br/>is great● Fichier texte ), 47.543,-78.222 title description 46.789,-77.123 new OpenLayers.Layer.Vector("KML", { 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 });
  39. 39. CouchesArcGIS93Rest KaMapCache RootContainerArcIMS MapGuide VirtualEarthBoxes MapServer WFSEventPane MapServer. Untiled WMSFixedZoomLevels Markers WMS. UntiledGeoRSS MultiMap WMS.PostGML PointTrack WorldWindGoogle SphericalMercator YahooGrid Text XYZHTTPRequest TileCache Google/ v3.jsImage TMS WMTSKaMap Vector Zoomify
  40. 40. Vecteurs● Points, lignes, polygones, textes● Formats multiples: ● GML ● GeoJSON ● KML ● Texte ● etc● CSS● Outils dédition● Outils danalyse
  41. 41. Architecture
  42. 42. Attributsvar aussie = new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.LIKE, property: "location", value: "Australia" }), symbolizer: { fillColor: "red" }});
  43. 43. Cluster
  44. 44. ControlArgParser MousePosition SelectFeatureAttribution MouseToolbar SLDSelectButton Navigation SnappingDragFeature NavigationHistory SplitDragPan NavToolbar TransformFeatureDrawFeature OverviewMap WMSGetFeatureInfoEditingToolbar Pan WMTSGetFeatureInfoGetFeature Panel ZoomBoxGraticule PanPanel ZoomInKeyboardDefaults PanZoom ZoomOutLayerSwitcher PanZoomBar ZoomPanelMeasure Permalink ZoomToMaxExtentModifyFeature ScaleMouseDefaults ScaleLine
  45. 45. Édition● Disponible pour tous les types de géométrie● Différents protocoles de sauvegarde :● HTTP● WFS● SQL
  46. 46. ControlArgParser MousePosition SelectFeatureAttribution MouseToolbar SLDSelectButton Navigation SnappingDragFeature NavigationHistory SplitDragPan NavToolbar TransformFeatureDrawFeature OverviewMap WMSGetFeatureInfoEditingToolbar Pan WMTSGetFeatureInfoGetFeature Panel ZoomBoxGraticule PanPanel ZoomInKeyboardDefaults PanZoom ZoomOutLayerSwitcher PanZoomBar ZoomPanelMeasure Permalink ZoomToMaxExtentModifyFeature ScaleMouseDefaults ScaleLine
  47. 47. DocumentationDocumentation de lAPIListes de discussion très actives (Users, Dev) - Plusieurs centaines de messages par mois sur 2 listesExemples!
  48. 48. Exemples OpenLayersAccessible OpenLayers Document Drag GML ParserAll Overlays with Google and OSM Double Set Center Google with OverlayOpenLayers Overlays Only Drag Feature Google (v3) allOverlays Layermap.panTo OpenLayers Draw Feature Google (v3) LayerArcGIS Server 9.3 Rest API Dynamic POIs via a Text Layer Google LayerArcIMS Thematic Editing Toolbar Named GraphicsArcIMS Event Handling GraticuleAttribution OpenLayers GutterBase Layers Filter Strategy OpenLayers Select and Highlight FeatureVector Behavior (Fixed/HTTP/GML) Filter Encoding Hover HandlerBing Fractional Zoom Image LayerBoxes Full Screen OpenLayers Geometry IntersectionShowing Browser Name GeoJSON KaMapBuffer GeoRSS from Flickr in OpenLayers KML LayerCanvas Renderer GeoRSS Marker Parsing gx:Track in KMLClick Handler GeoRSS KML ParserClick Event WFS GetFeature (GeoServer) Late RenderingMap Controls Feature Info Layer OpacityCustom Control Feature Info in Popup Layer Load MonitoringCustom Style Feature Info Layer SwitcherDebug GML Layer Basic Single WMS
  49. 49. Paging Strategy Rule Based Style StyleMap Feature Styles Rotation StyleExemples OpenLayersMapGuide Layer Advanced OSM Layer Snapping Unique Value Styles OSM + Google Maps + KML Reprojection KML Layer Map "Teleportation" and RenderingMapServer Layer Basic OSM SOS client TileCacheMapServer Single Tile Mode Overview Map OpenLayers Spherical Mercator Tiled Map ServiceResize a Marker Pan and Zoom Panels OpenLayers Split Feature Vector Feature Transformation BoxMarkers Layer Custom Control.Panel BBOX Strategy TransitionUsing a Layer.Text to display markers GeoRSS PointTrack in OpenLayers Cluster Strategy Threshold WorldWindOpenLayers Measure Popup Matrix Cluster Strategy XYZ Layer with OffsetMultiMap Popup Mayhem Paging Strategy Virtual EarthOpenLayers Modify Feature Layer Projections Rule Based Style OpenLayers Labeled featuresMousePosition Control Gears Protocol StyleMap Drawing Simple Vector FeaturesOpenLayers Mousewheel Interval OpenLayers Regular Polygon Feature Styles Vector FormatsMultiMap Mercator Resize Features Programatically Rotation Style OpenLayers Spherical MercatorMultiple Server URLS OpenLayers Restricted Extent Unique Value Styles WFS Protocol and FilterNavigation Control Rotate vector features OSM + Google Maps + KML Reprojection WFS TransactionMap Navigation History Open Popup on Layer.Vector KML Layer Vector BehaviorA navToolbar with an alwaysZoom ZoomBox OpenLayers Select Feature OpenLayers WFS ReprojectionNavigation Toolbar: Outside the Map Setting a Visual Extent Map "Teleportation" and Rendering Snap/Split and Persist via WFSNavToolbar Demo SLD Parser TileCache WFS United States (GeoServer)Untiled Styled Layer Descriptor (SLD) Tiled Map Service WMCZ-Index/Y-Order SLD based selection on WMS layers Vector Feature Transformation Box WMS UntiledOSM and Google Togethe Snapping & Splitting Transition WMS version 1.3 (axis order)WorldWind layers Snapping WorldWind WMSWrapping the Date Line SOS client Virtual Earth WMSDescribeLayer ParserXHTML OpenLayers Spherical Mercator Virtual Earth Basic WMS via HTTP-POST protocol with a large SLD includedXML Format OpenLayers Split Feature OpenLayers Labeled features WMS TimeBasic ESRI Map Cache BBOX Strategy Drawing Simple Vector Features Web Map Tile Service (WMTS) Capabilities ParsingYahoo Base Layer Cluster Strategy Threshold Vector Formats WMTS GetFeatureInfo ControlZoomify Layer Cluster Strategy OpenLayers Spherical Mercator Web Map Tile Service (WMTS) LayerZoom Level
  50. 50. OpenLayers + + =
  51. 51. Interface usager richeToolbars Window Menu AJAX Tree Combo Tab Grid Layout Panel
  52. 52. Concept● Absence de la composante géospatiale dans ExtJS● Absence des concepts pour les applications riches dansOpenLayers● Présence de la carte dans un panel ExtJS● Encapsulement des objets dOpenLayers dans descomposantes data dExtJS
  53. 53. 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();
  54. 54. MapPanel
  55. 55. Modifying PopupsExemples GeoExt Interactive Print Extent Print Your MapAttribute Form Print Preview WindowAttribute Store & Reader Feature RendererGrid with Features Filter Form PanelLayer Tree Toolbar with ActionsLayer Opacity Slider Tree NodesLegend Panel Tree LegendMap Panel Vector LegendMap Panel (in a Viewport) WMS Capabilities StoreMap Panel (in a Window) WMS Capabilities TreePermalink Scale ChooserFeature Popup Zoom Slider
  56. 56. Questions?
  57. 57. Julien-Samuel Lacroix Mapgears jlacroix@mapgears.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×