How to pass viewparams with vector tile request using open layers 5

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 pass viewparam along with vector tile request. Here is my sample code:

    var layer = 'cite:OPE_MAP_SpatelSpeed';
    var projection_epsg_no = '900913';

      var tmcsource = new ol.source.VectorTile({
          cacheSize: 0,
          tilePixelRatio: 1, // oversampling when > 1
          tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19, tileSize: 512 }),
          format: new ol.format.MVT(),
          url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + layer +  '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf'

      });


    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform([-74.0, 40], 'EPSG:4326', 'EPSG:900913'),
            zoom: 7
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),

            new ol.layer.VectorTile({
            style: simpleStyle,
            renderMode: 'image',
            source: tmcsource
        })]
    });

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'

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'. This call is working fine.

I don't know how to pass view param with this vector tile request URL. 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf'

Answer 1

A WMTS url can usually be constructed using {x} {y} {z} placeholders

url: 'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:OPE_MAP_SpatelSpeed&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}&VIEWPARAMS=ispercent:1;R:0000FF;zoomlevel:7' 

If the matrix id doesn't match the standard tilegrid zoom level or the VIEWPARAMS can change, instead of the url option you can specify a tileUrlFunction to construct a custom url, e.g.

    tileUrlFunction: function(tileCoord, pixelRatio, projection) {
        return 'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:OPE_MAP_SpatelSpeed&STYLE=' +
           '&TILEMATRIX=' + projection.getCode() + ':' + tileCoord[0] +
           '&TILEMATRIXSET=' + projection.getCode() +
           '&FORMAT=application/vnd.mapbox-vector-tile' +
           '&TILECOL=' + tileCoord[1] +
           '&TILEROW=' + (-(tileCoord[2]+1)) +
           '&VIEWPARAMS=ispercent:1;R:0000FF;zoomlevel:' + ??? ;
     }

Answer 2

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