How to pass tile size of to 512 using OpenLayer 3 and GeoServer 2.14

Question

I am trying to change the default tile size of 256 to 512 using OpenLayers 3. Code is working fine for normal WMS request, but giving error (tiles not loading) for WMS-C request.

My sample code is:

var projExtent = ol.proj.get('EPSG:3857').getExtent();
    var startResolution = ol.extent.getWidth(projExtent) / 256;
    console.log("startResolution:", startResolution);
    var resolutions = new Array(22);
    for (var i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = startResolution / Math.pow(2, i);
    }

  var tileGrid = new ol.tilegrid.TileGrid({
        minZoom: 6,
        extent: [-13884991, 2870341, -7455066, 6338219],
        resolutions: resolutions,
        tileSize: [512, 512]
    });

   var demolayer2 = new ol.layer.Tile({
        source: new ol.source.TileWMS({


           // url: 'http://localhost:8080/geoserver/wms',
            url: 'http://localhost:8080/geoserver/gwc/service/wms',

            params: { 'LAYERS': 'topp:states', 'TILED': true, 'SRS': 'EPSG:3857'},

            serverType: 'geoserver',
            tileGrid: tileGrid

        })
    })

   var view = new ol.View({
            center: ol.proj.transform([-74.0, 40], 'EPSG:4326', 'EPSG:900913'),
            zoom: 7,
            projection: projection,
            extent: [-13884991, 2870341, -7455066, 6338219]
        });

        var map = new ol.Map({
            controls: ol.control.defaults({ attribution: false }).extend([
                new ol.control.MousePosition()

            ]),
            target: 'map',
          //  pixelRatio: 1,
            view: view
        });

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

        map.addLayer(osm);
        map.addLayer(demolayer2);

when i use url: 'http://localhost:8080/geoserver/wms' following request has been send and everything is working fine. 'http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=topp%3Astates&TILED=true&SRS=EPSG%3A3857&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&BBOX=-8875613.914302688%2C4459702.5928635085%2C-8249441.778590525%2C5085874.728575672'

But, when i use 'http://localhost:8080/geoserver/gwc/service/wms' following request has been send 'http://localhost:8080/geoserver/gwc/service/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=topp%3Astates&TILED=true&SRS=EPSG%3A3857&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&BBOX=-8249441.7785905255%2C4459702.5928635085%2C-7623269.642878362%2C5085874.728575672'

and it gives following error: '400: X,Y values for the tile index were calculated to be {18.825600646767, 39.12216711529674} which had to be rounded to {19, 39} and exceeds the threshold of 10%. Perhaps the client is using the wrong origin ?'

I have also created gridset in geoserver with 512 pixel size.

Answer 1

Your resolutions array is based on a different extent to the tilegrid (and also assumes 256px tiles). Assuming your server is using a standard EPSG:3857 tilegrid this should work:

  var tileGrid = new ol.tilegrid.TileGrid({
        minZoom: 6,
        extent: projExtent,
        resolutions: resolutions.slice(1),
        tileSize: [512, 512]
    });

   var demolayer2 = new ol.layer.Tile({
        source: new ol.source.TileWMS({

            url: 'http://localhost:8080/geoserver/gwc/service/wms',

            params: { 'LAYERS': 'topp:states', 'TILED': true, 'SRS': 'EPSG:3857'},

            serverType: 'geoserver',
            tileGrid: tileGrid

        }),
        extent: [-13884991, 2870341, -7455066, 6338219]
    })

If the server's tilegrid is based on your own custom extent you should calculate your resolutions array from that.

Answer 2

If you want to do anything out of the ordinary you should use the WMTS/WMS-C/TMS end points rather than relying on the GWC WMS endpoint which makes a best guess effort to break your requests into tiles and merge them to give you a WMS response.