3

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:

enter image description here

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.

  • I would suggest you read this example and post a fully working example (jsFiddle or similar). – John Powell Feb 22 '15 at 9:39
2

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;
            }
        })
    });
  • Hello Gian, Thank you sharing this, works perfectly for custom TileImageSources. – Nigel_V_Thomas Aug 10 '15 at 12:04
1

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.

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.