Error using Openlayer vectortile custom renderfunction for vectortiles

Question

Error using Openlayer vectortile custom renderfunction vector tiles Openlayer layers allow to set a custom render function, as mentioned in https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html. It says the render function takes the frame state as input and is expected to return an HTML element. This will overwrite the default rendering for the layer. I found an example of older versions of openlayers, but that does not work on openlayers 6. I tried using CanvasVectorTileRenderer as mentioned in https://openlayers.org/en/latest/apidoc/module-ol_renderer_canvas_VectorTileLayer-CanvasVectorTileLayerRenderer.html When not defining a custom render function everything Works smooth. But when I add the customer render function I got error message saying

VectorTileLayer.js:574 Uncaught TypeError: Cannot read properties of null (reading 'globalAlpha')
    at n.renderDeclutter (VectorTileLayer.js:574)
    at n.renderDeclutter (BaseVector.js:228)
    at n.renderFrame (Composite.js:137)
    at n.Fe (PluggableMap.js:1455)
    at n.<anonymous> (PluggableMap.js:214)

My code looks like:

class customCanvasVectorTileLayerRenderer extends ol.renderer.canvas.VectorTileLayer {
  constructor (frameState, layer) {
    super(frameState, layer)
  }
  getTile(z, x, y, frameState) {
    console.log("customCanvasVectorTileLayerRenderer - getTile: ", frameState, z, x, y)
  }
}

urlnk = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + 'GeoNetPutten:straten' +'@EPSG%3A'+'28992'+'@pbf/{z}/{x}/{-y}.pbf'
tg=ol.tilegrid.createXYZ({maxZoom: 16, minZoom: 8, extent: [-285401.92, 22598.08, 595401.9199999999, 903401.9199999999]}) //, tileSize: 256}) 
src= new ol.source.VectorTile({
    projection: proj28992, 
    tileGrid: tg, 
    format: new ol.format.MVT({defaultDataProjection: 'EPSG:28992'}),
    url: urlnk
})

var straatnamenpbf = new ol.layer.VectorTile({
      title: 'Straatnamen pbf',
      source: src,
      render: function (frameState) {
        var x = new customCanvasVectorTileLayerRenderer(this)
        return x
    }
})


Also when trying to directly use the existing renderer I get same error:
var straatnamenpbf = new ol.layer.VectorTile({
      title: 'Straatnamen pbf',
      source: src,
      render: function (frameState) {
        var x = new ol.renderer.canvas.VectorTileLayer(this)
        return x
    }
})

I guess I am mixing up things, but anyone who could help on creating a custom renderer for vectortiles in openlayers 6?

score 0 · Answer 1 · answered Dec 19 '21 at 13:08

The custom getTile method is doing nothing apart from logging the passed arguments, so other inherited methods may not get the data they expect. You should either add your own custom code or call the method from the parent class, or add your own custom renderDeclutter method which will work with your getTile method

class customCanvasVectorTileLayerRenderer extends ol.renderer.canvas.VectorTileLayer {
  constructor (frameState, layer) {
    super(frameState, layer)
  }
  getTile(z, x, y, frameState) {
    console.log("customCanvasVectorTileLayerRenderer - getTile: ", frameState, z, x, y);
    return super.getTile(z, x, y, frameState);
  }
}

Error using Openlayer vectortile custom renderfunction for vectortiles

1 Answers1