Force tiles to load higher resolution in Openlayers

Question

I've got some offline pbf files that I load into Openlayers through a HttpServer. These are static vector tiles of a certain area. Now I'm working on making sure that these are visible at the zoomlevel it needs to be.

From the data, the maximum zoom level is 14. I'm trying to view it at 18. Which has worked by loading the map at zoom level 14 before switching to 18 (with a very hacky setTimeout). After moving too far on the map towards the next tile, it won't show it anymore because it requests tiles at zoomLevel 18. Obviously this isn't good practice.

How else would one do this? The basic behaviour is that at Zoom 18 I want to display tiles from Zoom 14.

code:

  var baseLayer =  new ol.layer.VectorTile({
            declutter: true,
            renderMode: 'vector',
            preload: Infinity,
            source: new ol.source.VectorTile({   
                format: new ol.format.MVT(),
                url: this.tilesUrl,
                overlaps: false,
                tileGrid: new ol.tilegrid.TileGrid({
                    extent: ol.proj.transformExtent(this.route.extent, 'EPSG:4326', 'EPSG:3857')
                })
            }),
            style: this.style
        });

What I've looked into so far:

• Set 'Preload' on the source to true.
• Setting a TileGrid (I couldn't get this one to work properly)
• Setting custom resolutions myself and forcing the resolution to zoom 14 and below (this just simply didn't work, it won't load any data at all trying this)

Answer 1

Found my answer here: Load vector tiles (pbf) directly from mbtiles database using OpenLayers 3

Basically; creating a tilegrid actually was the answer but my attempt was just.. bad.

The correct way was as follows:

tileGrid: new ol.tilegrid.createXYZ({tileSize: 256, maxZoom: 14})

That said; this is for MBtiles that come from a database that are sized 256x256 and have maximum zoom of 14. Your mileage may vary based on what you'd need.