Tuiles vectorielles

Cet article présente les tuiles vectorielles, technique émergente qui permet de fournir des informations géographiques par petits paquets à un navigateur web ou une application cliente. Elles permettent de faire des rendus plus personnalisés, de naviguer dans des cartes avec plus d'interactions, tout en réduisant la quantité de données transférée entre le serveur et le client.

Principe

Les tuiles vectorielles ressemblent aux tuiles raster, mais au lieu d'être une image, les données qu'elles contiennent permettent de décrire les éléments qui la compose avec des tracés vectoriels. Au lieu d'avoir des ensembles de pixels, nous avons donc des ensembles de coordonnées de points, auxquels on peut associer plusieurs informations. Les tuiles vectorielles peuvent par exemple être au format geoJSON : chaque objet est décrit par une géométrie (point, segments de lignes, polygone, ...) et des propriétés (couleur, hauteur, ...).

Comme leurs cousines raster, les tuiles vectorielles peuvent être mises en cache, passent extrêmement bien à l'échelle, et permettent de naviguer dans des cartes immenses rapidement, même sur des terminaux légers. Il y a cependant des différences entre les 2 approches comme nous allons le voir dans le point suivant.

Avantages

• Le format est plus léger que des tuiles raster, ce qui réduit la bande passante utilisée des 2 côtés : à bande passante équivalente, un serveur peut servir plus de clients en simultané, et coté client, le téléchargement est plus rapide. Dans le cas de terminaux mobile avec un forfait internet facturé à la quantité de trafic, c'est aussi un argument de coût en faveur des tuiles vectorielles.
• Le style du rendu est plus flexible et peut être réalisé côté client : une carte peut par exemple être rendue dans des tons plus sombres la nuit pour moins fatiguer les yeux.
• Les cartes peuvent être plus interactives : on peut par exemple colorer différemment un élément sélectionné, afficher des informations sur les éléments de la carte comme la vitesse maximale autorisée sur une route, la hauteur d'un bâtiment ou la densité d'une zone.
• Les rendus peuvent être plus beau, surtout si le client possède un GPU.

Inconvénients

• Le rendu peut être légèrement plus coûteux coté client.
• Il faut que le client supporte le dessin vectoriel : ce n'est pas un problème avec les appareils récents, mais cela peut en être un avec les plus anciens.

Pour aller plus loin

Cette présentation vous a donné envie de creuser un peu plus ? Voici quelques ressources pour vous aider à approfondir le sujet. Pour les anglophones, il y a aussi le projet awesome-vector-tiles qui compile plein de ressources.

Démonstrations

• Le cadastre français est une application que nous avons réalisée et qui permet de visualiser sur une carte interactive les données du cadastre.
• Mapbox propose des exemples qui permettent de changer le style des cartes à la volée.
• Mapzen propose le même genre d'exemples que Mapbox.

Sources de tuiles vectorielles

• Vous pouvez accéder à l'API de notre service cadastre en vous référant à cette documentation
• Mapbox propose plusieurs couches, mais il faut s'enregistrer et avoir un clé d'API.
• Mapzen met aussi à disposition un serveur de tuiles vectorielles. Il faut aussi s'inscrire pour avoir une clé d'API et on peut l'utiliser gratuitement mais à faible rythme.

Librairies clientes

• Leaflet.VectorGrid est un plugin Leaflet qui permet l'affichage de tuiles vectorielles.
• Mapbox GL JS est une librairie Javascript qui utilise WebGL pour le rendu de carte interactive à partir de tuiles vectorielles et de styles Mapbox.