Petit déjeuner "Les bases de la cartographie sur le Web"

  • 240 views
Uploaded on

Du stockage de la donnée à la carte sur le Web, venez découvrir les fondements de la cartographie en ligne autour d'un café et quelques viennoiseries. …

Du stockage de la donnée à la carte sur le Web, venez découvrir les fondements de la cartographie en ligne autour d'un café et quelques viennoiseries.

Nous vous avons présenté les fondements des SIG : comment représenter, stocker, éditer, assembler, publier les données géographiques...

Nous avons détaillé l'anatomie d'une carte moderne sur le web.

Ce petit déjeuner s'adresse à tous les curieux qui souhaitent découvrir les bases et comprendre la mécanique en abordant quelques éléments techniques !

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
240
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lesbasesdela cartographiesurleWeb (versioncourte) MathieuLeplatre @leplatrem www.makina-corpus.com
  • 2. Auprogramme... ● Fondementsdelacartographie (projections,basededonnées) ● Anatomied'unecartesurleWeb(Leaflet) ● Architecturepourlacartographie (Tuiles,GeoJSON) ● Questions(…etréponses !)
  • 3. Donnéesgéographiques
  • 4. Coordonnées :positionsurlaTerre ● Longitude(x) – Latitude (y) ● Degrésdécimaux(-180 +180, -90 +90)→ → ● GPS
  • 5. Géodésie :laformedelaTerre Ellipsoid (GPS,WGS84) Illustration:http://mapschool.io
  • 6. Projections ● Équations (lat/lng pixels)↔ ● Représentationplane ( compromis)→ ● Changementderéférentielspatial Illustration:http://mapschool.io
  • 7. Référentielspatial ● Systèmedecoordonnées(cartésien) ● Ellipsoïde,géoïde (WGS84) ● Axesmajeurs(équateur,Greenwich) ● Unité(degrés,mètres) ● … ● Conique, cylindrique,conforme,... →WGS84(GPS,EPSG :4326) →Mercatorcylindrique(Google,EPSG :3857)
  • 8. Données«vecteur» ● Point(x,y,z) ● Ligne(listeordonnéedepoints) ● Polygone(enveloppe+trous) Illustration:http://mapschool.io
  • 9. Données« raster » ● ~Images ● Fondsdecarte(satellite,plan,…) ● Donnéesd'élévation Illustration:http://mapschool.io
  • 10. BasededonnéesPostGIS ● Typedecolonnes(Point,LineString,Polygon...) ● Fonctionsgéographiques (distance,surface,emprises...) ● Indexesspatiaux(arbresderectangles...) $ sudo apt-get install postgis $ psql -d mabase > CREATE EXTENSION postgis;
  • 11. Exemple (1/2) CREATE TABLE bureau_vote ( commune VARCHAR(128), numero INTEGER, geom geometry(Polygon, 4326) ) Table classique Attributs Colonne géométrie vecteur Type de géométrie Référentiel spatial
  • 12. UnecartesurleWeb
  • 13. UnepageWeb ● DocumentHTML(DOM) ● Ressources(images) ● JavaScript(codenavigateur) ● CSS(apparence)
  • 14. UnepageWebmoderne ● SVG(vecteur) ● Canvas(raster) ● CSS3(animations) ● JSON(données) ● JavaScript(interactions) ● « Mobilefirst » →Navigateurmoderne(<3ans)
  • 15. ScalableVectorGraphics ● DérivédeXML ● Résolutioninfinie ● Interprétéparlenavigateur (DOM) ● Événements(survol,clic...) ● Détails volume→ →Exemples http://d3js.org Illustration:LogoParcsNationauxdeFrance
  • 16. Canvas ● Zonededessin(pinceaux,JavaScript) ● Universel (2D,3D,images,...) ● Pasinterprété(<canvas>) ● Pasd'événementsDOM →Exemples http://babylonjs.com http://ol3js.org Geotrek rando !
  • 17. CSS3 ● Feuilledestyle(apparence,thème) ● Interprétéparlenavigateur ● Transitions(apparition,...) ● Animations(rotations,...) ● Effets3D(perspectives,...) →Exemples MozillaDemoStudio
  • 18. Bibliothèquecartographique <script src="leaflet.js"></script> <link rel="stylesheet" href="leaflet.css" /> <div id="carte"></div> <script> var map = L.map('carte') .fitWorld(); L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png') .addTo(map); L.marker([51.5, -0.09]) .addTo(map); </script> http://leafletjs.com
  • 19. Anatomied'unecarte... ● →JS+DOM ● Initialisation=remplissage<div> ● <img> (Fondsdecarte) ● Lat/Long pixels→ (SVG,CSS) ● Vecteur SVG→ ● Événements (interactions)
  • 20. Exemplesetdevinettes ● http://municipalestoulouse2014.makina-corpus.com/ ● http://dessine-moi-une-ville.makina-corpus.net/ ● http://leaflet.github.io/Leaflet.heat/demo/ ● http://leplatrem.github.io/Leaflet.gribouille/ ● http://ol3js.org/en/master/examples/animation.html ● http://danzel.github.io/Leaflet.utfgrid/example/map.html ● http://bl.ocks.org/nrenner/raw/8184978 ● http://rbspd3.herokuapp.com/ ● http://forecast.io/
  • 21. Architecturepourlacartographie
  • 22. Lenavigateur ● Téléchargement(page,bibliothèques…) ● Initialisationdelacarte(emprise,couches) ● Obtentiondesdonnées(vecteur+raster) ---optionel--- ● Rendudesdonnées(géométrie+style tracé)→
  • 23. Leserveur ● Servirdesfichiers(application+données) ---optionel--- ● ExécutiondesrequêtesPostGIS (filtrage,attributs,…) ● Formatagedesrésultats (XML,JSON,…) ● Rendudesdonnées(géométrie+style tracé)→
  • 24. « Laclassique » ServeursWeb Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles FondsFichiers
  • 25. « Laclassique » ServeursWeb Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles FondsFichiers Apache, Nginx... Django, TileStache... Mapnik, QGisServer... Leaflet, Openlayers3...
  • 26. Formats(1/2) ● Imagesraster(PNGouJPG) ● z/x/y.png ● WMTS ● ProjectionEPSG:3857(Google) →Donnéesfixes (fournisseur) …→ oudynamiques (moteurderendu) Arborescence de fichiers !
  • 27. Formats(2/2) ● GeoJSONpourlesdonnéesvecteurs ● ProjectionEPSG:4326(WGS84) ● Interactivité ? ● Volume ? ● Fréquence ? →Dynamique (python,PHP,Java…) SELECT ST_AsGeoJSON(geom) FROM ...
  • 28. Toutlemondepeutfairedelacartographie... Lacartographie,c'estsimple. ● Justeuntypededonnéesspécial ● LibJS représentationsexy→ ● Pasoupeudecode Illustration:ChefGusteau,PixarInc.
  • 29. …aveclesbonsoutilsetcompromis ! Lacartographie,c'estcompliqué. ● Performance(Web) ● Volumétrie(précision) ● Fréquencederafraîchissement (cache) ● Besointrop éloignédesdonnées(malstructurées) ● INSPIRE(quandl'interopérabilitéempêche l'opérabilité) Illustration:AntonEgo,PixarInc.
  • 30. ● TopoJSON ● Mapnik ● UTFGrid ● Protobuf ● VectorTiles ● MBTiles ● Clustering ● MapServer ● QGisServer ● … →Besoind'experts ! Illustration:F.Bonifas,MakinaCorpus
  • 31. MakinaCorpus -LogicielsLibres|Cartographie|Mobile Formations-Développement–Conseil ● PostGIS -Leaflet–JavaScript http://makina-corpus.com
  • 32. Questions ? ...etréponses !