overzoom on OpenLayers3 or a possible alternative

Question

I'm currently trying to view a local mbtiles file of the Netherlands using OpenLayers3. Now, in itself, it's working great. I'm using a modified version of the tileserver-php framework to server the tiles into a .pbf format to then display them in Vector tiles. The result looks like this:

Which is great! However; the problem is that I need more detail than the maxzoom allows. The Maximum zoom within the metadata of the mbtiles itself is 14. Now, I know of 'overzooming', however I have not found a way to properly do this on OpenLayers. Is there something I'm overlooking that I need to set up? So far I've tried the following:

• Copied the example in https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html , see below for the result of that

• Set up my own resolutions

• Tried to have maxZoom off or on a value of greater than 14 (which results, unsurprisingly, in empty tiles)

Additionally: I return 404's on tiles that can't be loaded. Now I'm getting deeper zooms but with awful pixelation.

Answer 1

In the end, I decided to go with Mapbox GL JS to achieve what I needed. To be fair, this was what was suggested to use with this kind of thing anyways.

Edit:

After trying to run the application with Mapbox GL JS on a Android 4.4 device, we had to switch back to OpenLayers either way. This time, we used Openlayers 4.6.4 and it seemed that the issue with overzoom was fixed. In the map we set declutter to true and set the rendermode to vector just like before. Overzoom works properly now.

Answer 2

You can do that suppling extra resolutions on the view. Check this:

These are the OSM default resolutions (zoom levels)

var osmRes = [156543.0339, 78271.51695, 39135.758475, 19567.8792375, 9783.93961875, 4891.969809375, 2445.9849046875, 1222.99245234375, 611.496226171875, 305.7481130859375, 152.87405654296876, 76.43702827148438, 38.21851413574219, 19.109257067871095, 9.554628533935547, 4.777314266967774, 2.388657133483887, 1.1943285667419434, 0.5971642833709717];

An here is the same resolutions adding a few more to support some extra zoom levels

var customRes = [156543.0339, 78271.51695, 39135.758475, 19567.8792375, 9783.93961875, 4891.969809375, 2445.9849046875, 1222.99245234375, 611.496226171875, 305.7481130859375, 152.87405654296876, 76.43702827148438, 38.21851413574219, 19.109257067871095, 9.554628533935547, 4.777314266967774, 2.388657133483887, 1.1943285667419434, 0.5971642833709717,0.41999977320012255, 0.2799998488000817,0.13999992440004086, 0.08399995464002451, 0.05599996976001634, 0.02799998488000817]

Now supply the custom resolution object to the view of your map

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [raster],
  target: 'map',
  view: new ol.View({
    resolutions : customRes,
    center: [-11000000, 4600000],
    resolution    : 156543.0339
  })
});

Of course your tiles below the default resolution will be stretched as the zoom takes place on images. Here is a fiddle to test .