documentation

Ce tutoriel a pour objectif de montrer à l’utilisateur comment afficher les données de référence de l’IGN (cartes IGN, photographies aériennes, parcelles cadastrales,…) dans une fenêtre cartographique en utilisant la bibliothèque javascript OpenSource CesiumJS qui permet de mettre en oeuvre un globe virtuel 3D.

• Disposer d’une clef d’accès au Géoportail pour pouvoir afficher les données du Géoportail
• Disposer d’une version récente de la bibliothèque CesiumJS.

Le tutoriel suivant a été réalisé avec la version 1.29 de CesiumJS.

 Code minimal pour afficher un globe avec CesiumJS

On utilise l’objet Cesium.Viewer :

• associé à un élément html de la page
• sur lequel on va plaquer des images issues d’un « imageryProvider »
• dont le MNT sera fourni par un « terrainProvider »

var viewer = new Cesium.Viewer(
    ‘viewerDiv’,
    {
        imageryProvider: ..., // source de données images
        terrainProvider: ... // source de MNT
    }
);

Code pour afficher une couche tuilée avec CesiumJS

L’imageryProvider utilisé est un Cesium.WebMapTileServiceImageryProvider qui s’appuie sur un « tilingScheme » qui peut être soit un WebMercatorTilingScheme (basé sur la projection EPSG:3857), soit un GeographicTilingScheme (basé sur EPSG:4326)

var viewer = new Cesium.Viewer(
    ‘viewerDiv’,
    {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url : 'url du WMTS',
            layer : 'nom de la couche',
            style : 'normal',
            format : 'format de l'image retournée,
            tileMatrixSetID : 'nom de la pyramide d'images,
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            tileMatrixLabels: [...],
        }),
        terrainProvider: ... ,
        baseLayerPicker : false
    }
);

 Code à ajouter pour afficher une couche Géoportail WMTS

Il suffit de remplir l’objet Cesium.Viewer de cette façon :

var viewer = new Cesium.Viewer(
  "cesiumContainer",
  {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url : 'https://wxs.ign.fr/cartes/geoportail/wmts',
            layer : 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
            style : 'normal',
            format : 'image/png',
            tileMatrixSetID : 'PM'
        }),
        baseLayerPicker : false
    }
);

où :

•  cartes est une clé partagée
• Les valeurs des paramètres layer, style, format et tileMatrixSetID sont renseignées à partir des informations lues dans le document de réponse à la requête GetCapabilities concernant la couche que l’on souhaite afficher, comme indiqué ci-dessous :

NB :

1. le tilingScheme appliqué par défaut est le Cesium.WebMercatorTilingScheme qui implémente le tuilage WMTS WebMercator standard du Géoportail (indiqué par le paramètre TILEMATRIXSET=PM). On n’a donc pas besoin de préciser les paramètres relatifs à cette pyramide.

2. CesiumJS n’est pas capable de lire le MNT Géoportail servi en WMTS. Pour obtenir du relief dans cet exemple, nous avons du utiliser un CesiumTerrainProvider fourni par la société AGI.

 Résultat

On obtient donc au final le code suivant :

Vous pouvez essayer le code ci-dessus sur cet outil bac à sable de Césium