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

1 279 vues

Publié le

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 !

Publié dans : Technologie
1 commentaire
3 j’aime
Statistiques
Remarques
  • vous publiez de très bons documents, merci infiniment.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
1 279
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
52
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. Lesbasesdela cartographiesurleWeb (versioncourte) MathieuLeplatre @leplatrem www.makina-corpus.com
  2. 2. Auprogramme... ● Fondementsdelacartographie (projections,basededonnées) ● Anatomied'unecartesurleWeb(Leaflet) ● Architecturepourlacartographie (Tuiles,GeoJSON) ● Questions(…etréponses !)
  3. 3. Donnéesgéographiques
  4. 4. Coordonnées :positionsurlaTerre ● Longitude(x) – Latitude (y) ● Degrésdécimaux(-180 +180, -90 +90)→ → ● GPS
  5. 5. Géodésie :laformedelaTerre Ellipsoid (GPS,WGS84) Illustration:http://mapschool.io
  6. 6. Projections ● Équations (lat/lng pixels)↔ ● Représentationplane ( compromis)→ ● Changementderéférentielspatial Illustration:http://mapschool.io
  7. 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. 8. Données«vecteur» ● Point(x,y,z) ● Ligne(listeordonnéedepoints) ● Polygone(enveloppe+trous) Illustration:http://mapschool.io
  9. 9. Données« raster » ● ~Images ● Fondsdecarte(satellite,plan,…) ● Donnéesd'élévation Illustration:http://mapschool.io
  10. 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. 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. 12. UnecartesurleWeb
  13. 13. UnepageWeb ● DocumentHTML(DOM) ● Ressources(images) ● JavaScript(codenavigateur) ● CSS(apparence)
  14. 14. UnepageWebmoderne ● SVG(vecteur) ● Canvas(raster) ● CSS3(animations) ● JSON(données) ● JavaScript(interactions) ● « Mobilefirst » →Navigateurmoderne(<3ans)
  15. 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. 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. 17. CSS3 ● Feuilledestyle(apparence,thème) ● Interprétéparlenavigateur ● Transitions(apparition,...) ● Animations(rotations,...) ● Effets3D(perspectives,...) →Exemples MozillaDemoStudio
  18. 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. 19. Anatomied'unecarte... ● →JS+DOM ● Initialisation=remplissage<div> ● <img> (Fondsdecarte) ● Lat/Long pixels→ (SVG,CSS) ● Vecteur SVG→ ● Événements (interactions)
  20. 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. 21. Architecturepourlacartographie
  22. 22. Lenavigateur ● Téléchargement(page,bibliothèques…) ● Initialisationdelacarte(emprise,couches) ● Obtentiondesdonnées(vecteur+raster) ---optionel--- ● Rendudesdonnées(géométrie+style tracé)→
  23. 23. Leserveur ● Servirdesfichiers(application+données) ---optionel--- ● ExécutiondesrequêtesPostGIS (filtrage,attributs,…) ● Formatagedesrésultats (XML,JSON,…) ● Rendudesdonnées(géométrie+style tracé)→
  24. 24. « Laclassique » ServeursWeb Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles FondsFichiers
  25. 25. « Laclassique » ServeursWeb Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles FondsFichiers Apache, Nginx... Django, TileStache... Mapnik, QGisServer... Leaflet, Openlayers3...
  26. 26. Formats(1/2) ● Imagesraster(PNGouJPG) ● z/x/y.png ● WMTS ● ProjectionEPSG:3857(Google) →Donnéesfixes (fournisseur) …→ oudynamiques (moteurderendu) Arborescence de fichiers !
  27. 27. Formats(2/2) ● GeoJSONpourlesdonnéesvecteurs ● ProjectionEPSG:4326(WGS84) ● Interactivité ? ● Volume ? ● Fréquence ? →Dynamique (python,PHP,Java…) SELECT ST_AsGeoJSON(geom) FROM ...
  28. 28. Toutlemondepeutfairedelacartographie... Lacartographie,c'estsimple. ● Justeuntypededonnéesspécial ● LibJS représentationsexy→ ● Pasoupeudecode Illustration:ChefGusteau,PixarInc.
  29. 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. 30. ● TopoJSON ● Mapnik ● UTFGrid ● Protobuf ● VectorTiles ● MBTiles ● Clustering ● MapServer ● QGisServer ● … →Besoind'experts ! Illustration:F.Bonifas,MakinaCorpus
  31. 31. MakinaCorpus -LogicielsLibres|Cartographie|Mobile Formations-Développement–Conseil ● PostGIS -Leaflet–JavaScript http://makina-corpus.com
  32. 32. Questions ? ...etréponses !

×