Ce tutoriel est le premier d'une nouvelle série visant à présenter les possibilités du framework deck.gl. Il est décrit comme un framework basé sur WebGL pour l'exploration et l'analyse de large ensembles de données. Il permet d'obtenir rapidement des résultats visuels impressionnants avec un minimum d'effort en composant des couches existantes ou en tirant parti de l'architecture extensible de deck.gl pour répondre à des besoins personnalisés. Deck.gl mappe les données (généralement un tableau d'objets JSON) dans une pile de couches visuelles - par ex. icônes, polygones, textes... Deck.gl gère un certain nombre de défis prêts à l'emploi :
L'exemple ci-dessus qui n'est pas aussi impressionnant que cette brève description représente une carte construite avec Deck.gl sans layer particulier. Les contrôles suivant sont disponibles par défaut :
Voici le code HTML complet qui permet de réaliser l'import des librairies et la construction d'une carte vide. Contrairement à cette page, elle s'affiche sur toute la hauteur et la largeur de l'écran.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta charset="UTF-8">
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.js"></script>
</head>
<style>
html, body { height: 100% }
#map {width: 100%; height: 100%;}
</style>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
<script type="text/javascript">
function initialize() {
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
initialViewState: {
longitude: 1.4157,
latitude: 46.2324,
zoom: 5,
minZoom: 3,
maxZoom: 15,
pitch: 45,
bearing: 0
},
controller: true
});
}
</script>
Nous importons la dernière version de la librairie deck.gl. Le code importe également la librarie Mapbox GL JS dans
sa version 1.13.2. A partir de la version 2 il faut utiliser une clé pour disposer de la librairie, cette clé permet une utilisation gratuite dans une certaine limite (voir ici).
Il est possible d'utiliser d'autres librairies comme Leaflet par exemple mais l'intégration avec Mapbox GL JS offre plus de possibilités. Pour bien comprendre il faut avoir en tête que deck.gl fonctionne selon deux modes d'intégration :
La couche provenant de deck.gl est rendu sur la carte de base en tant qu'élément DOM séparé. La caméra de deck.gl et la caméra de la carte de base sont synchronisées afin qu'elles effectuent un panoramique/zoom ensemble. C'est l'option la plus robuste puisque les deux bibliothèques gèrent leurs rendus indépendamment l'une de l'autre. Il suffit généralement que la carte de base soit en 2D.
Deck.gl s'affiche dans le contexte WebGL de la carte de base. Cela permet une occlusion entre les couches deck.gl et les étiquettes et/ou les entités 3D de la carte de base. La disponibilité de cette option dépend du fait que la solution de carte de base expose ou non certaines API de développeur et peut soumettre l'utilisateur à des bogues/limitations associés à ces API.
En faisant le choix d'utiliser Mapbox GL JS nous changeons de technologies pour la gestion du fond de carte. Dans nos précédents tutoriaux sur Google Maps ou Leaflet le fond de carte est chargé sous la forme de Tiles qui sont des images au format PNG. Ils correspondent à la position et au niveau de zoom que l'on affiche sur une carte. Avec Mapbox GL JS on charge des Vector Map au format MVT (Mapbox Vector Tiles). Sans entrer dans le détails de ce format sachez qu'il s'agit de fichiers binaires dont la taille est inférieure aux Tiles au format PNG permettant ainsi des chargements et interactions plus rapide. Mais le plus intéressant vient du fait que ce format ne définit pas le style de la carte (sombre ou clair par exemple) qui est déporté dans un fichier JSON. Prenez le temps d'ouvrir le fichier passer en paramètre à la construction de la carte pour avoir une idée de ce qu'il peut offrir : https://basemaps.cartocdn.com/gl/positron-gl-style/style.json. Cela rend possible le changement de style en temps réel sans avoir à recharger le fond de carte.
Nous avons choisi de faire du pure javascript comme dans les autres tutoriaux. Sachez cependant que deck.gl fonctionne très bien avec ReactJS et que beaucoup d'exemples de leur site utilisent ce framework. Ce premier code est assez simple et le nom des différents
paramètres suffit à comprendre leur utilité. L'attribut initialViewState fournit toutes les informations pour paramétrer la caméra. Comme nous travaillons en 3D il faut fournir plus d'informations que des coordonnées et un niveau de zoom.
pitch : il représente l'angle de rotation de la caméra qui observe la scène. Avec la valeur 0° la caméra regarde à la vertical la scène et cela revient donc aux cartes 2D classiques des autres tutoriaux. A 90° la caméra est sensé être au ras
du sol mais ce n'est pas ce que l'on observe, il y a peut-être une limitation liée au niveau de zoom ou à une autre configuration que nous n'avons pas modifiée. Par défaut à 0.bearing : il représente la rotation de la carte par rapport au nord, en degrés dans le sens antihoraire (0° signifie que le nord est vers le haut). Par défaut à 0const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
initialViewState: {
longitude: 1.4157,
latitude: 46.2324,
zoom: 5,
minZoom: 3,
maxZoom: 15,
pitch: 45,
bearing: 0
},
controller: true
});Notez enfin que le paramètre controller, qui est un booléen, indique si l'utilisateur peut utiliser les contrôles sur la carte (zoom, déplacement...). Il existe de nombreux autres paramètres que l'on peut passer au constructeur et nous les verrons dans les futurs tutoriaux.
Ce premier tutoriel sur le framework deck.gl vise principalement à poser les bases de travail avec ce framework et les libraries annexes que nous avons retenues. N'hésitez pas à utiliser la section commentaires pour toute question à ce sujet.
COMMENTAIRES