IGN

Géoservices IGN

CesiumJS et Géoportail

Dernière mise à jour : 6 Mars 2017

Table des matières

Objectifs

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.

Prérequis

Réalisation

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

Code minimal pour afficher un globe avec Cesium JS

On utilise l’objet Cesium.Viewer :

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

Code pour afficher une couche tuilée avec Cesium JS

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(
    ‘viewerDiv’,
    {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url : 'http://wxs.ign.fr/CLEF/geoportail/wmts',
            layer : 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
            style : 'normal',
            format : 'image/jpeg',
            tileMatrixSetID : 'PM'
        }),
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : 'https://assets.agi.com/stk-terrain/world',
            requestVertexNormals : true
        }),
        baseLayerPicker : false
    }
);

où :

ggmap_dataref1.png

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 :

<link rel="stylesheet" href="/js/Cesium/Widgets/widgets.css" />
<style type="text/css">
    div#viewerDiv {
        width:100%;
        height:500px;
    }
</style>
<script type="text/javascript" src="/js/Cesium/Cesium.js"><!-- --></script>
<div id="viewerDiv"></div>
<script type="text/javascript">
    // setting initial view center
    var west = -10.0;
    var south = 38.0;
    var east = 10.0;
    var north = 53.0;
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(west, south, east, north);

    var viewer = new Cesium.Viewer('viewerDiv', {
        imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
            url : 'http://wxs.ign.fr/ld0jgrlpaway88fw6u4x3h38/geoportail/wmts',
            layer : 'ORTHOIMAGERY.ORTHOPHOTOS',
            style : 'normal',
            format : 'image/jpeg',
            tileMatrixSetID : 'PM',
            credit : new Cesium.Credit("IGN", "http://wxs.ign.fr/static/logos/IGN/IGN.gif", "http://www.ign.fr/")
        }),
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : 'https://assets.agi.com/stk-terrain/world',
            requestVertexNormals : true
        }),
        baseLayerPicker : false,
        timeline : false,
        geocoder : false,
        scene3DOnly: true
    });
</script>

Qui permet d’afficher le globe suivant :