OL3 gwc background layer does not align to gridset, works in OL2

Question

I'm using GeoServer 2.10.1 and its built-in GeoWebCache and am trying to use a cached background layer in a custom gridset with a local epsg to work in a simple Ol3 app:

proj4.defs("EPSG:3010","+proj=tmerc +lat_0=0 +lon_0=16.5 +k=1 +x_0=150000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +axis=neu +no_defs");

var projection = new ol.proj.Projection({
    code: 'EPSG:3010',
    extent: [-2138120,3880750,2396422,8973750] //Matches GWC gridset
  });

var wmsSource = new ol.source.TileWMS({
    url: 'http.../geoserver/wms',
    projection: 'EPSG:3010',
    params: {'LAYERS': 'basemap', 'tiled': true, 'version':'1.1.1'} 
  });

var wmsLayer = new ol.layer.Tile({ 
    source: wmsSource
  });

var view = new ol.View({
  resolutions: [4200,1399.9999999999998,560,140,55.9999999999999,27.99999999999996..], //Matching GWC gridset
  center: [151423.169, 6908747.899],
  extent: [-2138120,3880750,2396422,8973750],
  zoom: 1,
  projection: projection
  });

var map = new ol.Map({
  layers: [wmsLayer],
  target: 'map',
  view: view
  });

This produces a map with a fuzzy, "zoomed out" look at every zoom level (but the tiles returned actually look good and view.getResolution reports the correct resolution). GWC says "does not align to gridset" for every getMap.

If I let OL calculate the zoom levels the base map looks fine.

If I use

url: 'http...geoserver/gwc/service/wms'

instead I get http 400 bad request on the getMap requests.

The base layer is used as a background map in an ol2 app defined in the same way, i.e extent and a series of resolutions, and it works well.

What is required in OL3 to make use of a cached background layer?

Answer 1

There are a few things you need to try.

1. Make sure you have configured correctly your tilegrid within the geowebcache.xml and your use the same resolutions in the ol3 side

2. Within the view config add min , max resoutions. Like so

   var view = new ol.View({
   resolutions: [4200,1399.9999999999998,560,140,55.9999999999999,27.99999999999996..],  
   //Matching GWC gridset
   center: [151423.169, 6908747.899],
   extent: [-2138120,3880750,2396422,8973750],
   zoom: 1,
   projection: projection,
   maxResolution : ......,
   minResolution : 4200
   });
   

3. Within your tile layer config , consider the tilegrid config which you are missing and the SRS definition. I think the matrix ids is crucial.

   var wmsSource = new ol.source.TileWMS({
   url: 'http.../geoserver/wms',
   projection: 'EPSG:3010',
   params: {
     'LAYERS': 'basemap', 
     'tiled': true, 
     'version':'1.1.1'
     'SRS':'EPSG:3010',
   },
   tileGrid      : new ol.tilegrid.WMTS({
       origin      : [....,...],//x,y as configured within geowebcache.xml
       tileSize    : [256,256],//the tile size (usually 256x256)
       resolutions : [4200,1399.9999999999998,560,140,55.9999999999999,27.99999999999996..], //put the array of your resolutions
       maxExtent   : [-2138120,3880750,2396422,8973750],//just the extent
       matrixIds   : [.......]//now you need to calculate the matrixids.
   }), 
   });
   

In order to calculate the matrix ids you need to create a helper function. Like so

function calcMatrixIDs() {
    var res = [4200,1399.9999999999998,560,140,55.9999999999999,27.99999999999996..];
    var retArr = new Array(res.length);
    for (var z = 0; z < res.length; z++) {
        retArr[z] = 'MY_GRID:' + z;//replace with name you use within the geowebcache.xml
    }
    return retArr;
};