IGN

Géoservices IGN

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

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 3. L’adjonction de l’extension Géoportail pour OpenLayers 3 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 3

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 3

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({
        view: new ol.View({ ... }),
        layers: [
            new ol.layer.Tile({
                source : new ol.source.WMTS({
                    url: "https://wxs.ign.fr/CLEF/geoportal/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 :