[GIS] OpenLayers 3 Geoserver GeoWebCache WMS tile alignment issue

geoservergeowebcacheopenlayerstileswms

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,
    })
});

Best Answer

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
Related Question