OpenLayers 3 : Tile layer not showing correctly

Question

I am trying to use OpenLayers 3 to display tiles from a TMS repository. I don't know why I only have some parts of may base layer displayed, north-west part as you can see:

Here is my code :

var NESource = new ol.source.XYZ({
      projection: 'EPSG:4326'
    , url: 'datatest/tms/NaturalEarthII/{z}/{x}/{-y}.jpg'
    , crossOrigin: 'null'
});

var NETileLayer = new ol.layer.Tile({
      source: NESource
    , isBaseLayer: true
    , wrapDateLine: false
    , extent: [-180.0, -90.0, 180.0, 90.0]
});
var map = new ol.Map({
    target: 'map',
    renderer: 'canvas',
    layers: [
          NETileLayer
    ],
    view: new ol.View({
          projection: 'EPSG:4326'
        , center: [0,0]
        , zoom: 1
        , extent: [-180.0, -90.0, 180.0, 90.0]
    })
  });

//Create the graticule component
var graticule = new ol.Graticule({
    map: map
  , strokeStyle: new ol.style.Stroke({
    color: 'rgba(255,120,0,0.9)',
    width: 2,
    lineDash: [0.5, 4]
  })
});

var extent = [-180.0, -90.0, 180.0, 90.0];
map.getView().fitExtent(extent, map.getSize());

Looking at Firefox console, I can see only those tiles (as said at the beginning) are requested, not all the extent.

Answer 1

I've found a working solution based on OL v. 3.7

here is an example with a popup http://mappe-t.comune.modena.it/prove/demo_ol3/tms_ol3_with_popup.html

basically to render correctly a TMS layer generated with GDAL2TILES on openlayers 3, is necessary to create a custom tileImage source, this is my working code:

/*
    CONFIGURATION PARAMETERS DESUMED FROM gdal2tiles generated file
    http://mappe.comune.modena.it/ortofoto/2014/tilemapresource.xml
    */

    var tms_resolutions_2014 = [ 102.39999999999979, 51.19999999999990, 25.59999999999995, 12.79999999999997,
                              6.39999999999999, 3.19999999999999, 1.60000000000000, 0.80000000000000,
                              0.40000000000000, 0.20000000000000, 0.10000000000000 ];

    var extent_ortofoto_2014 = [1640349.34499999997206, 4935769.97499999962747, 1659997.04499999992549, 4956992.87500000000000];

    /* CONFIGURATION PARAMETERS DESUMED FROM http://epsg.io/3003 */
    var coordSystemCode = 'EPSG:3003';
    var projectionMonteMario = ol.proj.get(coordSystemCode);
    //var extent_italy_monte_mario    = [1290679.24, 4194066.17, 2226886.34, 5259894.49];
    var extent_italy_monte_mario    = [1290650.93, 4192956.42, 2226749.10, 5261004.57];
    projectionMonteMario.setExtent(extent_italy_monte_mario);


    //TMS LAYER. IS CONFIGURED AS A CUSTOM TileImage source

    var tmsModena = new ol.layer.Tile({

        preload: 1,
        source: new ol.source.TileImage({
            crossOrigin: null,
            extent: extent_ortofoto_2014,
            projection: projectionMonteMario,
            tileGrid: new ol.tilegrid.TileGrid({
                extent: extent_ortofoto_2014,
                origin: [extent_ortofoto_2014[0], extent_ortofoto_2014[1]],
                resolutions: tms_resolutions_2014

            }),
            tileUrlFunction: function(coordinate) {

                if (coordinate === null) return undefined;

                // TMS Style URL
                var z = coordinate[0];
                var x = coordinate[1];
                var y = coordinate[2];
                var url = 'http://mappe.comune.modena.it/ortofoto/2014/'+z+'/'+ x +'/'+y +'.jpg';
                return url;
            }
        })
    });

Answer 2

Looks to me like you are mixing up some syntax with openlayers 2. Not sure if this is the only problem going on, but this is definitely a problem.

For example:

 var NETileLayer = new ol.layer.Tile({
  source: NESource
  , isBaseLayer: true
  , wrapDateLine: false
  , extent: [-180.0, -90.0, 180.0, 90.0]
 });

isBaseLayer is an OL2 thing, as is wrapDateLine.

Checkout the new api docs here: http://openlayers.org/en/v3.0.0/apidoc/ol.layer.Tile.html

Maybe setting up a JSFiddle would help sort out specifically what the errors are, mixing up ol2 and ol3 is definitely going to make for a bad day.