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'

  • You are attempting to mix RESTful and KVP requests which probably won't work. You need an OL component that understands KVP requests to WMTS. I would normally say ol.source.WMTS but it is unclear if that will handle vector tiles
    – Ian Turton
    Commented Jan 25, 2019 at 16:51

2 Answers 2


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:' + ??? ;
  • Is there is any way to get bounding box of the requested vector tile ??? Commented Jan 28, 2019 at 6:32
  • source.getTileGrid().getTileCoordExtent(tileCoord).toString() Inside a tileUrlFunction you can use this for source.
    – Mike
    Commented Jan 28, 2019 at 9:37

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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