How to add WMTS Layer to Openlayers map

Question

I'm trying to show WMTS layer on openlayers map, but when i change "EPSG:3857" to "EPSG:5514" map doesnt work. I'm using WMTS from OpenLayers Examples and I want to show MapServer (GeomorfologickeJednotky).

Here is my Codepen https://codepen.io/Seuss/pen/OGqxoO

(window.webpackJsonp = window.webpackJsonp || []).push([
  [155], {
    380: function(e, r, t) {
      "use strict";
      t.r(r);
      for (var a = t(3), i = t(2), s = t(1), n = t(6), o = t(5), c = t(12), p = t(102), w = t(147), g = Object(o.g)("EPSG:3857"), l = g.getExtent(), u = Object(s.E)(l) / 256, m = new Array(14), y = new Array(14), S = 0; S < 14; ++S) m[S] = u / Math.pow(2, S), y[S] = S;
      new a.a({
        layers: [new n.a({
          source: new c.b,
          opacity: .7
        }), new n.a({
          opacity: .7,
          source: new p.a({
            attributions: 'Tiles © <a href="https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer">ArcGIS</a>',
            url: "http://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer/WMTS/",
            layer: "0",
            matrixSet: "EPSG:3857",
            format: "image/png",
            projection: g,
            tileGrid: new w.b({
              origin: Object(s.C)(l),
              resolutions: m,
              matrixIds: y
            }),
            style: "default",
            wrapX: !0
          })
        })],
        target: "map",
        view: new i.a({
          center: [1678982, 5913697],
          zoom: 6
        })
      })
    }
  },
  [
    [380, 0]
  ]
]);
//# sourceMappingURL=wmts.js.map

Answer 1

A EPSG:5514 WMTS will use a non-standard tile grid so you cannot simply change the projection. Also minified code is difficult to understand and you should avoid using it to make changes. The easiest way to set it up your WMTS is by parsing the capabilities. EPSG:5514 seems to be the only projection the service supports and must be defined and registered for proj4. If the view is in a different projection the WMTS will be reprojected by the client.

 proj4.defs("EPSG:5514","+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=589,76,480,0,0,0,0 +units=m +no_defs"); ol.proj.proj4.register(proj4); var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer/WMTS'; var parser = new ol.format.WMTSCapabilities(); fetch(url).then(function(response) { return response.text(); }).then(function(text) { var result = parser.read(text); var options = ol.source.WMTS.optionsFromCapabilities(result, { layer: 'GeomorfologickeJednotky' }); var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: new ol.source.WMTS(options), opacity: 0.5 }) ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([15, 50]), zoom: 7 }) }); }); 

 <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <div id="map" class="map"></div> 

It may be better to use the ArcGIS service from the same server, which by default serves EPSG:3857

  var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer'; var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: new ol.source.TileArcGISRest({ url: url }), opacity: 0.5 }) ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([15, 50]), zoom: 7 }) }); 

 <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <div id="map" class="map"></div> 

but can also serve EPSG:5514 if required

 proj4.defs("EPSG:5514","+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=589,76,480,0,0,0,0 +units=m +no_defs"); ol.proj.proj4.register(proj4); var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer'; var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: new ol.source.TileArcGISRest({ url: url, projection: "EPSG:5514" }), opacity: 0.5 }) ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ projection: "EPSG:5514", center: ol.proj.fromLonLat([15, 50], "EPSG:5514"), zoom: 7 }) }); 

 <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <div id="map" class="map"></div>