1

I am seeing a strange error with a TMS/WMTS in EPSG:25832 created with GeoServer viewing with OpenLayers3 and hope someone can point me in the right direction.

When zooming, the tiles seem to "jump" respectively the tiles are not shown at the correct location. There are a few zoom levels, where they are shown at the right location, but in other zoom levels they are not correct. You can see the jumping happen in the following GIF:

http://i.imgur.com/djQ5L7P.gif

This does not happen with other layers in the same CRS nor with the exact same layer in OpenLayers 2.13

The Setup:

Geoserver-Gridset (GeoServer 2.11.1):

CRS: EPSG:25832
Gridset Bounds: [-31457.2, 5171172.3, 1113266.0, 6139784.2]
Tilesize: 256px x 256px
Tile Matrix Set: [
    4891.96981025128, // AdV-Level 0 (1:17471320.7508974)
    2445.98490512564, // AdV-Level 1 (1:8735660.37544872)
    1222.99245256282, // AdV-Level 2 (1:4367830.18772436)
    611.49622628141,  // AdV-Level 3 (1:2183915.09386218)
    305.748113140705, // AdV-Level 4 (1:1091957.54693109)
    152.874056570353, // AdV-Level 5 (1:545978.773465545)
    76.4370282851763, // AdV-Level 6 (1:272989,386732772)
    38.2185141425881, // AdV-Level 7 (1:136494,693366386)
    19.1092570712941, // AdV-Level 8 (1:68247,3466831931)
    9.55462853564703, // AdV-Level 9 (1:34123,6733415966)
    4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
    2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
    1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
    0.59716428347794,  // AdV-Level 13 (1:2132,72958384978)
    0.29858214173896974
];

I copied these settings from WebAtlasDE as they fitted my needs.

OL2.13 (no problems):

var map = new OpenLayers.Map({
    div: "map",
    projection: "EPSG:25832",
    units: "m",
    maxExtent:[
        -31457.2, 
        5171172.3, 
        1113266.0, 
        6139784.2
    ],
    resolutions:[
        4891.96981025128, // AdV-Level 0 (1:17471320.7508974)
        2445.98490512564, // AdV-Level 1 (1:8735660.37544872)
        1222.99245256282, // AdV-Level 2 (1:4367830.18772436)
        611.49622628141,  // AdV-Level 3 (1:2183915.09386218)
        305.748113140705, // AdV-Level 4 (1:1091957.54693109)
        152.874056570353, // AdV-Level 5 (1:545978.773465545)
        76.4370282851763, // AdV-Level 6 (1:272989,386732772)
        38.2185141425881, // AdV-Level 7 (1:136494,693366386)
        19.1092570712941, // AdV-Level 8 (1:68247,3466831931)
        9.55462853564703, // AdV-Level 9 (1:34123,6733415966)
        4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
        2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
        1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
        0.59716428347794,  // AdV-Level 13 (1:2132,72958384978)
        0.29858214173896974
    ]
});

var layer = new OpenLayers.Layer.TMS( 
    "Tiles",
    [
        "http://localhost/geoserver/gwc/service/tms/"
    ],
    {
        layername: '25832',
        type:'jpg',
        tileOrigin: new OpenLayers.LonLat(-31457.2, 5171172.3),
        projection: new OpenLayers.Projection("EPSG:25832"),
        maxExtent:[
            -31457.2, 
            5171172.3, 
            1113266.0, 
            6139784.2
        ],
        "serverResolutions":[
            4891.96981025128, // AdV-Level 0 (1:17471320.7508974)
            2445.98490512564, // AdV-Level 1 (1:8735660.37544872)
            1222.99245256282, // AdV-Level 2 (1:4367830.18772436)
            611.49622628141,  // AdV-Level 3 (1:2183915.09386218)
            305.748113140705, // AdV-Level 4 (1:1091957.54693109)
            152.874056570353, // AdV-Level 5 (1:545978.773465545)
            76.4370282851763, // AdV-Level 6 (1:272989,386732772)
            38.2185141425881, // AdV-Level 7 (1:136494,693366386)
            19.1092570712941, // AdV-Level 8 (1:68247,3466831931)
            9.55462853564703, // AdV-Level 9 (1:34123,6733415966)
            4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
            2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
            1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
            0.59716428347794,  // AdV-Level 13 (1:2132,72958384978)
            0.2985821417389697
        ],
        "resolutions":[
            4891.96981025128, // AdV-Level 0 (1:17471320.7508974)
            2445.98490512564, // AdV-Level 1 (1:8735660.37544872)
            1222.99245256282, // AdV-Level 2 (1:4367830.18772436)
            611.49622628141,  // AdV-Level 3 (1:2183915.09386218)
            305.748113140705, // AdV-Level 4 (1:1091957.54693109)
            152.874056570353, // AdV-Level 5 (1:545978.773465545)
            76.4370282851763, // AdV-Level 6 (1:272989,386732772)
            38.2185141425881, // AdV-Level 7 (1:136494,693366386)
            19.1092570712941, // AdV-Level 8 (1:68247,3466831931)
            9.55462853564703, // AdV-Level 9 (1:34123,6733415966)
            4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
            2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
            1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
            0.59716428347794,  // AdV-Level 13 (1:2132,72958384978)
            0.2985821417389697
        ]
    } 
);
map.addLayer(layer);

OL3.18.2 (also tested with OL4.2.0)

var projectionName = 'EPSG:25832';
proj4.defs(projectionName, '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

var tilesExtent = [
    -31457.2, 
    5171172.3, 
    1113266.0, 
    6139784.2
];

var tilesOrigin = [-31457.2, 6139784.2];

var tilesResolutions = [
    4891.96981025128, // AdV-Level 0 (1:17471320.7508974)
    2445.98490512564, // AdV-Level 1 (1:8735660.37544872)
    1222.99245256282, // AdV-Level 2 (1:4367830.18772436)
    611.49622628141,  // AdV-Level 3 (1:2183915.09386218)
    305.748113140705, // AdV-Level 4 (1:1091957.54693109)
    152.874056570353, // AdV-Level 5 (1:545978.773465545)
    76.4370282851763, // AdV-Level 6 (1:272989,386732772)
    38.2185141425881, // AdV-Level 7 (1:136494,693366386)
    19.1092570712941, // AdV-Level 8 (1:68247,3466831931)
    9.55462853564703, // AdV-Level 9 (1:34123,6733415966)
    4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
    2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
    1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
    0.59716428347794,  // AdV-Level 13 (1:2132,72958384978)
    0.29858214173896974
];

var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://localhost/geoserver/gwc/service/tms/25832/{z}/{x}/{-y}.jpg',
        projection: projectionName,
        tileGrid: new ol.tilegrid.TileGrid({
            extent: tilesExtent,
            origin: tilesOrigin,
            resolutions: tilesResolutions
        })
    })
});

var map = new ol.Map({
    target: 'map',
    layers: [
        layer
    ],
    view: new ol.View({
        projection: projectionName,
        resolutions: tilesResolutions,
        center: ol.proj.transform([8.68, 50.15], 'EPSG:4326', projectionName),
        zoom: 8,
        extent: tilesExtent
    })
});

WMS from GeoServer with OL3 works fine but I want a cached service and a TMS cached with GWC seems a good solution.

Using the same OL3 example from above with ol.source.WMTS produces the same error:

var gridNames = ['25832:0', '25832:1', '25832:2', '25832:3', '25832:4', '25832:5', '25832:6', '25832:7', '25832:8', '25832:9', '25832:10', '25832:11', '25832:12', '25832:13', '25832:14'];

var wmts_layer = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: "http://localhost/geoserver/gwc/service/wmts?",
        layer: 'layerName',
        matrixSet: '25832',
        format: 'image/jpeg',
        projection: projectionName,
        tileGrid: new ol.tilegrid.WMTS({
            extent: tilesExtent,
            origin: tilesOrigin,
            resolutions: tilesResolutions,
            matrixIds: gridNames
        }),
        style: '',
        requestEncoding: 'KVP'
    })
});

I am using the TMS layer in a map with OpenLayers 2.13 where I have no problems. Interestingly the GeoServer built in Tile Layers preview (OL3) which uses the WMTS of the layer is producing the same error.

When using a WebAtlasDe layer in the same setup I do not encounter any of the problems, for completeness I add the code for this layer:

var webatlasOrigin = [-46133.17, 6301219.54];

var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  matrixIds[z] = z;
}

// WMTS
var wmts = new ol.layer.Tile({
    title: 'WebAtlasDE-Light',
    type: 'base',
    target: 'map',
    source: new ol.source.WMTS({
        url: "http://sg.geodatenzentrum.de/wmts_webatlasde.light_grau/tile/1.0.0/webatlasde.light_grau/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
        layer: 'webatlasde_light_grau',
        matrixSet: 'DE_EPSG_25832_LIGHT',
        format: 'image/png',
        projection: projectionName,
        tileGrid: new ol.tilegrid.WMTS({
            extent: tilesExtent,
            origin: webatlasOrigin,
            resolutions: tilesResolutions,
            matrixIds: matrixIds
        }),
        style: 'default',
        requestEncoding: 'REST'
    })
});
Improve this question
6

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.