Openlayers 4 map is blurry when specifying tilegrid

Question

I am upgrading from OL2 to OL4. The OL2 version is running at vegkart.no.

I have run into a problem where the map gets blurry when tileGrid is specified. Without tileGrid the map looks clear, but features drawn are offset.

Here is a minimal version with comparison.

ol.proj.setProj4(proj4);
proj4.defs('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs');
const EPSG25833 = new ol.proj.Projection({
    code: 'EPSG:25833',
    extent: [-25e5, 35e5, 3045984, 9045984]
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                projection: EPSG25833,
                url: 'https://m{1-9}-nvdbcache.geodataonline.no/arcgis/rest/services/Trafikkportalen/GeocacheTrafikkJPG/MapServer/tile/{z}/{y}/{x}',
                maxZoom: 16,
                minZoom: 3,
                tileGrid: new ol.tilegrid.TileGrid({
                    extent: [-3438648.9692659, -2500000, 9984632.9692659, 9045984],
                    resolutions: [21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094, 338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335, 5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296],
                    origin: [-2500000, 9045984]
                })
            })
        })
    ],
    view: new ol.View({
        projection: EPSG25833,
        center: [600000,7225000],
        zoom: 3
    })
});

Here is a overview of the tiles.

I found an example where the resolutions are calculated.

const projectionExtent = EPSG25833.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(17);
const matrixIds = new Array(17);
for (let z = 0; z < 17; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = z;
}

When using it the map is clear, but shifted. https://jsfiddle.net/computerlove/t3afh9v9/

Am I missing something, or is this a bug?

Answer 1

Unlike in v2, the view resolutions are not taken from the base layer in v4. If you want the view to use the same resolutions as your tile layer, you’ll have to configure the view with

new ol.View({
  resolutions: tileSource.getTileGrid().getResolutions()
})