Openlayers Pbf vector tiles bad performance

Question

So, I have performance issue using pbf vector tiles while panning/zooming in and out until tiles are being rendered (eg. if you try to zoom in and pan before tiles are rendered screen will freeze shortly), after rendering is done everything runs smooth. Its probably important to note that I'm implementing offline map feature for android/IOS and that I have stored pbf tiles on my device. So here's what I'm currently doing:

// create vector tile layer
const layer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVT(),
    url: 'offline-pbfs/{z}/{x}/{y}.pbf', // Url on device
    tileLoadFunction: this.tileload,
    maxZoom: 14
  })
});

// custom load tiles function for loading tiles from device storage
private tileload = (tile, url) => {
  tile.setLoader((extent, resolution, projection) => {
    this.file.readAsArrayBuffer(this.file.dataDirectory, url)
      .then(data => {
        const format: any = tile.getFormat();
        tile.setFeatures(format.readFeatures(data, {extent}));
    })
    .catch(err => logger.error(err, 'Error loading tile', url));
  });
}

// obtain and apply osm-bright-style.json
this.offlineMapService.getOfflineMapStyle().subscribe(styleData => {
  applyStyle(layer, styleData, 'openmaptiles').then((_: any) => {
    this.map.addLayer(layer);
  });
})

I've tried playing around with renderOrder, renderBuffer, renderMode, declutter options but it didn't help out. Also I here you can see that during zooming/panning map stutter and it's just not smooth. Any help would be greatly appreciated

Answer 1

Features are re-styled with every zoom,pan,etc and if the style is being redefined each time it will be slow. If you can save the style as a variable once per feature, then on subsequent zooms get the style from the variable rather than making the style again.