Lesbasesdela
cartographiesurleWeb
(versioncourte)
MathieuLeplatre
@leplatrem
www.makina-corpus.com
Auprogramme...
●
Fondementsdelacartographie (projections,basededonnées)
●
Anatomied'unecartesurleWeb(Leaflet)
●
Architectu...
Donnéesgéographiques
Coordonnées :positionsurlaTerre
●
Longitude(x) – Latitude (y)
●
Degrésdécimaux(-180 +180, -90 +90)→ →
●
GPS
Géodésie :laformedelaTerre
Ellipsoid (GPS,WGS84)
Illustration:http://mapschool.io
Projections
●
Équations (lat/lng pixels)↔
●
Représentationplane ( compromis)→
●
Changementderéférentielspatial
Illustratio...
Référentielspatial
●
Systèmedecoordonnées(cartésien)
●
Ellipsoïde,géoïde (WGS84)
●
Axesmajeurs(équateur,Greenwich)
●
Unité...
Données«vecteur»
●
Point(x,y,z)
●
Ligne(listeordonnéedepoints)
●
Polygone(enveloppe+trous)
Illustration:http://mapschool.io
Données« raster »
●
~Images
●
Fondsdecarte(satellite,plan,…)
●
Donnéesd'élévation
Illustration:http://mapschool.io
BasededonnéesPostGIS
●
Typedecolonnes(Point,LineString,Polygon...)
●
Fonctionsgéographiques (distance,surface,emprises...)...
Exemple (1/2)
CREATE TABLE bureau_vote (
commune VARCHAR(128),
numero INTEGER,
geom geometry(Polygon, 4326)
)
Table classi...
UnecartesurleWeb
UnepageWeb
●
DocumentHTML(DOM)
●
Ressources(images)
●
JavaScript(codenavigateur)
●
CSS(apparence)
UnepageWebmoderne
●
SVG(vecteur)
●
Canvas(raster)
●
CSS3(animations)
●
JSON(données)
●
JavaScript(interactions)
●
« Mobile...
ScalableVectorGraphics
●
DérivédeXML
●
Résolutioninfinie
●
Interprétéparlenavigateur (DOM)
●
Événements(survol,clic...)
●
...
Canvas
●
Zonededessin(pinceaux,JavaScript)
●
Universel (2D,3D,images,...)
●
Pasinterprété(<canvas>)
●
Pasd'événementsDOM
→...
CSS3
●
Feuilledestyle(apparence,thème)
●
Interprétéparlenavigateur
●
Transitions(apparition,...)
●
Animations(rotations,.....
Bibliothèquecartographique
<script src="leaflet.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<div id="carte"...
Anatomied'unecarte...
●
→JS+DOM
●
Initialisation=remplissage<div>
●
<img> (Fondsdecarte)
●
Lat/Long pixels→ (SVG,CSS)
●
Ve...
Exemplesetdevinettes
●
http://municipalestoulouse2014.makina-corpus.com/
●
http://dessine-moi-une-ville.makina-corpus.net/...
Architecturepourlacartographie
Lenavigateur
●
Téléchargement(page,bibliothèques…)
●
Initialisationdelacarte(emprise,couches)
●
Obtentiondesdonnées(vecteu...
Leserveur
●
Servirdesfichiers(application+données)
---optionel---
●
ExécutiondesrequêtesPostGIS (filtrage,attributs,…)
●
F...
« Laclassique »
ServeursWeb Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
FondsFichiers
« Laclassique »
ServeursWeb Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
FondsFichiers
Apache, Nginx...
Django, T...
Formats(1/2)
●
Imagesraster(PNGouJPG)
●
z/x/y.png
●
WMTS
●
ProjectionEPSG:3857(Google)
→Donnéesfixes
(fournisseur)
…→ oudy...
Formats(2/2)
●
GeoJSONpourlesdonnéesvecteurs
●
ProjectionEPSG:4326(WGS84)
●
Interactivité ?
●
Volume ?
●
Fréquence ?
→Dyna...
Toutlemondepeutfairedelacartographie...
Lacartographie,c'estsimple.
●
Justeuntypededonnéesspécial
●
LibJS représentationse...
…aveclesbonsoutilsetcompromis !
Lacartographie,c'estcompliqué.
●
Performance(Web)
●
Volumétrie(précision)
●
Fréquencederaf...
●
TopoJSON
●
Mapnik
●
UTFGrid
●
Protobuf
●
VectorTiles
●
MBTiles
●
Clustering
●
MapServer
●
QGisServer
●
…
→Besoind'expert...
MakinaCorpus -LogicielsLibres|Cartographie|Mobile
Formations-Développement–Conseil
●
PostGIS -Leaflet–JavaScript
http://ma...
Questions ?
...etréponses !
Petit déjeuner "Les bases de la cartographie sur le Web"
Prochain SlideShare
Chargement dans…5
×

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

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

×