Overwrite automatically calculated TileWMS request properties in Open Layers 3

Question

I have a GeoServer 2.5 instance hosting layer services in EPSG:4326 and being consumed by an OpenLayers 3 map with the default EPSG:3857 projection. Everything works fine with a basic wms layer but the fragmentation of bubbles and labels requires I use either Single Tile or Meta-Tiled WMS requests.

I am constructing the layer object with the geoserver required properties but OpenLayers overwrites many of them which I think is preventing Meta-Tiling from actually working.

This worked great in Leaflet so I know there isn't an issue on GeoServer so there must be something I'm missing. Any help is much appreciated.

   var mapBounds = this.getCurrentBounds('EPSG:4326');
   var mapSWOrigin = [mapBounds._southWest.lng, mapBounds._southWest.lat].toString();

   var wmsLayer = new ol.layer.Tile({
                    extent: [-20026376.39, -20048966.10, 20026376.39, 20048966.10],  //epsg:3857 extent
                    preload: true,
                    source: new ol.source.TileWMS({
                        url: window.location.origin+"/geoserver/wms/",
                        params: {
                            'LAYERS': geoserverName, 
                            'VERSION': '1.3',
                            'SRS': 'EPSG:4326', // THIS GETS OVERWRITTEN. also tried EPSG:3857
                            'BBOX': extent, //THIS GETS OVERWRITTEN. Tried extent of the current state of the map and the extent of the projection (ex: [21.99937, -18.07947, 33.7057, -8.22436])
                            'TILED': true,
                            'STYLES': layer.getSldName() || "",
                            'TILESIZE': 256,
                            'FORMAT': 'image/png',
                            'TILESORIGIN': mapSWOrigin
                        },
                        serverType: 'geoserver'
                    }),
                    visible: true
            });

The resulting request captured from the browser console:

https://localhost:8443/geoserver/wms/?SERVICE=WMS
&VERSION=1.3.0
&REQUEST=GetMap
&FORMAT=image%2Fpng
&TRANSPARENT=true
&LAYERS=geodashboard%3Alv_sjym3xbpypz4un9nm3xnvy6873p1k1nn_1psl34vde5
&BBOX=3757032.814272985%2C-1252344.271424327%2C5009377.085697313%2C6.984919309616089e-10 // NOTICE THIS IS NOT EPSG:4326 UNITS
&TILED=true
&STYLES=lv_sjym3xbpypz4un9nm3xnvy6873p1k1nn_1psl34vde5
&TILESIZE=256
&TILESORIGIN=9.428462734375003%2C-18.869002237258456
&WIDTH=282
&HEIGHT=282
&CRS=EPSG%3A3857  // NOTICE THIS IS NOT EPSG:4326
&FORMAT_OPTIONS=dpi%3A99

Answer 1

You are using SRS instead of CRS, which is required for WMS 1.3.

Best Regards, Gerhard

Answer 2

Try it sample code

 var z = tileCoord[0];
  var x = tileCoord[1];
  var y = tileCoord[2];
  var tileGrid = source.getTileGrid();
  var tileGridOrigin = tileGrid.getOrigin();
  var tileSizeAtResolution = tileGrid.getTileSize(z) * tileGrid.getResolution(z);
  return [
      tileGridOrigin[0] + tileSizeAtResolution * x,
      tileGridOrigin[1] + tileSizeAtResolution * y,
      tileGridOrigin[0] + tileSizeAtResolution * (x + 1),
      tileGridOrigin[1] + tileSizeAtResolution * (y + 1)
  ];