IGN WMTS

Copy

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getWidth} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {fromLonLat, get as getProjection} from 'ol/proj.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

var map = new Map({
  target: 'map',
  view: new View({
    zoom: 5,
    center: fromLonLat([5, 45])
  })
});

var resolutions = [];
var matrixIds = [];
var proj3857 = getProjection('EPSG:3857');
var maxResolution = getWidth(proj3857.getExtent()) / 256;

for (var i = 0; i < 18; i++) {
  matrixIds[i] = i.toString();
  resolutions[i] = maxResolution / Math.pow(2, i);
}

var tileGrid = new WMTSTileGrid({
  origin: [-20037508, 20037508],
  resolutions: resolutions,
  matrixIds: matrixIds
});

// For more information about the IGN API key see
// https://geoservices.ign.fr/blog/2017/06/28/geoportail_sans_compte.html

var ign_source = new WMTS({
  url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
  layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
  matrixSet: 'PM',
  format: 'image/jpeg',
  projection: 'EPSG:3857',
  tileGrid: tileGrid,
  style: 'normal',
  attributions: '<a href="http://www.geoportail.fr/" target="_blank">' +
        '<img src="https://api.ign.fr/geoportail/api/js/latest/' +
        'theme/geoportal/img/logo_gp.gif"></a>'
});

var ign = new TileLayer({
  source: ign_source
});

map.addLayer(ign);

<!DOCTYPE html>
<html>
  <head>
    <title>IGN WMTS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {getWidth} from 'ol/extent.js';
      import TileLayer from 'ol/layer/Tile.js';
      import {fromLonLat, get as getProjection} from 'ol/proj.js';
      import WMTS from 'ol/source/WMTS.js';
      import WMTSTileGrid from 'ol/tilegrid/WMTS.js';


      var map = new Map({
        target: 'map',
        view: new View({
          zoom: 5,
          center: fromLonLat([5, 45])
        })
      });

      var resolutions = [];
      var matrixIds = [];
      var proj3857 = getProjection('EPSG:3857');
      var maxResolution = getWidth(proj3857.getExtent()) / 256;

      for (var i = 0; i < 18; i++) {
        matrixIds[i] = i.toString();
        resolutions[i] = maxResolution / Math.pow(2, i);
      }

      var tileGrid = new WMTSTileGrid({
        origin: [-20037508, 20037508],
        resolutions: resolutions,
        matrixIds: matrixIds
      });

      // For more information about the IGN API key see
      // https://geoservices.ign.fr/blog/2017/06/28/geoportail_sans_compte.html

      var ign_source = new WMTS({
        url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
        layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
        matrixSet: 'PM',
        format: 'image/jpeg',
        projection: 'EPSG:3857',
        tileGrid: tileGrid,
        style: 'normal',
        attributions: '<a href="http://www.geoportail.fr/" target="_blank">' +
              '<img src="https://api.ign.fr/geoportail/api/js/latest/' +
              'theme/geoportal/img/logo_gp.gif"></a>'
      });

      var ign = new TileLayer({
        source: ign_source
      });

      map.addLayer(ign);
    </script>
  </body>
</html>