How to fix EPSG:4326 with WMTS incorrect map overlay

Question

Despite the projection setting, the map is skewed. I tried the example from the openlayers 5 documentation and it works, I don't know what I'm doing wrong.

initializeMap() {
    const projection = getProjection("EPSG:4326");
    const projectionExtent = projection.getExtent();
    let size = getWidth(projectionExtent) / 256;
    let resolutions = new Array(14);
    const matrixIds = new Array(14);

    for (let z = 0; z < 14; ++z) {
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = z;
    }

    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        new TileLayer({
          crossOrigin: true,
          source: new WMTS({
            url:
            "http://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO",
            matrixSet: ["EPSG:4326"],
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds
            })
          })
        })
      ],
      target: "map",
      view: new View({
        center: fromLonLat([19.4569911, 51.7687323]),
        zoom: 4
      })
    });
  }

Here is screen with problem.

Answer 1

I've checked the GetCapabilities for that service and the tilegrid isn't based on the global projection extent (instead it uses [13.8, 48.8, 24.4, 55] and the tile size is 512). While you could update your code to reflect that it is easier to let OpenLayers parse the GetCapabilities to create the source options:

var parser = new ol.format.WMTSCapabilities();
var url = 'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities';

fetch(url).then(function(response) {
  return response.text();
}).then(function(text) {
  var result = parser.read(text);
  var options = ol.source.WMTS.optionsFromCapabilities(result, {
    layer: 'ORTOFOTOMAPA',
    matrixSet: 'EPSG:4326',
    crossOrigin: true,
  });
  //console.log(options);

  this.map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Tile({
        source: new ol.source.WMTS(options),
        opacity: 0.5
      })
    ],
    target: "map",
    view: new ol.View({
      center: ol.proj.fromLonLat([19.4569911, 51.7687323]),
      zoom: 4
    })
  });

});

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<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>