2

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?

1 Answer 1

3

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.