WMTS Layer Custom Projection – Display in EPSG:25832 Using OpenLayers

coordinate systemopenlayerswmts

I have the URL of a WMTS server which provides map tiles in EPSG:25832 (ETRS89 / UTM zone 32N; I'm sorry I cannot post it as it contains user credentials).

If I connect to this server with QGIS I can select a tileset (ADV_25832_Quad) and it is displayed properly. The image below (left) shows the result with a vector layer (red border) for verification.

Now I tried to use this WMTS server in OpenLayers by combining these two examples:

In OpenLayers the WMTS layer is not displayed properly (see image below on the right).

I think is has to to with the projection extent or the resolution of the tilegrid (I got the projection extent from https://epsg.io/25832).

But how does QGIS get these values and how can I get them for OpenLayers?

Here's my code:

var projectionName = 'EPSG:25832';
proj4.defs(projectionName, '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
var projection = ol.proj.get(projectionName);

var projectionExtent = [ -1877994.66, 3932281.56, 836715.13, 9440581.95 ];
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = "ADV_25832_Quad:" + z;
}

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            opacity: 1,
            source: new ol.source.WMTS({
                attributions: '...',
                url: 'https://...',
                layer: "DOP_20_C",
                "matrixSet": "ADV_25832_Quad",
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: 'default',
                wrapX: true,
            })
        }),

        new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'bw25832.txt',
                format: new ol.format.GeoJSON()
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                })
            })
        })

        ],
        target: 'map',
        view: new ol.View({
            projection: projection,
            center: [506102,5384251],
            zoom: 8
        })
      });

WMTS in QGIS / OpenLayers

EDIT

Here are the top 2 levels of the tile matrix from the getCapabilities response:

    <TileMatrixSet>
              <ows:Identifier>ADV_25832_Quad</ows:Identifier>
              <ows:SupportedCRS>urn:ogc:def:crs:EPSG::25832</ows:SupportedCRS>
              <TileMatrix>
                    <ows:Identifier>ADV_25832_Quad:0</ows:Identifier>
                    <ScaleDenominator>1.747132075089743E7</ScaleDenominator>
                    <TopLeftCorner>-46133.17 6301219.54</TopLeftCorner>
                    <TileWidth>256</TileWidth>
                    <TileHeight>256</TileHeight>
                    <MatrixWidth>1</MatrixWidth>
                    <MatrixHeight>1</MatrixHeight>
              </TileMatrix>
              <TileMatrix>
                    <ows:Identifier>ADV_25832_Quad:1</ows:Identifier>
                    <ScaleDenominator>8735660.375448715</ScaleDenominator>
                    <TopLeftCorner>-46133.17 6301219.54</TopLeftCorner>
                    <TileWidth>256</TileWidth>
                    <TileHeight>256</TileHeight>
                    <MatrixWidth>2</MatrixWidth>
                    <MatrixHeight>2</MatrixHeight>
              </TileMatrix>

Best Answer

EDIT

The easy way to do this is to ask OpenLayers to read the capabilities document in the same way that QGIS does - see this example.

END EDIT

As you can see the tile matrix origin for the top level in the capabilities document (which is what QGIS uses) doesn't match the one that you are using in OpenLayers, this is why your tiles are in the wrong place.

<TopLeftCorner > 6104500.7393 3386564.94 </ TopLeftCorner >

var projectionExtent = [ -1877994.66, 3932281.56, 836715.13, 9440581.95 ];

You will need to change the origin and extent of the OpenLayers resolutions to match the size of your image or change your grid set to match the size of the CRS that you are using in OpenLayers.

EDIT

You must also match the scales/resolutions or the image will be drawn at the wrong scale. Remember that resolution is size*1/ScaleDenominator when calculating,

Related Question