Display ESRI MapService (WMTS) with EPSG:28992 coordinate system in OpenLayers web map with OpenStreetMap base layer

Question

ESRI MapService https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1870/MapServer have EPSG:28992 coordinate system. In QGIS I can add this layer via WMTS https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1870/MapServer/WMTS (layer: Historische_tijdreis_1870, format: image/jpgpng, tileset: default028mm, crs: EPSG:28992). How I can display this layer in OpenLayers (6) web map?

Answer 1

here's a solution using proj4js:

Demo

I put some transparency to check the alignment, you can remove it in the options of the WMTS layer (set opacity to 1).

Code :

     var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([6, 51]),
          zoom: 6
        })
      });

var url = 'http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1870/MapServer/WMTS';


proj4.defs("EPSG:28992","+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs");
var projection = new ol.proj.get('EPSG:28992');
ol.proj.get('EPSG:28992').setExtent([12628.0541, 308179.0423, 283594.4779, 611063.1429]);
var resolutions = [3251.206502413005, 1625.6032512065026, 812.8016256032513, 406.40081280162565, 203.20040640081282, 101.60020320040641, 50.800101600203206, 25.400050800101603, 12.700025400050801, 6.350012700025401, 3.1750063500127004, 1.5875031750063502, 0.7937515875031751, 0.39687579375158755, 0.19843789687579377, 0.09921894843789689, 0.04960947421894844]
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
  // generate matrixIds array
  matrixIds[z] = z;
}


 var wmtslayer = new ol.layer.Tile({
    opacity: 0.7, 
    source: new ol.source.WMTS({
        url: url,
        layer: 'Historische_tijdreis_1870',
        matrixSet: 'default028mm',
        format: 'image/jpgpng',
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
          origin: [-3.05155E7, 3.1112399999999993E7],
          resolutions: resolutions,
          matrixIds: matrixIds
        }),
        style: 'default',
      })
    })

  wmtslayer.setMap(map)