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()


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.


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)
  • tileGrid already has a getTileCoordExtent() method which does that – Mike Jan 28 '19 at 9:43
  • Didn't check, sorry. This method was not there back in v3.x times. – Ulas Jan 28 '19 at 10:31
  • Yes, introduced in 3.12 Before that you had to do it the long way if you wanted to build a custom url for WMS tiles, etc. – Mike Jan 28 '19 at 10:39
  • It worked, Thanx !!! – Neha Sharma Jan 28 '19 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.