Mismatch between OpenLayers 5 and XYZ-layer on some zoom-levels

Question

I have an image pyramid that I created with gdal2tiles. Then I displayed this layer on top of another map in OpenLayers 5 with the XYZ source.

On the map zoom levels 0-8 the XYZ layer is not aligning correctly with the underlying map, in the next zoom level it fits perfectly. (See the attached images below).

My guess is that I missed something in how to set up the OpenLayers layer but I can't figure out what.

Here is the OpenLayers part for the layer:

 private xyzlayer: TileLayer = new TileLayer({
    opacity: 1,
    extent: [613934.99711258523166, 6724227.18296865839511, 618936.50444324919954, 6729085.88076259661466],
    source: new olXYZ({
      maxZoom: 8,
      projection: 'EPSG:3006',
      url: 'http://localhost:10/georeferencerApp/georeferenced/gavle_test/{z}/{x}/{-y}.png',
      tileGrid: new xyzTileGrid({
        extent: [613934.997113, 6724227.18297, 618936.504443, 6729085.88076],
        resolutions: [25.38836208458858, 12.69418104229429, 6.34709052114714, 3.17354526057357, 1.58677263028679, 0.79338631514339, 0.39669315757170, 0.19834657878585, 0.09917328939292]            
       })
    })
});

This is the XML file from gdal2tiles:

<TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
  <Title>gavle_1954.tif</Title>
  <Abstract></Abstract>
  <SRS>EPSG:3006</SRS>
  <BoundingBox minx="613934.99711258523166" miny="6724227.18296865839511" maxx="618936.50444324919954" maxy="6729085.88076259661466"/>
  <Origin x="613934.99711258523166" y="6724227.18296865839511"/>
  <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
  <TileSets profile="raster">
    <TileSet href="0" units-per-pixel="25.38836208458858" order="0"/>
    <TileSet href="1" units-per-pixel="12.69418104229429" order="1"/>
    <TileSet href="2" units-per-pixel="6.34709052114714" order="2"/>
    <TileSet href="3" units-per-pixel="3.17354526057357" order="3"/>
    <TileSet href="4" units-per-pixel="1.58677263028679" order="4"/>
    <TileSet href="5" units-per-pixel="0.79338631514339" order="5"/>
    <TileSet href="6" units-per-pixel="0.39669315757170" order="6"/>
    <TileSet href="7" units-per-pixel="0.19834657878585" order="7"/>
    <TileSet href="8" units-per-pixel="0.09917328939292" order="8"/>
  </TileSets>
</TileMap>

And this is the gdal2tiles command:

gdal2tiles -p raster -z 0-8 -s EPSG:3006 gavle_1954.tif gavle_test

Could anyone give me a hint on what the problem might be?

Answer 1

It's not a standard XYZ grid, i.e. the largest tile 25.38836208458858 * 256 = 6499.42069365467648 is bigger than the extent 6729085.88076 - 6724227.18297 = 4858.69779 That wouldn't be a problem if the origin was top left, but yours is bottom left so using a {-y} placeholder in the url won't work correctly. Instead you will need to specify the origin and use a tile url function:

source: new olXYZ({
      maxZoom: 8,
      projection: 'EPSG:3006',
      tileUrlFunction: function(tileCoord) {
        return 'http://localhost:10/georeferencerApp/georeferenced/gavle_test/' + tileCoord[0] + '/' + tileCoord[1] + '/' + tileCoord[2] + '.png';
      },
      tileGrid: new xyzTileGrid({
        extent: [613934.997113, 6724227.18297, 618936.504443, 6729085.88076],
        origin: [613934.997113, 6724227.18297],
        resolutions: [25.38836208458858, 12.69418104229429, 6.34709052114714, 3.17354526057357, 1.58677263028679, 0.79338631514339, 0.39669315757170, 0.19834657878585, 0.09917328939292]            
       })
    })