IGN

Géoservices IGN

OpenLayers 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 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.

Prérequis

Réalisation

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 :

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
        })
    });

ggmap_dataref1.png

wmts_caps

Résultat

On obtient donc au final le code suivant :

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" 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 :