À quoi sert deck.gl ?

deck.gl est un framework WebGL/WebGPU pour afficher de grands jeux de données géospatiales dans le navigateur - des millions de points, lignes, arcs, polygones ou maillages 3D - à l'aide de couches accélérées par GPU. Il est conçu pour des volumes de données et une interactivité qui dépassent ce que gèrent les bibliothèques à base de marqueurs.

Comment deck.gl s'interleave-t-il avec MapLibre ?

En utilisant MapboxOverlay en mode interleaved, deck.gl partage le contexte WebGL et la caméra de MapLibre, de sorte que les couches deck.gl s'affichent dans la même scène que le fond de carte et les couches vectorielles MapLibre, correctement ordonnées et synchronisées lors du déplacement, du zoom, de la rotation et de l'inclinaison.

Comment afficher efficacement des millions de points dans deck.gl ?

Fournissez des tableaux typés binaires plutôt que des objets GeoJSON, utilisez la prop data avec des accesseurs lisant depuis ces buffers, activez le tuilage (MVTLayer ou TileLayer) pour ne charger que les données visibles, et agrégez avec ScreenGridLayer, HexagonLayer ou HeatmapLayer lorsque les points individuels ne sont pas nécessaires.

Quand utiliser les 3D Tiles ou Cesium plutôt que deck.gl ?

Utilisez Cesium/3D Tiles pour le terrain à l'échelle du globe, les maillages de photogrammétrie, les nuages de points massifs ou un véritable contexte 3D ellipsoïdal. deck.gl gère bien les couches 3D à l'échelle de la ville ou de la région, mais Cesium est conçu spécifiquement pour diffuser du contenu 3D à l'échelle planétaire.

deck.gl pour les grandes couches géospatiales

Réponse courte

deck.gl est un framework WebGL (et de plus en plus WebGPU) pour dessiner de grands jeux de données géospatiales dans le navigateur en poussant la géométrie sur le GPU sous forme de buffers de tableaux typés. Là où les marqueurs Leaflet ou même les couches vectorielles MapLibre peinent à des dizaines de milliers d'entités, deck.gl affiche des millions de points, lignes, arcs ou polygones de façon interactive. Vous l'utilisez rarement seul : il s'interleave avec MapLibre via MapboxOverlay, de sorte que le fond de carte et les tuiles vectorielles ordinaires restent dans MapLibre tandis que deck.gl gère la couche lourde, personnalisée ou 3D. Le levier de performance est le format de données et le tuilage — buffers binaires et tuiles à la demande — bien plus que le choix de la classe de couche.

Le modèle deck.gl

deck.gl est basé sur des couches et réactif. Vous déclarez une liste d'instances de couches ; deck.gl les compare (diff) à chaque rendu et ne met à jour que ce qui a changé. Chaque couche est un programme GPU : elle téléverse vos données une fois sous forme de buffers d'attributs et les redessine à chaque frame depuis le GPU, ce qui explique pourquoi le déplacement/zoom reste fluide même avec d'énormes jeux de données.

Les couches principales que vous solliciterez pour le travail sur les données de la Terre :

ScatterplotLayer — points (sites d'échantillonnage, occurrences) avec rayon et couleur par entité.
PathLayer / LineLayer / ArcLayer — traversées, traces de forage, flux/connectivité.
PolygonLayer / GeoJsonLayer — polygones géologiques, bassins versants (GeoJsonLayer répartit vers des sous-couches point/ligne/polygone).
ColumnLayer / HexagonLayer / GridLayer — extrusions 3D et agrégation spatiale.
HeatmapLayer / ScreenGridLayer — densité lorsque les entités individuelles ne sont pas nécessaires.
MVTLayer — tuiles vectorielles, ne chargeant que la zone d'affichage courante.
TerrainLayer — un maillage à partir d'un MNT de terrain (encodé en RGB), pour le relief 3D.
PointCloudLayer — nuages de points de type LiDAR.

Les couches acceptent des accesseurs (getPosition, getFillColor, getRadius) qui peuvent être des constantes ou des fonctions lisant depuis vos données — et qui, surtout, peuvent lire directement depuis des buffers binaires.

Interleaving avec MapLibre

L'intégration mature est MapboxOverlay (fonctionne avec MapLibre GL JS) en mode interleaved :

import { MapboxOverlay } from '@deck.gl/mapbox';
import { ScatterplotLayer } from '@deck.gl/layers';

const overlay = new MapboxOverlay({
  interleaved: true,
  layers: [
    new ScatterplotLayer({
      id: 'samples',
      data: '/api/samples.bin',     // binaire, pas du GeoJSON
      getPosition: d => d.position,
      getRadius: 30,
      getFillColor: [200, 80, 40, 180],
    }),
  ],
});
map.addControl(overlay);   // map est une Map maplibre-gl

interleaved: true partage le contexte WebGL de MapLibre, de sorte que les couches deck.gl peuvent s'insérer entre les couches MapLibre (par ex. au-dessus du fond de remplissage mais sous les étiquettes) et respecter la profondeur pour la 3D. interleaved: false (superposé) dessine deck.gl dans un canvas séparé par-dessus — plus simple, mais incapable d'entrelacer par ordre z. Les deux partagent la caméra de MapLibre, de sorte que orientation/inclinaison/zoom restent synchronisés.

Le rendre rapide : format de données et tuilage

Les plus grands gains de performance se situent en amont du choix de la couche.

Utilisez du binaire, pas des objets GeoJSON. Analyser un GeoJSON de 200 Mo en objets JS est lent et gourmand en mémoire. Fournissez des tableaux typés (positions Float32, couleurs Uint8) via la forme data binaire, afin que deck.gl les téléverse sur le GPU sans itération JS par entité. @loaders.gl peut analyser Arrow/GeoParquet/FlatGeobuf dans cette forme.
Tuilez les grands jeux de données. Pour des données vectorielles à l'échelle continentale ou urbaine, affichez un MVTLayer afin que seules les tuiles dans la vue (et au zoom courant) soient récupérées et dessinées — associez-le au même point de terminaison PostGIS ST_AsMVT qu'utiliserait une carte MapLibre. Pour les rasters, TileLayer charge les tuiles d'image à la demande.
Agrégez lorsque vous n'avez pas besoin de chaque entité. Un million de points en points individuels est du bruit visuel et une charge GPU ; HexagonLayer, ScreenGridLayer ou HeatmapLayer les répartissent dans une surface de densité lisible et dessinent bien moins de géométrie.
Limitez le brassage de mises à jour. deck.gl re-téléverse un buffer quand la référence data change. Maintenez les références de données stables et utilisez updateTriggers pour n'invalider que l'accesseur qui a réellement changé, plutôt que de recréer tout le jeu de données à chaque rendu.

Exemple concret : une couche géochimique d'un million de points

Objectif : une carte interactive d'environ 1,2 M d'échantillons de géochimie des sols colorés par une valeur d'élément, sur un fond de carte MapLibre.

Préparez les données pour le web. Reprojetez en lon/lat (EPSG:4326), supprimez les colonnes inutilisées, et exportez en GeoParquet ou en binaire compacté. Pré-calculez la valeur pilotant la couleur pour que le navigateur n'ait pas à le faire.
Décidez : points ou densité. Au dézoom, 1,2 M de points se superposent inutilement — utilisez une HexagonLayer (valeur moyenne agrégée par hexbin) pour la vue d'ensemble et basculez vers une ScatterplotLayer alimentée par une MVTLayer lorsque l'utilisateur dépasse, disons, z12.
Liez la couleur aux données via une échelle de couleurs quantifiée dans getFillColor, avec les seuils documentés dans la légende.
Gardez l'incertitude visible. Encodez distinctement les échantillons à la limite de détection ou sous la LOD (par ex. symboles creux), et exposez la valeur, les unités et la date d'échantillonnage dans l'info-bulle — ne laissez pas un dégradé lisse impliquer une fausse précision.
Testez avec les 1,2 M complets, pas un échantillon de 1 k, sur un ordinateur portable de milieu de gamme. Les problèmes de performance n'apparaissent qu'au volume réel.

Quand aller au-delà de deck.gl

3D à l'échelle du globe / de la planète, maillages en streaming, énormes nuages de points : Cesium avec les 3D Tiles est conçu spécifiquement pour diffuser de la photogrammétrie, du BIM et du LiDAR massif sur un globe ellipsoïdal. deck.gl fait bien la 3D à l'échelle de la ville ou de la région mais n'est pas un moteur de streaming de 3D-tiles (bien que deck.gl puisse consommer des 3D Tiles via Tile3DLayer dans de nombreux cas).
Cartes simples : si le jeu de données est petit, de simples couches vectorielles MapLibre ou même Leaflet représentent moins de machinerie.
Stylisation/étiquetage cartographique lourd : la spécification de style et le moteur d'étiquettes de MapLibre sont plus puissants que la gestion du texte de deck.gl.

Pièges courants et leurs causes

Fournir du GeoJSON brut à grande échelle. Le coût est l'analyse JSON et le JS par entité, pas le rendu GPU. Un grand GeoJSON gèle le thread principal ; les buffers binaires et le tuilage l'évitent.
Tout charger, puis filtrer côté client. Sans tuilage, le navigateur télécharge et conserve tout le jeu de données. Utilisez MVTLayer/TileLayer pour que la zone d'affichage pilote le chargement.
Superposé alors qu'il fallait interleaved (ou inversement). Le mode superposé ne peut pas ordonner en z deck.gl entre les couches MapLibre et casse la profondeur 3D par rapport au terrain ; l'interleaving corrige l'ordre mais partage les contraintes de contexte.
La 3D pour la 3D. L'inclinaison et l'extrusion impressionnent mais nuisent souvent à la comparaison et à la lecture quantitative. N'ajoutez la 3D que lorsque l'altitude ou la hauteur est le message.
Cacher l'incertitude derrière un dégradé. Une carte de chaleur GPU soignée implique une précision que les données n'ont peut-être pas ; gardez la source, les unités et la confiance dans les info-bulles et les notes.

AQ et validation

Confirmez que les coordonnées sont en lon/lat (EPSG:4326) avant le tuilage/téléversement ; un mauvais SCR déplace tout silencieusement.
Vérifiez que les couches d'agrégation (hexbin/grille) rapportent la statistique que vous visez (moyenne vs somme vs comptage) et que les cases vides sont gérées.
Testez sur du matériel représentatif au volume complet de données et surveillez le temps de frame et la mémoire.
Vérifiez que les info-bulles exposent la source, la valeur, les unités et la date ; confirmez que les seuils de légende correspondent à l'accesseur de couleur.

Le point de vue Bathyl

Nous utilisons deck.gl pour garder de grandes couches de données de la Terre inspectables dans le navigateur sans les appauvrir : données binaires et tuilées sur un fond de carte MapLibre, agrégation aux petites échelles et plein détail au zoom, et incertitude maintenue visible dans les info-bulles et les légendes. La bibliothèque front-end représente les 10 derniers pour cent — le travail réside dans la stratégie de données de tuilage, de formatage et d'encodage honnête qui la sous-tend.