Embed Size (px)
DESCRIPTION
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 !
Citation preview
Au programme...
● Fondements de la cartographie (projections, base de données)● Anatomie d'une carte sur le Web (Leaflet)● Architecture pour la cartographie (Tuiles, GeoJSON)● Questions (… et réponses !)
Données géographiques
Coordonnées : position sur la Terre
● Longitude (x) – Latitude (y)● Degrés décimaux (-180 +180, -90 +90)→ →● GPS
Géodésie : la forme de la Terre
Ellipsoid (GPS, WGS 84)
Illustration: http://mapschool.io
Projections
● Équations (lat/lng pixels)↔● Représentation plane ( compromis)→● Changement de référentiel spatial
Illustration: http://mapschool.io
Référentiel spatial
● Système de coordonnées (cartésien)● Ellipsoïde, géoïde (WGS 84)● Axes majeurs (équateur, Greenwich)● Unité (degrés, mètres)● …● Conique, cylindrique, conforme, ...
→WGS 84 (GPS, EPSG :4326) →Mercator cylindrique (Google, EPSG :3857)
Données « vecteur »
● Point (x, y, z)● Ligne (liste ordonnée de points)● Polygone (enveloppe + trous)
Illustration: http://mapschool.io
Données « raster »
● ~ Images● Fonds de carte (satellite, plan, …)● Données d'élévation
Illustration: http://mapschool.io
Base de données PostGIS
● Type de colonnes (Point, LineString, Polygon...)● Fonctions géographiques (distance, surface, emprises ...)● Indexes spatiaux (arbres de rectangles...)
$ sudo apt-get install postgis
$ psql -d mabase
> CREATE EXTENSION postgis;
Exemple (1/2)
CREATE TABLE bureau_vote (
commune VARCHAR(128),numero INTEGER,
geom geometry(Polygon, 4326))
Table classique
Attributs
Colonnegéométrievecteur
Type de géométrie Référentielspatial
Une carte sur le Web
Une page Web
● Document HTML (DOM)● Ressources (images)● JavaScript (code navigateur)● CSS (apparence)
Une page Web moderne
● SVG (vecteur)● Canvas (raster)● CSS 3 (animations)● JSON (données)● JavaScript (interactions)● « Mobile first »
→ Navigateur moderne (<3ans)
Scalable Vector Graphics
● Dérivé de XML● Résolution infinie● Interprété par le navigateur (DOM)● Événements (survol, clic...)● Détails volume→
→ Exemples http://d3js.org
Illustration: Logo Parcs Nationaux de France
Canvas● Zone de dessin (pinceaux, JavaScript)● Universel (2D, 3D, images, ...)● Pas interprété (<canvas>)● Pas d'événements DOM
→ Exempleshttp://babylonjs.com http://ol3js.org
Geotrekrando !
CSS 3● Feuille de style (apparence, thème)● Interprété par le navigateur● Transitions (apparition, ...)● Animations (rotations, ...)● Effets 3D (perspectives, ...)
→ ExemplesMozilla Demo Studio
Bibliothèque cartographique
<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
Anatomie d'une carte... ● → JS + DOM● Initialisation = remplissage <div>● <img> (Fonds de carte)● Lat/Long pixels → (SVG, CSS)● Vecteur SVG→● Événements (interactions)
Exemples et devinettes
● 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/
Architecture pour la cartographie
Le navigateur
● Téléchargement (page, bibliothèques…)● Initialisation de la carte (emprise, couches)● Obtention des données (vecteur + raster)
--- optionel ---
● Rendu des données (géométrie + style tracé)→
Le serveur
● Servir des fichiers (application + données)
--- optionel ---
● Exécution des requêtes PostGIS (filtrage, attributs, …)● Formatage des résultats (XML, JSON, …)● Rendu des données (géométrie + style tracé)→
« La classique »Serveurs Web Navigateur
PostG IS Python
MoteurRendu
Vecteur
Tu i les
FondsF i ch iers
« La classique »Serveurs Web Navigateur
PostG IS Python
MoteurRendu
Vecteur
Tu i les
FondsF i ch iers
Apache, Nginx...
Django, TileStache...
Mapnik, QGisServer...
Leaflet,Openlayers3...
Formats (1/2)
● Images raster (PNG ou JPG)● z/x/y.png● WMTS● Projection EPSG:3857 (Google)
→ Données fixes (fournisseur)
… → ou dynamiques (moteur de rendu)
Arborescencede fichiers !
Formats (2/2)
● GeoJSON pour les données vecteurs● Projection EPSG:4326 (WGS84)
● Interactivité ?● Volume ? ● Fréquence ?
→ Dynamique (python, PHP, Java …)
SELECT ST_AsGeoJSON(geom)FROM ...
Tout le monde peut faire de la cartographie...
La cartographie, c'est simple.● Juste un type de données spécial● Lib JS représentation sexy→● Pas ou peu de code
Illustration: Chef Gusteau, Pixar Inc.
… avec les bons outils et compromis !
La cartographie, c'est compliqué.● Performance (Web)● Volumétrie (précision)● Fréquence de rafraîchissement (cache)● Besoin trop éloigné des données (mal structurées)● INSPIRE (quand l'interopérabilité empêche l'opérabilité)
Illustration: Anton Ego, Pixar Inc.
● TopoJSON● Mapnik● UTFGrid● Protobuf● Vector Tiles● MBTiles● Clustering● MapServer● QGisServer● …
→ Besoin d'experts !Illustration: F. Bonifas, Makina Corpus
Makina Corpus - Logiciels Libres | Cartographie | Mobile
Formations - Développement – Conseil●
PostGIS - Leaflet – JavaScript
http://makina-corpus.com
Questions ?...et réponses !
