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 Jan 25 '19 at 16:51

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 ??? – Neha Sharma Jan 28 '19 at 6:32
  • source.getTileGrid().getTileCoordExtent(tileCoord).toString() Inside a tileUrlFunction you can use this for source. – Mike Jan 28 '19 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, privacy policy and cookie policy

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