How to get bounding box of WMTS request

Question

I want to create an application using vector tile. I am using openlayers v.5 and geoserver 2.14.1 for this purpose. I have already rendered vector tiles, but not able to get bounding box of the vector tile. Here is my sample code:

      var gridsetName = 'EPSG:4326';

      var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];

       var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
        var style = '';
        var format = 'application/vnd.mapbox-vector-tile';
        var infoFormat = 'text/html';
        var layerName = 'cite:OPE_MAP_SpatelSpeed';
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });

   function constructSource() {
            params = {
                'REQUEST': 'GetTile',
                'SERVICE': 'WMTS',
                'VERSION': '1.0.0',
                'LAYER': layerName,
                'STYLE': style,
                'TILEMATRIX': gridsetName + ':{z}',
                'TILEMATRIXSET': gridsetName,
                'FORMAT': format,
                'TILECOL': '{x}',
                'TILEROW': '{y}',
                'VIEWPARAMS': 'ispercent:1;R:0000FF;zoomlevel:' + getzoom() + '',
            };

            var url = baseUrl + '?'
            for (var param in params) {
                url = url + param + '=' + params[param] + '&';
            }

            url = url.slice(0, -1);

            var source = new ol.source.VectorTile({
                url: url,
                format: new ol.format.MVT({}),
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    tileSize: [256, 256],
                    origin: [-180.0, 90.0],
                    resolutions: resolutions,
                    matrixIds: gridNames
                }),

                wrapX: true
            });

            return source;
        }


  var layer = new ol.layer.VectorTile({
            style: simpleStyle,
            source: constructSource()
        });

  map.addLayer(layer);

sample request call using wmts service:'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:OPE_MAP_SpatelSpeed&STYLE=&TILEMATRIX=EPSG:4326:9&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL=300&TILEROW=139&VIEWPARAMS=ispercent:1;R:0000FF;zoomlevel:7'.

My layer cite:OPE_MAP_SpatelSpeed is generated using SQL view of geoserver in which i have to pass few viewparams to fetch the data accordingly. e.g viewparam ='zoomlevel:4;func:1'

My problem is along with viewparams i have to pass bounding box of the requested tile. Does there is any way to get bounding box coordinates of the requested vector tile Or how can we calculate the bounding box on the basis of tile column and row number??

I have read about getTileCoord() function in openlayers but this function is not working in my case.

Answer 1

Try something like this to get the bounding box of the requested tile:

function tileExtent (tileXYZ, source) {
    var z = tileXYZ[0];
    var x = tileXYZ[1];
    var y = tileXYZ[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)
    ];
}