OpenLayers 3 Geoserver GeoWebCache WMS tile alignment issue

Question

I've started moving to OpenLayers 3 - very nice. One issue I have is with the dynamic tile size sent to my Geoserver - which is often 333.

This doesn't line up with the cache (which is 256 for EPSG:900913) so the Geoserver has to build a new tile - somewhat slow ...

Sometimes I get 256 (e.g. from Firefox on Linux) but usually it's off (e.g. Chrome on Linux, Android, Safari on iOS).

I've looked at a number of questions on this site, and have gleaned that I might need to set a tileGrid, but how do I do this?

Do I need to set resolutions on my map?

Here's my code:

var wms =   new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: '/geoserver/wms',
    params: {'LAYERS': 'test:wms_layer', 'TILED': true, },
    serverType: 'geoserver'
  })
});

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
    target: 'map',
    layers: [
      osm,
      wms,
    ],
    view: new ol.View({
      center: ol.proj.transform([11.953, 57.757,], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16,
    })
});

Answer 1

You seem to be using GeoWebCache (GWC) in direct integration mode which is known to have issues with OpenLayers as noted in the documentation. You will get better results using GWC in TMS or WMTS mode where you use a URL of the form:

http://example.com/geoserver/gwc/service/wms 

instead of

http://example.com/geoserver/wms

Answer 2

Ok, sorted it now - thanks to @iant :) By using the /geoserver/gwc/service/wms endpoint and following this example: https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html, I changed my code to:

var parser = new ol.format.WMTSCapabilities();
fetch('/geoserver/gwc/service/wmts?REQUEST=getcapabilities').then(function(response) {
    return response.text();
  }).then(function(text) {
    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result,
      {layer: 'test:wms_layer', matrixSet: 'EPSG:900913'});
    var wms  = new ol.layer.Tile({
      source: new ol.source.WMTS(options)
    });
    map.addLayer( wms );
});