help with TMS (gdal2tiles) Openlayers 3 and custom projection
484 views
Skip to first unread message
Gian Marco Artioli
Jan 20, 2015, 6:05:13 AM1/20/15
to ol3...@googlegroups.com
Any help is very apreciated
I work with a local italian projection (EPSG:3003 Monte Mario Italy zone 1) and I had loaded this projection in my project for evitate to reproject all of my data.
I had created the tile pyramid with the last version of gdal2tiles (the version shipped with the last version of maptiler open source [see http://trac.osgeo.org/gdal/ticket/2052] to be able to generate jpeg tiles instead of png tiles)
my problem is that I don't be able to assign the correct extent to my page. If I assign to the montemarioProjection the extent for italy, also this extent is applied to my map, but my map contains only the municipality of modena. My extent of tms of modena, calculated by gdal2tiles, seems to be ignored.
when i try to pan to a certain coordinate point in monte mario coordinate system, map goes in a wrong place, because is not positioned well.
some examples: (HERE I HAD ASSIGNED TO MONTE MARIO ONLY MODENA EXTENT AS EXTENT, NOT ITALY)
EXAMPLE 1 http://cartografia.localhost/test_tms_ol3/ol3_ortofoto.html
(HERE I HAD ASSIGNED TO MONTE MARIO HIS REAL EXTENT AND TRIED TO FORCE MAP ORIGIN, BUT IT WAS IGNORED. I HAVE TO REMOVE extent parameter from ol.layer.tile and ol.view)
EXAMPLE 2 http://cartografia.localhost/test_tms_ol3/ol3_ortofoto2.html
code to force map origin (it does nothing)
origin: tileGrid: new ol.tilegrid.TileGrid({
//tileGrid: new ol.tilegrid.XYZ({
origin: tms_origin,
resolutions: tms_resolutions
}),
IF LOOK AT MOUSEPOSITION CONTROL, THE COORDINATES IS WRONG IN EXAMPLE 1 AND 2
HERE IS ALL OF MY CODE FROM EXAMPLE 1
var tms_extent = [ 1640349.34499999997206, 4935769.97499999962747, 1659997.04499999992549, 4956992.87500000000000 ];
var tms_origin = [1640349.34499999997206, 4935769.97499999962747];
//RESOLUTIONS NOT USED IN MY PROJECT
//102.39999999999979, 51.19999999999990, 25.59999999999995,
var tms_resolutions = [
12.79999999999997, 6.39999999999999, 3.19999999999999, 1.60000000000000,
0.80000000000000, 0.40000000000000, 0.20000000000000, 0.10000000000000
];
var city_center = [ 1652769.73, 4945475.55 ];
var monteMarioSystemCode = 'EPSG:3003';
var projectionMonteMario = ol.proj.get(monteMarioSystemCode);
//var extent_italia_monte_mario = [1290679.24, 4194066.17, 2226886.34, 5259894.49];
//projectionMonteMario.setExtent(extent_italia_monte_mario);
projectionMonteMario.setExtent(tms_extent);
//var tms_extent = ol.proj.transformExtent([1640349.345, 4935769.975, 1659997.045, 4956992.875], 'EPSG:3003', 'EPSG:4326');
//var city_center = ol.proj.transform([1652783, 4945465], 'EPSG:3003', 'EPSG:4326');
var map = new ol.Map({
controls: ol.control.defaults({ attribution: false }).extend(
[ new ol.control.ZoomSlider(),
new ol.control.ScaleLine(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: monteMarioSystemCode,
// comment the following two lines to have the mouse position
// be placed within the map.
//className: 'custom-mouse-position',
//target: document.getElementById('mouse-position'),
undefinedHTML: ' '
})
]),
layers : [ new ol.layer.Tile({
extent : tms_extent,
//minResolution : tms_resolutions[7],
//maxResolution : tms_resolutions[0],
source : new ol.source.XYZ({
/* alternative */
//source: new ol.source.TileImage({
crossOrigin : null,
//experimental parameter
projection : monteMarioSystemCode,
//experimental parameter
//maxZoom : 10,
//experimental parameter. documentation the documentation says to remove this attribute (not supported)
//minZoom : 3,
//experimental parameter
//tilePixelRatio : 1,
//experimental parameter
//tileSize : 256,
//experimental parameter (necessary because gdal2tiles generate tiles in TMS mode not in XYZ mode)
tileUrlFunction : function(coordinate) {
if (coordinate == null) {
return "";
}
// type of ol.TileCoord is recently changed to an array of three numbers: [z, x, y]
var z = coordinate[0];
var x = coordinate[1];
var y = (1 << z) - coordinate[2] - 1;
return 'http://mappe-t.comune.modena.it/ortofoto/2014/tms2014/' + z + '/' + x + '/' + y + '.jpg';
},
//this works only for tiles generated in XYZ format, es maptiler pro
//url : 'http://mappe-t.comune.modena.it/ortofoto/2014/tms2014/{z}/{x}/{y}.jpg'
//experimental parameter (inherited from ol.source.TileImage)
/*
tileGrid: new ol.tilegrid.TileGrid({
//tileGrid: new ol.tilegrid.XYZ({
origin: tms_origin,
resolutions: tms_resolutions
}),
*/
})
}) ],
renderer : 'canvas',
target : 'map',
view : new ol.View({
projection : monteMarioSystemCode,
center : city_center,
//experimental parameter
extent : tms_extent,
//maxResolution : tms_resolutions[0],
//minResolution : tms_resolutions[7],
maxZoom : 10,
minZoom : 3,
//resolution : tms_resolutions[0],
//resolutions : tms_resolutions,
zoom : 3,
//zoomFactor : 2
})
});
map.getView().fitExtent(tms_extent, map.getSize());
and here code from example 2
var tms_extent = [ 1640349.34499999997206, 4935769.97499999962747, 1659997.04499999992549, 4956992.87500000000000 ];
var tms_origin = [1640349.34499999997206, 4935769.97499999962747];
//RESOLUTIONS NOT USED IN MY PROJECT
//102.39999999999979, 51.19999999999990, 25.59999999999995,
var tms_resolutions = [
12.79999999999997, 6.39999999999999, 3.19999999999999, 1.60000000000000,
0.80000000000000, 0.40000000000000, 0.20000000000000, 0.10000000000000
];
var city_center = [ 1652769.73, 4945475.55 ];
var monteMarioSystemCode = 'EPSG:3003';
var projectionMonteMario = ol.proj.get(monteMarioSystemCode);
var extent_italia_monte_mario = [1290679.24, 4194066.17, 2226886.34, 5259894.49];
projectionMonteMario.setExtent(extent_italia_monte_mario);
//projectionMonteMario.setExtent(tms_extent);
//var tms_extent = ol.proj.transformExtent([1640349.345, 4935769.975, 1659997.045, 4956992.875], 'EPSG:3003', 'EPSG:4326');
//var city_center = ol.proj.transform([1652783, 4945465], 'EPSG:3003', 'EPSG:4326');
var map = new ol.Map({
controls: ol.control.defaults({ attribution: false }).extend(
[ new ol.control.ZoomSlider(),
new ol.control.ScaleLine(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: monteMarioSystemCode,
// comment the following two lines to have the mouse position
// be placed within the map.
//className: 'custom-mouse-position',
//target: document.getElementById('mouse-position'),
undefinedHTML: ' '
})
]),
layers : [ new ol.layer.Tile({
//extent : tms_extent,
//minResolution : tms_resolutions[7],
//maxResolution : tms_resolutions[0],
source : new ol.source.XYZ({
/* alternative */
//source: new ol.source.TileImage({
crossOrigin : null,
//experimental parameter
projection : monteMarioSystemCode,
//experimental parameter
//maxZoom : 10,
//experimental parameter. documentation the documentation says to remove this attribute (not supported)
//minZoom : 3,
//experimental parameter
//tilePixelRatio : 1,
//experimental parameter
//tileSize : 256,
//experimental parameter (necessary because gdal2tiles generate tiles in TMS mode not in XYZ mode)
tileUrlFunction : function(coordinate) {
if (coordinate == null) {
return "";
}
// type of ol.TileCoord is recently changed to an array of three numbers: [z, x, y]
var z = coordinate[0];
var x = coordinate[1];
var y = (1 << z) - coordinate[2] - 1;
return 'http://mappe-t.comune.modena.it/ortofoto/2014/tms2014/' + z + '/' + x + '/' + y + '.jpg';
},
//this works only for tiles generated in XYZ format, es maptiler pro
//url : 'http://mappe-t.comune.modena.it/ortofoto/2014/tms2014/{z}/{x}/{y}.jpg'
//experimental parameter (inherited from ol.source.TileImage)
tileGrid: new ol.tilegrid.TileGrid({
//tileGrid: new ol.tilegrid.XYZ({
origin: tms_origin,
resolutions: tms_resolutions
}),
})
}) ],
renderer : 'canvas',
target : 'map',
view : new ol.View({
projection : monteMarioSystemCode,
center : city_center,
//experimental parameter
//extent : tms_extent,
//maxResolution : tms_resolutions[0],
//minResolution : tms_resolutions[7],
maxZoom : 10,
minZoom : 3,
//resolution : tms_resolutions[0],
//resolutions : tms_resolutions,
zoom : 3,
//zoomFactor : 2
})
});Gian Marco Artioli
Jan 22, 2015, 9:26:42 AM1/22/15
to ol3...@googlegroups.com
the links to the examples are wrong, the are local links.
correct links are:
EXAMPLE 1:
http://mappe-t.comune.modena.it/ortofoto/2014/ol3_ortofoto.html
EXAMPLE 2:
http://mappe-t.comune.modena.it/ortofoto/2014/ol3_ortofoto2.html
correct links are:
EXAMPLE 1:
http://mappe-t.comune.modena.it/ortofoto/2014/ol3_ortofoto.html
EXAMPLE 2:
http://mappe-t.comune.modena.it/ortofoto/2014/ol3_ortofoto2.html
Gian Marco Artioli
Jul 23, 2015, 10:45:52 AM7/23/15
to OL3 Dev
[SOLVED]
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
here is an example more simple.
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:
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
here is an example more simple.
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;
}
})
});
...
Farook M
Dec 19, 2016, 2:12:17 AM12/19/16
to OL3 Dev
Hi i had generated tiles using gdal2tiles and had put up all my tile images were placed here http://localhost/maps/.
The XML generated from gdal2tiles
<?xml version="1.0" encoding="utf-8"?> <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0"> <Title>J133-12H7h54 tiled.tiff</Title> <Abstract></Abstract> <SRS>EPSG:3857</SRS> <BoundingBox minx="17.34140082382990" miny="60.27332260300220" maxx="17.43368067888432" maxy="60.31931836578014"/> <Origin x="17.34140082382990" y="60.27332260300220"/> <TileFormat width="256" height="256" mime-type="image/png" extension="png"/> <TileSets profile="mercator"> <TileSet href="1" units-per-pixel="78271.51695000000473" order="1"/> <TileSet href="2" units-per-pixel="39135.75847500000236" order="2"/> <TileSet href="3" units-per-pixel="19567.87923750000118" order="3"/> <TileSet href="4" units-per-pixel="9783.93961875000059" order="4"/> <TileSet href="5" units-per-pixel="4891.96980937500030" order="5"/> <TileSet href="6" units-per-pixel="2445.98490468750015" order="6"/> <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"/> <TileSet href="13" units-per-pixel="19.10925706787109" order="13"/> </TileSets> </TileMap>
And i had followed the above code to use the local tile images to add in OL3. But i couldnot see the tile images for some reason. Help would be really appreciated.. Below is the code which i had tried.
var resolutions = [ 78271.51695000000473, 39135.75847500000236, 19567.87923750000118, 9783.93961875000059,
4891.96980937500030, 2445.98490468750015, 1222.99245234375007, 611.49622617187504,
305.74811308593752, 152.87405654296876, 76.43702827148438, 38.21851413574219, 19.10925706787109];
var extent = [60.27332260300220, 17.34140082382990, 60.31931836578014, 17.43368067888432];
var coordSystemCode = 'EPSG:3857';
var projectiono = ol.proj.get(coordSystemCode);
var tms = new ol.layer.Tile({
preload: 1,
source: new ol.source.TileImage({
crossOrigin: null,
extent: extent,
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
extent: extent,
origin: [extent[0], extent[1]],
resolutions: resolution }),
tileUrlFunction: function(coordinate) {
if (coordinate === null) return undefined;
var z = coordinate[0];
var x = coordinate[1];
var y = coordinate[2];
var url = 'http://localhost/maps/'+z+'/'+ x +'/'+y +'.png';
return url;
}
})
});
var view = new ol.View({
projection: 'EPSG:3857',
center: center,
zoom: 2 });
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [
osm,tms ],
renderer: 'canvas',
target: 'map',
view: view
});
Peter Robins
Dec 19, 2016, 11:22:18 AM12/19/16
to OL3 Dev
your extent needs to be in 3857 as well. Also, you define 'resolutions' and 'projectiono', and use 'resolution' and 'projection'. If it still doesn't work, you should look in the console/dev tools to see whether the correct urls are being generated or not, and then narrow the problem down.
Reply all
Reply to author
Forward
0 new messages