WebMapping 3D : définition et introduction à CesiumJS

Le WebMapping 3D est la cartographie de données spatiales dans un environnement tridimensionnel, généralement dans un navigateur Web. Cette technologie permet aux utilisateurs de visualiser et d’interagir avec les données géographiques de manière plus immersive et réaliste que les cartes 2D traditionnelles. Alors, Comment faire une Map 3D en ligne?

• Technologies utilisées pour la cartographie Web 3D
• WebMapping 3D : Données SIG prises en charge
• CesiumJS : une librairie JavaScript open source de WebMapping 3D
  • Présentation de CesiumJS
  • Utilisation de CesiumJS pour la cartographie Web 3D

Technologies utilisées pour la cartographie Web 3D

La cartographie dans un environnement tridimensionnel en ligne se base sur des moteurs de rendu 3D. L’API JavaScript WebGL garantit l’affichage des graphiques 2D et 3D dans les navigateurs Web. D’autres frameworks comme Three.js et Babylon.js fournissent des fonctionnalités de niveau supérieur pour travailler avec des graphiques 3D dans le navigateur.

Les bibliothèques géospatiales open source utilisées pour créer des cartographies 3D interactives sont :

• CesiumJS;
• iTowns basé sur Three.js;
• Giro3D basé sur Three.js;
• Mapbox GL JS, open source jusqu’à un certain nombre de requêtes.

Ainsi, HTML, CSS et JavaScript sont les technologies fondamentales utilisées afin de créer des interfaces cartographiques 3D en ligne. Les frameworks et les librairies JavaScript sont utilisés pour fournir des fonctionnalités supplémentaires.

WebMapping 3D : Données SIG prises en charge

Les données géographiques représentées sur une interface cartographique 3D sont diverses et variées. L’environnement tridimensionnel présente de réels avantages pour la représentation des modèles d’élévation, des modèles de bâtiments 3D (BIM, acronyme de Building Information Modeling) et des nuages de points. Puis, les données vectorielles et les protocoles HTTP WM(T)S et WFS sont également pris en charge par les API de WebMapping 3D. Ainsi, on peut extruder une information d’un objet géographique d’un vecteur comme la hauteur de bâtiments.

Le rendu de scènes 3D complexes sur le Web peut demander des ressources informatiques importantes. Par conséquent, des techniques d’optimisation des performances telles que le rendu du niveau de détail, l’élimination et la compression de texture sont nécessaires pour garantir des performances fluides.

Les formats de données pris en charge pour la cartographie Web 3D sont nombreux. On peut citer :

• pour les vecteurs : le format GeoJSON, le KML (Keyhole Markup Language), le GPX (GPS eXchange Format);
• les protocoles HTTP tels le WMS (Web Map Service), le TMS (Tile Map Service);
• et, le format glTF (GL Transmission Format) pour les modèles 3D;
• le format de données LAS pour les données Lidar (figure 1);
• enfin, le format de données 3D Tiles, développé par Cesium en 2015 et standardisé par l’Open Geospatial Consortium (OGC) en 2019. Cette normalisation garantit l’interopérabilité entre les différents outils SIG. De nombreux logiciels SIG comme QGIS prennent désormais en charge les données géographiques 3D et notamment le format 3D Tiles.

CesiumJS : une librairie JavaScript open source de WebMapping 3D

Présentation de CesiumJS

CesiumJS est une librairie JavaScript open source pour le développement de cartographie dynamique 3D sur le web (figure 2). CesiumJS fait partie d’un ensemble d’environnement d’exécution Cesium dans lequel on trouve par exemple Cesium pour Unreal. La bibliothèque favorise l’analyse et la visualisation des données géographiques à l’échelle du globe. De plus, elle intègre la dimension temporelle pour l’analyse évolutive des données spatialisées. Enfin, CesiumJS prend en charge de nombreuses sources de données provenant de différentes thématiques comme l’urbanisme, l’industrie, le secteur aérospatial, etc.

CesiumJS peut être intégré à d’autres bibliothèques et frameworks JavaScript, tels que jQuery, AngularJS, React et Vue.js, pour créer des applications Web plus complexes. La librairie JavaScript fonctionne sur différents navigateurs Web, y compris les appareils de bureau et mobiles.

Documentation de l’API JavaScript

La documentation de CesiumJS présente les différentes classes et méthodes associées pour le développement des cartographies 3D.

Tutoriels et exemples de WebMapping 3D

Cesium met à disposition de nombreux tutoriels qui exploitent les principales fonctionnalités de l’API CesiumJS. Des exemples de code sont répertoriés sur le sandcastle : https://sandcastle.cesium.com/.

Aide et forum

La communauté d’utilisateurs augmente au fil des années. Cela favorise la discussion et un support sur les problématiques de développements rencontrés. Enfin, un forum sur le site de Cesium est mis à disposition des utilisateurs : https://community.cesium.com/ .

Utilisation de CesiumJS pour la cartographie Web 3D

CesiumJS et la SDK Cesium Ion

L’API CesiumJS est open source mais ses fonctionnalités sont largement étendues grâce au SDK (Software Development Kit) Cesium Ion. Cette bibliothèque comprend des outils d’analyse 3D supplémentaires optimisés et des widgets comme des fonds de carte et le géocodage d’adresses. Pour utiliser le SDK, Cesium Ion met à disposition une plateforme afin de générer un Token.

Cette plateforme permet également l’hébergement, la transformation, la gestion et la diffusion de données géographiques 3D librement jusqu’à une certaine limite de ressources stockées. Il est ainsi possible d’uploader ses données sur son espace membre et de les convertir en tuiles 3D (3D tiles en anglais) par l’outil pipeline 3D. Ces données tuilées sont diffusées et accessibles via un identifiant (asset ID) ou directement téléchargeables. Une cartographie dynamique ainsi qu’un lien vers le sandcastle garantissent la visualisation des jeux de données spatialisées. Plusieurs logiciels 3D comme Blender, SketchUp, FME intègrent les productions d’objets 3D sur la plateforme Cesium Ion.

Installation de CesiumJs

L’installation de CesiumJS est possible sur différents serveurs HTTP comme le serveur NodeJS avec le bundle WebPack et le serveur web Apache. Un guide d’installation rapide de CesiumJS est disponible sur le site de Cesium.

Premier script avec CesiumJS

Ce script nécessite la génération d’un Token associé à Cesium Ion.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <link href="./CesiumUnminified/Widgets/widgets.css" rel="stylesheet">
        <style>
            html, body, #cesiumContainer {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                padding-top:0;
                overflow: hidden;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
    </body>
    <script src="./CesiumUnminified/Cesium.js"></script>
    <script>
        Cesium.Ion.defaultAccessToken = 'Token Cesium Ion';
        const viewer = new Cesium.Viewer('cesiumContainer'); 
        viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(7.14, 43.55, 5000),
        });
    </script>
</html>

CesiumJS sans Cesium Ion

Il est possible d’utiliser CesiumJS sans le token de Cesium Ion. Pour cela, il est nécessaire de désactiver tous les appels des sources de données de la plateforme Cesium Ion, c’est-à-dire les widgets des fonds de carte baseLayerPicker et du géocodage geocoder.

CesiumJs permet d’appeler ses propres sources de données images issues par exemple de protocole HTTP WM(T)S. L’API met à disposition un fond de carte NaturalEarthII via le répertoire Assets.

Voici un exemple d’utilisation offline :

        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(
                Cesium.TileMapServiceImageryProvider.fromUrl(
                    Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
                )
            ),
            baseLayerPicker: false,
            geocoder: false,
        });

En conclusion, le WebMapping 3D ouvre de nouvelles possibilités de visualisation de données géographiques sur des cartographies dynamiques dans un environnement tridimensionnel. Ainsi, la cartographie 3D offre une expérience plus immersive et interactive aux utilisateurs. Parmi les API JavaScript de WebMapping 3D, CesiumJS est un outil puissant pour créer des interfaces cartographiques 3D en ligne. Puis, cette librairie prend en charge un large éventail de formats de données géographiques comme le 3D Tiles. Enfin, l’affichage de données spatialisées est possible pour de nombreuses thématiques comme l’urbanisme, le BTP, l’environnement, la météorologie, l’aéronautique, etc.