Si vous avez utilisé Google Maps, OpenStreetMap ou n'importe quelle carte web moderne au cours de la dernière décennie, chaque route et bâtiment que vous avez vu était probablement chargé sous forme de tuile vectorielle. Ce format est le héros discret de la cartographie web moderne. C'est lui qui permet aux cartes web de charger rapidement, d'être nettes sur n'importe quel écran, et de permettre aux designers de livrer de belles cartes stylisées sans re-rendre le monde entier pour chaque marque.
Ce guide explique ce qu'est une tuile vectorielle, comment elle fonctionne, pourquoi elle a remplacé les tuiles raster pour la plupart des usages, et comment MapAtlas les sert en production.
La définition en une phrase
Une tuile vectorielle est un petit fichier binaire contenant les entités géographiques d'une tuile de carte à un niveau de zoom spécifique, encodées sous forme de données plutôt que d'image pré-rendue.
La partie "données plutôt qu'image" est l'essentiel. Avec une tuile raster, le serveur a déjà décidé de l'apparence de chaque pixel. Avec une tuile vectorielle, le client reçoit la géométrie sous-jacente (lignes, polygones, points) et les étiquettes, puis les restitue à la volée dans le style choisi par l'utilisateur.
Comment les cartes web utilisent les tuiles
Chaque carte web que vous avez utilisée divise le monde en une grille de tuiles. Au zoom 0, le monde entier tient en une seule tuile. Au zoom 1 il y a 4 tuiles, au zoom 2 il y en a 16, et ainsi de suite. Chaque tuile est identifiée par trois nombres : zoom (z), colonne (x) et ligne (y). Lorsque vous déplacez ou zoomez, la bibliothèque cartographique récupère uniquement les tuiles visibles, les met en cache et supprime celles qui ont quitté la fenêtre.
Pour les tuiles raster, le serveur pré-rend un PNG pour chaque (z, x, y). Cela fonctionne mais présente des limites : le style est figé au moment du rendu, chaque changement de style implique de re-rendre le monde entier, et les images doivent être livrées en résolution 1x et 2x pour être nettes sur les écrans Retina.
Les tuiles vectorielles inversent le modèle. Le serveur envoie la géométrie. Le client effectue le rendu. Un seul tileset prend en charge un nombre illimité de styles, reste net à n'importe quel DPI et reste léger sur le réseau.
Le format MVT
Le format de facto est MVT, la spécification Mapbox Vector Tile. MVT est un encodage Protocol Buffers qui organise les entités en couches nommées, généralement :
transportation(routes, voies ferrées)buildings(empreintes de bâtiments)places(villes, communes, quartiers nommés)landuse(parcs, zones résidentielles, commerciales)water(océans, lacs, rivières)boundaries(zones administratives)
Chaque entité dans une couche possède une géométrie (point, ligne, polygone) et un ensemble d'attributs (nom, type, importance, variantes linguistiques). Les coordonnées de géométrie sont des entiers dans l'espace de coordonnées local à la tuile, allant de 0 à 4096, ce qui confère à MVT sa taille compacte.
MVT est entièrement ouvert, neutre vis-à-vis des fournisseurs et pris en charge par tous les principaux moteurs de rendu : Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, et les SDK Mapbox iOS et Android.
Pourquoi les tuiles vectorielles ont remplacé les tuiles raster
Il y a cinq raisons pour lesquelles les cartes web modernes utilisent presque universellement des tuiles vectorielles pour la couche de base :
Flexibilité de style. Avec un seul tileset, vous pouvez rendre un thème clair, un thème sombre, un style optimisé pour l'impression, un style superposé sur satellite et un style aux couleurs de votre marque. Sans aucun re-rendu côté serveur.
Net à n'importe quel DPI. Une tuile raster en 1x paraît floue sur un écran Retina. Une tuile vectorielle est rendue à la volée sur le client à la résolution native de l'appareil.
Charges utiles plus légères. Une tuile urbaine complexe est souvent plus petite en MVT que sous forme de PNG haute qualité, surtout une fois gzippée.
Interactivité à l'exécution. Vous pouvez surligner une route spécifique au survol, estomper les couches inutilisées, animer des transitions et répondre aux clics sur les entités car le client sait ce que représente chaque pixel.
Zoom et rotation fluides. La géométrie vectorielle pivote et se met à l'échelle sans crénelage. Les tuiles raster paraissent pixelisées lorsqu'on zoome entre des niveaux entiers ou qu'on les fait pivoter hors axe.
Le coût est le travail CPU et GPU du client, ce qui n'est pas un problème sur n'importe quel appareil fabriqué au cours de la dernière décennie.
Ce que vous stylisez à l'exécution
Un document de style (généralement un JSON dans la spécification Mapbox Style, également adoptée par MapLibre) décrit comment chaque couche doit être dessinée. Exemples de modifications sans toucher aux données de tuiles :
- La couleur de chaque classe de route
- La largeur des lignes de route, variable selon le zoom
- Quelles étiquettes de lieux apparaissent à quel zoom
- Police, taille et halo de chaque étiquette de texte
- Visibilité de couches entières (désactiver toutes les limites administratives en un clic)
- Remplissages à motifs, lignes en pointillés, dégradés, effets de flou
C'est ce qui rend les cartes de marque possibles. Une équipe design peut livrer un JSON de style Mapbox, un JSON de style MapLibre ou un preset de style MapAtlas, et le même tileset se rend dans l'identité visuelle de la marque.
Mise en cache et performances
Les tuiles vectorielles se mettent en cache de manière très efficace car la géométrie du monde ne change pas à chaque minute. Les caches CDN conservent généralement les tuiles MVT pendant des heures ou des jours. La bibliothèque cartographique pré-récupère les tuiles dans la direction de défilement probable de l'utilisateur et conserve en mémoire les tuiles récemment consultées. Il en résulte qu'un utilisateur se déplaçant sur une ville vit une expérience fluide, car les tuiles de la prochaine fenêtre sont généralement déjà chargées.
Les services de tuiles en production exposent généralement les tuiles à un chemin comme /{z}/{x}/{y}.pbf (PBF est l'extension binaire protobuf). Une connexion HTTP/2 ou HTTP/3 moderne multiplexe des dizaines de requêtes de tuiles en parallèle.
La place de MapAtlas
MapAtlas sert des tuiles vectorielles compatibles MVT pour le produit Dynamic Maps, avec un hébergement exclusivement en UE, une tarification prévisible et un schéma de tuiles conçu pour le stylage en aval et l'annotation IA. Les mêmes couches de données qui alimentent la carte visible (lieux, transport, bâtiments, points d'intérêt) sont également exposées sous forme de données structurées via les API Geocoding et Search, de sorte qu'un élément que vous voyez sur la carte peut être récupéré sous forme d'enregistrement JSON typé pour votre propre logique.
Pour une analyse approfondie de la couche de rendu, le guide de stylage de carte personnalisé couvre la manière de livrer un style de tuile vectorielle aligné sur votre marque de bout en bout.
Questions fréquemment posées
Qu'est-ce qu'une tuile vectorielle ?
Une tuile vectorielle est un petit fichier binaire contenant les entités géographiques (routes, bâtiments, points d'intérêt, étiquettes) d'une seule tuile de carte web à un niveau de zoom spécifique. Contrairement à une tuile raster, qui est une image PNG ou JPG pré-rendue, une tuile vectorielle contient la géométrie sous-jacente et les attributs sous forme de données. Le navigateur ou le client mobile restitue ces données en pixels au moment de l'exécution, ce qui signifie que la même tuile peut être stylisée différemment, pivotée et rendue à n'importe quelle densité de pixels sans perte de netteté.
Quelle est la différence entre une tuile vectorielle et une tuile raster ?
Une tuile raster est une image PNG ou JPG fixe, généralement de 256x256 ou 512x512 pixels, pré-rendue sur le serveur avec un style figé. Une tuile vectorielle est un fichier binaire contenant la géométrie et les attributs, rendu en pixels par le client. Les tuiles vectorielles sont plus légères sur le réseau, prennent en charge le re-stylage à l'exécution, restent nettes à n'importe quel zoom et DPI, et permettent d'activer ou de désactiver des couches sans nouveau téléchargement. La contrepartie est que le client doit effectuer le travail de rendu, ce qui est sans problème sur tout navigateur ou téléphone récent.
Qu'est-ce que le format MVT ?
MVT est la spécification Mapbox Vector Tile, le format de facto pour les tuiles vectorielles. C'est un encodage Protocol Buffers (protobuf) d'entités géographiques pour une seule tuile, organisées en couches nommées (ex. routes, bâtiments, lieux). Le format est ouvert, neutre vis-à-vis des fournisseurs et pris en charge par tous les renderers de cartes modernes (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas sert des tuiles compatibles MVT via son endpoint de cartes dynamiques.
Quelle est la taille des tuiles vectorielles ?
Une tuile vectorielle urbaine typique au zoom 14 pèse entre 50 Ko et 200 Ko sur le réseau, souvent compressée à 30-100 Ko après gzip. La taille dépend de la densité des données de la zone : une tuile couvrant le centre de Paris est plus lourde qu'une tuile couvrant l'Atlantique. La plupart des cartes en production permettent un défilement et un zoom fluides grâce à un cache agressif des tuiles, une prérécupération anticipée et un rendu sur le GPU.
