1. ACCUEIL
  2. DOCUMENTATION
  3. Services
  4. Utilisation Web
  5. Affichage WMTS
  6. OpenLayers et WMTS
Menu

documentation

Menu

OpenLayers et WMTS

Dernière mise à jour : 9 avril 2024
Contenu

Titre
Objectifs

Texte

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 cartographique javascript OpenSource OpenLayers.

NB : la démarche proposée ici permet de mettre en oeuvre un affichage de base pour les données IGN servies en WMTS WebMercator directement avec OpenLayers. L’adjonction de l’extension Géoportail pour OpenLayers permettra de bénéficier de l’ensemble des services du Géoportail avec cette bibliothèque.

Titre
Prérequis

Texte
  • Disposer d’une version récente de la bibliothèque OpenLayers.
  • (Disposer d’une clef d’accès Géoplateforme pour pouvoir afficher les données non libres du Géoportail.)

Titre
Réalisation

Texte

Le tutoriel suivant a été réalisé avec la version 3.20.1 d’OpenLayers.

 Code minimal pour afficher une carte avec OpenLayers

On utilise l’objet ol.Map :

  • associé à un élément html de la page (“target”)
  • composé de couches cartographiques (“layers”)
  • associé à une vue (“view”) qui définit le point de vue (centre, zoom, …)
  • comportant des outils d’interaction avec la carte (“interactions”)
var map = new ol.Map({
		view: new ol.View({
			center: [0, 0],
			zoom: 1
		}),
		layers: [
			// ici on rajoute des couches, instances de ol.layer
		],
		target: "viewerDiv", // id de l"élément HTML
		view: new ol.View({
	    center: [260516,6246918],
	    zoom: 10
	  })
	});

 Code pour afficher une couche tuilée avec OpenLayers

On utilise l”objet ol.layer.Tile (« couche tuilée ») qui utilise une « source » de données de type WMTS (classe ol.source.WMTS) dont la pyramide est définie via la classe ol.tilegrid.WMTS.

var map = new ol.Map({
    view: new ol.View({ ... }),
    layers: [
        new ol.layer.Tile({
            source : new ol.source.WMTS({
                url: "url du wmts"
                layer: "nom de la couche"
                matrixSet: "nom de la pyramide d'images"
                format: "format de l'image retournée",
                style: "normal",
                tileGrid : new ol.tilegrid.WMTS({
                    origin: [...],
                    // topLeftCorner
                    resolutions: [...], // résolutions
                    matrixIds: [...]
                    // ids des TileMatrix
                })
            })
        })
    ],
    target: "viewerDiv", // id de l"élément HTML
    view: new ol.View({
    center: [260516,6246918],
    zoom: 10
  })
});

 Code à ajouter pour afficher une couche IGN

Il suffit de remplir l’objet ol.Map de cette façon :

var resolutions = [
    156543.03392804103,
    78271.5169640205,
    39135.75848201024,
    19567.879241005125,
    9783.939620502562,
    4891.969810251281,
    2445.9849051256406,
    1222.9924525628203,
    611.4962262814101,
    305.74811314070485,
    152.87405657035254,
    76.43702828517625,
    38.218514142588134,
    19.109257071294063,
    9.554628535647034,
    4.777314267823517,
    2.3886571339117584,
    1.1943285669558792,
    0.5971642834779396,
    0.29858214173896974,
    0.14929107086948493,
    0.07464553543474241
] ;

var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source : new ol.source.WMTS({
                    url: "https://wxs.ign.fr/CLEF/geoportail/wmts",
                    layer: "ORTHOIMAGERY.ORTHOPHOTOS",
                    matrixSet: "PM",
                    format: "image/jpeg",
                    style: "normal",
                    tileGrid : new ol.tilegrid.WMTS({
                        origin: [-20037508,20037508], // topLeftCorner
                        resolutions: resolutions, // résolutions
                        matrixIds: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"] // ids des TileMatrix
                    })
                })
            })
        ],
        target: "viewerDiv", // id de l"élément HTML
        view: new ol.View({
            center: [260516,6246918],
            zoom: 10
        })
    });
  •  CLEF est à remplacer par votre clef d’accès à la plateforme Géoportail
  • Les valeurs des paramètres layer, style, format et matrixSet 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 :

  • les valeurs des paramètres origin et matrixIds sont renseignées à partir des informations lues dans le document de réponse à la requête GetCapabilities concernant la définition de la pyramide (balise <TileMatrixSet>)) dont un exemple est disponible ci-dessous :

Résultat

On obtient donc au final le code suivant :

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" target="_blank" type="text/css">
<style type="text/css">
   div#viewerDiv {
       width:100%;
       height:500px;
   }
</style>
<script type="text/javascript" src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="viewerDiv"></div>
<script type="text/javascript">
var projection = ol.proj.get('EPSG:3857');
var resolutions = [
        156543.03392804103,
        78271.5169640205,
        39135.75848201024,
        19567.879241005125,
        9783.939620502562,
        4891.969810251281,
        2445.9849051256406,
        1222.9924525628203,
        611.4962262814101,
        305.74811314070485,
        152.87405657035254,
        76.43702828517625,
        38.218514142588134,
        19.109257071294063,
        9.554628535647034,
        4.777314267823517,
        2.3886571339117584,
        1.1943285669558792,
        0.5971642834779396,
        0.29858214173896974,
        0.14929107086948493,
        0.07464553543474241
] ;

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.WMTS({
        attributions: ["IGN-F/Géoportail"],
        url:'https://wxs.ign.fr/CLEF/geoportail/wmts',
        layer:'ORTHOIMAGERY.ORTHOPHOTOS',
        matrixSet: 'PM',
        format: 'image/jpeg',
        tileGrid: new ol.tilegrid.WMTS({
            origin: [-20037508,20037508],
            resolutions: resolutions,
            matrixIds:["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
        }),
        style: 'normal'
      })
    })
  ],
  target: 'viewerDiv',
  view: new ol.View({
    center: [260516,6246918],
    zoom: 10
  })
});
</script>

Qui permet d’afficher la carte suivante :

Titre
Rendu

Texte