Orsdxy

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?

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]            

       })

    })