gdal2tiles OpenLayers – How to Display Tiles Generated by gdal2tiles in OpenLayers

gdalgdal2tilesopenlayers

I'm currently facing issues displaying tiles generated with gdal2tiles.py in OpenLayers 4.5.6

My geotiff is issued from SHOM catalog.

To generate the tiles, I had to translate my tif to vrt to be a RGB/RGBA compatible file.

gdal_translate -of vrt map.tif map_translated.vrt

then i've simply run 

gdal2tiles.py map_translated.vrt

and issued a tile map source file like the following

<TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
  <Title>temp.vrt</Title>
  <Abstract></Abstract>
  <SRS>EPSG:3857</SRS>
  <BoundingBox minx="-3.92503169515670" miny="46.43569348844158" maxx="-1.42506635394127" maxy="47.66245305306844"/>
  <Origin x="-3.92503169515670" y="46.43569348844158"/>
  <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
  <TileSets profile="mercator">
    <TileSet href="7" units-per-pixel="1222.99245234375007" order="7"/>
    <TileSet href="8" units-per-pixel="611.49622617187504" order="8"/>
    <TileSet href="9" units-per-pixel="305.74811308593752" order="9"/>
    <TileSet href="10" units-per-pixel="152.87405654296876" order="10"/>
    <TileSet href="11" units-per-pixel="76.43702827148438" order="11"/>
    <TileSet href="12" units-per-pixel="38.21851413574219" order="12"/>
  </TileSets>
</TileMap>

All samples produced from gdal2tiles are working fine, but i'm trying to integrate tiles to openlayers 4.5.6 with the following code :

var mapMinZoom = 7;
var mapMaxZoom = 12;

var mapExtent = [-3.92503169516, 46.4356934884, -1.42506635394, 47.6624530531];
var defaultExtent = ol.proj.transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857');

var mapCenter = [-2.5461600, 47.3793800];
var defaultCenter = ol.proj.fromLonLat(mapCenter);

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var xyz = new ol.layer.Tile({
  extent: defaultExtent,
  source: new ol.source.XYZ({
    projection: 'EPSG:3857',
    attributions: 'Tiles © SHOM, rendered with ' +
        '<a href="http://www.shom.fr/">Shom</a>',
    url: './data/maps/7068/temp/{z}/{x}/{y}.png',
    tilePixelRatio: 2,
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom
  })
});

var view = new ol.View({
  center: defaultCenter,
  zoom: 12
});

var map = new ol.Map({
  target: 'map',
  layers: [ osm, xyz ],
  view: view
});

Unfortunatly the map can't find corresponding tiles into the generated tiles folder. Ex :

./data/maps/7068/temp/12/2019/1434.png

Thing is the zoom and x are fine, but y is not right, my tiles folder got 2xxx.png tiles instead.

I might be missing something about Extent or Translation, should I translate my tiff differently ?

generate my tiles differently ?

Adjust settings on the map ?

Best Answer

You should simply change your url to:

url: './data/maps/7068/temp/{z}/{x}/{-y}.png',

Why?

Because XYZ tiling scheme differs from TMS scheme (produced by gdal2tiles) for tiles. It's because Y numbering starts at the top for XYZ and at the bottom for TMS (hence the minus sign in suggested url change)

Related Question