Openlayers - shifted map

Question

I get data like in example in this post How to fix EPSG:4326 with WMTS incorrect map overlay ,which even has the same source I just need. However, the map is shifted.

private createLayer() {
this.service
  .getTypesLayersFilter()
  .subscribe((resp: TypesLayersFilters) => {
    const filter = first(resp.WMTS);
    const parser = new WMTSCapabilities();
    const layer = 'ORTOFOTOMAPA';
    const matrixSet = 'EPSG:4326';

    this.wmtsService.getData().subscribe(text => {
      const result = parser.read(text);
      const options = optionsFromCapabilities(result, {
        layer,
        matrixSet,
        crossOrigin: true
      });

      const layerNew = new TileLayer({
        source: new WMTS(options),
        opacity: 0.7,
        name: 'WMTS',
      });

    });
  });
}

Source: https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities

getData() {
const url =
  'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO';
const data = {
  SERVICE: 'WMTS',
  REQUEST: 'GetCapabilities'
};
const options: any = { params: data, responseType: 'text' };

return this.http.get(url, {
  ...options,
  params: this.toHttpParams(options.params)
});
}

map screenshot

What can cause this shift, am I doing something wrong? Maybe the solution would be to move the map, if possible and that's how it should be done ?

Answer 1

I have added some opacity to the example and can see that the tilegrid defined by the GetCapabilities isn't exactly positioned in EPSG:4326. The service also supports EPSG:2180 which seems to fit much better. Using that projection will need proj4 and you will need to include +axis=neu in the projection definition as the service use a northing-easting coordinate order.

proj4.defs('EPSG:2180', '+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +axis=neu +no_defs ');

ol.proj.proj4.register(proj4);

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:2180',
    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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>