Makina Blog

Le blog Makina-corpus

SIG : Mettre en place des tuiles vectorielles


Pour les données images « rasters » comme pour les données vectorielles, des techniques de découpage appelées « tuiles » permettent d’améliorer les performances et la flexibilité de l’affichage. Cet article présente : comment créer et afficher des tuiles vectorielles ?

Cet article est la transcription retouchée et complétée d'une présentation donnée par Frédéric Bonifas.

Les tuiles

C'est quoi, des tuiles ?

Les tuiles sont des carrés de 256 x 256 pixels qui servent à représenter le monde en utilisant la projection Web Mercator, EPSG3857. Elles ont des coordonnées x, y et un niveau de zoom entre 0 et pas plus de 25 (à niveau de zoom 25 une tuile fait seulement 1,19 m à l'équateur !) :

Ce site en lien est pratique pour savoir à quel niveau de zoom nous nous situons.

Comme ce sont des fichiers, les tuiles peuvent être pré-calculées et mises en cache, améliorant ainsi les performances d'une application cartographique. Lors d'un déplacement ou d'un zoom, seules les tuiles manquantes sont chargées.

Aujourd'hui, 2 formats sont distingués :

  • Les tuiles "raster" qui correspondent à des images (jpg, png) rendues par le serveur et qui nécessitent des ressources - stockage, CPU - potentiellement conséquentes.
  • Les tuiles "vectorielles" qui correspondent toujours des tuiles, mais qui contiennent des données de géométrie vectorielles plutôt que des images pré-calculées. Les tuiles vectorielles disposent d'une spécification, et utilisent un format binaire protobuf :

Pourquoi faut-il utiliser des tuiles vectorielles ?

Tout d’abord parce que ces tuiles, contenant les descriptions des géométries et non leurs dessins, sont plus légères à stoker ainsi qu'à télécharger. Comme le rendu des géométries n'est pas fait en amont, les tuiles vectorielles ont d'autres gros avantages.

Changement de style à la volée

Les tuiles vectorielles donnent un accès aux propriétés des objets. Ainsi, il est donc possible dynamiquement de faire varier le rendu en fonction d'interactions avec l'utilisateur. Il est donc possible de les utiliser dans différents contextes ou projets. Par exemple, ici avec le jeu de données des bâtiments de Paris :

Orientation et rotation de la caméra

Les informations en 3D peuvent être affichées et conserver le texte dans le bon sens de lecture :

Performance

Ces tuiles étant rendues par le client, le serveur utilise moins de ressources et celui-ci ne traite que des données vectorielles (pas des images).

Des requêtes instantanées sur les objets peuvent être effectuées sans faire appel à une API, puisque les données sont déjà disponibles ainsi que leur géométrie. Nous pouvons donc réaliser des calculs :

Les fournisseurs

Naturellement des fournisseurs de tuiles vectorielles existent pour vos projets. Notamment les sociétés ArcGis, Mapbox, ou encore Maptiler peuvent être citées.

Cependant, si vous vous tournez vers les tuiles vectorielles, c'est souvent pour réaliser un traitement spécifique avec vos données. Vous aurez donc besoin de créer ou d'enrichir vous-mêmes ces tuiles.

Bien sûr concernant ce besoin, nous vous recommandons de nous contacter! Mais vous pouvez également utiliser les outils ci-dessous.

Comment générer des tuiles vectorielles

Transformer un GeoJSON en tuiles vectorielles : Tippecanoe

Tippecanoe permet de convertir des jeux de données volumineux depuis du GeoJSON ou du tableur CSV.

Générer des tuiles depuis un GeoJSON

tippecanoe
-o volumesbatisparis2011.mbtiles
--maximum-zoom=g
--drop-smallest-as-needed
--read-parallel
--detect-shared-borders
volumesbatisparis2011.geojson

Il permet d'obtenir un fichier MBTiles. C'est une archive qui contient les données découpées en tuiles pour tous les niveaux de zoom.

Servir les tuiles depuis un fichier MBTiles

Il n'y a pas de serveur intégré à Tippecanoe. Nous pouvons utiliser alors par exemple tileserver-gl qui va simplement extraire du MBTiles les tuiles demandées à la volée depuis le web :

docker run --rm -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl

Produire des tuiles vectorielles depuis PostGIS : t-rex

t-rex permet de servir des tuiles directement à partir de données issues de votre base PostGIS.

Création de la base PostGIS

dbname=bbl
dbuser=gisuser
dbpass=corpus
sudo -u postgres -s -- psql -c "CREATE USER ${dbuser} WITH PASSWORD '${dbpassword}';"
sudo -u postgres -s -- psql -c "CREATE DATABASE ${dbname} OWNER ${dbuser};"
sudo -u postgres -s -- psql -d ${dbname} -c "CREATE EXTENSION postgis;" 

ou naturellement en utilisant PgAdmin.

Importer des données depuis OpenStreetMap

  • Récupérer des données OSM
  • Installer osm2pgsql
sudo -u postgres -s -- osm2pgsql -d ${dbname} data.osm

Il est également possible d'utiliser imposm pour importer des données OpenStreetMap.

Générer les tuiles

Après avoir installé t-rex, vous pouvez générer automatiquement un fichier de configuration :

t_rex genconfig --dbconn postgresql://gisuser:corpus@localhost/bbl

Puis servir les tuiles :

t_rex serve --config trexconfig.toml

Attention aux paramètres query_limit et geometry_type

Transformer des données PostGIS en tuiles : la fonction ST_AsMVT

Une requête PostGIS peut retourner la partie géométrique dans différents formats. Comme il existe ST_AsText pour avoir quelque chose de lisible par les humains et comme il existe ST_AsJSON pour  produire quelque chose d'exploitable sur le Web, il existe également ST_AsMVT pour produire des tuiles vectorielles. MTV est pour Mapbox Vector Tile.

En produisant directement les tuiles, il convient de faire attention à leur contenu. Il faut limiter les géométries qui correspondent au secteur géographique de la tuile. Il est aussi convenablement de filtrer ainsi que de simplifier les géométries et les attributs pour que la tuile ait une taille raisonnable.

Afficher des tuiles vectorielles

Leaflet

Leaflet est une bibliothèque dont le développement a commencé en 2011, très légère et performante avec une API facile d'accès ainsi qu'un large écosystème de plugins.

Si Leaflet ne supporte pas nativement les tuiles vectorielles, des plugins existent comme mapbox-gl-leaflet ou Leaflet.VectorGrid qui assurent tout de même une certaine compatibilité.

Openlayers

Bibliothèque historique, OpenLayers gère nativement de nombreux formats y compris les tuiles vectorielles. Cependant, la relative complexité de son API par rapport aux autres bibliothèques, nous incite à ne pas la privilégier.

Mapbox GL JS

Mapbox GL JS est la bibliothèque la plus récente, si son développement est essentiellement assuré par la société Mapbox, cette bibliothèque reste en licence Libre. Les tuiles vectorielles sont son format de base, elles permettent une grande fluidité, des interactions et des "data visualization" avancées.

Aujourd'hui, Mapbox GL JS est la bibliothèque de prédilection de l'équipe Makina Corpus pour les tuiles vectorielles comme pour les autres applications cartographiques.

Autres outils liés aux tuiles vectorielles

S'il existe de nombreux outils,  les experts de Makina Corpus en utilisent au quotidien essentiellement trois :

Création de style

Un studio libre de design de style cartographique : Maputnik.

Plugin QGis

QGis dispose (naturellement) d'un plugin Vector Tiles Reader pour interagir avec des tuiles vectorielles.

GDAL

GDAL supporte les tuiles images et maintenant aussi les tuiles vectorielles. GDAL permet de manipuler en ligne de commande de petit comme de gros volumes de données.

Les problèmes liés aux tuiles vectorielles

Les données embarquées dans les tuiles vectorielles sont à sélectionner et à retraiter. Si on peut tout prendre dans une tuile à l'échelle d'un pâté de maison, ce n'est pas le cas pour la tuile de niveau de zoom 0 qui contient le monde entier.

La sélection des données à intégrer aux tuiles en fonction du niveau de zoom est donc nécessaire. Pour la tuile racine de niveau de zoom 0, les bâtiments et les routes ne sont pas pris. En revanche, les lignes de côte des continents sont concervées. Cependant, ces lignes de côte sont également à adapter à l'échelle de la représentation en les simplifiant.

Par exemple, si nous cherchons à représenter les bâtiments. Pour les niveaux de zooms les plus élevés, les géométries de tous les bâtiments vont simplement être utilisées. Pour les niveaux de zooms plus faibles, les bâtiments les plus gros uniquement vont être conservés. Pour les niveaux de zooms encore plus faibles, les données penvent être retravaillées pour les convertir en polygones de zones bâties.

Conclusion

L’écosystème des tuiles rasters ainsi que des tuiles vectorielles est riche en concepts et solutions logicielles. Leurs mises en place requièrent de choisir des solutions à agencer entre elles.

Les experts SIG/Web mapping sont là pour vous guider en cas de besoin, et des formation vous sont proposées.

Formations associées

Formations SIG / Cartographie

Formation QGIS

À distance (FOAD) Du 2 au 6 décembre 2024

Voir la formation

Formations SIG / Cartographie

Formation Leaflet

Toulouse Du 4 au 5 décembre 2024

Voir la formation

Formations SIG / Cartographie

Formation Développer avec l'écosystème d'OpenStreetMap

Aucune session de formation n'est prévue pour le moment.

Pour plus d'informations, n'hésitez pas à nous contacter.

Voir la formation

Actualités en lien

Image
Préparation de données pour la création de tuiles vectorielles
12/12/2018

SIG : Préparation de données pour la création de tuiles vectorielles

Pour servir des données sous forme des tuiles vectorielles une préparation est nécessaire comme le filtrage et la simplification des géométries. Quelles sont les questions à se poser ? Quels sont les outils pour y répondre ?

Voir l'article
Image
Django_tuiles
31/05/2016

Générer des tuiles vectorielles sur mesure avec Django

Dans cet article nous allons voir comment générer dynamiquement des tuiles vectorielles utilisables par la bibliothèque de visualisation mapbox-gl-js à partir de données stockées dans un modèle GeoDjango.

Voir l'article
Image
SIG_elevation_tuiles
30/05/2016

Profil d'élévation avec des tuiles vectorielles

Comment calculer un profil d'élévation côté client en utilisant des tuiles vectorielles

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus