Contenu de l'article

Tuiles vectorielles

Les tuiles vectorielles sont une 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 à la place d'une image, elles contiennent des données permettant de décrire les éléments qui la composent avec des tracés vectoriels. Au lieu d'avoir des ensembles de pixels, il y a 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 deux côtés : à bande passante équivalente, un serveur peut servir plus de clients en simultané et, côté 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 affichée 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 beaux, surtout si le client possède un GPU.

Inconvénients

  • Le rendu peut être légèrement plus coûteux côté 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 d'en savoir 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.