2

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 ?

3

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)

  • It works ! Thanks a lot ! It's very clear now. I have seen many times this answer with -y before, but i understood it wrong. Was thinking about a complete another use. – Miuu Jun 19 '18 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.