This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### IGN WMTS

french 1 ign 1 geoportail 1 wmts 7 grid 8

#####

Demonstrates displaying IGN (France) WMTS layers.

In this example an IGN WMTS layer is displayed. For more information on IGN's WMTS service see the IGN Géoportail API web page and Documentation de l’offre de données et services de l’IGN (french).

##### main.js

    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';

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

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

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

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

    const ign_source = new WMTS({
      url: 'https://data.geopf.fr/wmts',
      layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
      matrixSet: 'PM',
      format: 'image/png',
      projection: 'EPSG:3857',
      tileGrid: tileGrid,
      style: 'normal',
      attributions:
        '<a href="https://www.ign.fr/" target="_blank">' +
        '<img src="https://data.geopf.fr/annexes/ressources/logos/ign.gif" title="Institut national de l\'' +
        'information géographique et forestière" alt="IGN"></a>',
    });

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

    map.addLayer(ign);

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>IGN WMTS</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "wmts-ign",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }