I've found a working solution based on openlayers version 3.7
Here is a working example:
http://mappe-t.comune.modena.it/prove/demo_ol3/tms_ol3_with_popup.html
basically is necessary to create a custom TileImage source
this is my 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;
}
})
});
Alrighty,
I finally found out how to set the parameters. The problems were due to the resolution and the extent arrays.
I) The resolution array needed a "z+1" instead of "z":
for (var z = 0; z <= 16; z++) {
resolutions[z] = maxResolution / Math.pow(2, z+1);
}
(btw: the number of z in the for-loop defines the number of available zoom levels)
II) And the extent array some adaptions.
The 4 values of the extent array are: [MinX, MinY, MaxX, MaxY]. We can start with 0s for both min-values. The max values depend on:
a) the number of tiles
b) the resolutions
c) the tilesize
I found that this formula worked well for my purposes:
MaxX(MaxY) = No of tiles x resolution[0] x tilesize
For the example above this would mean:
MaxX = 2 x 2 x 512 = 2048
MaxY = 1 x 2 x 512 = 1024
var minX = 0;
var minY = 0;
var maxX = 2048;
var maxY = 1024;
extent: [minX, minY, maxX, maxY]
III) The center can be set to [MaxX/2, MaxY/2]
center: [maxX/2, maxY/2]
Here is the updated jsfiddle: http://jsfiddle.net/vb53xz20/2/
Best Answer
The satellite image tile url template is
A language parameter is accepted but since there are no labels it has no effect