How to best map vector tiles in OL3 with missing zoom levels?

Question

I'm basically doing the same as https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt except I'm serving up a custom map with a NodeJS web server with a data set based off of OSM.

I've merged the data so I have the whole world at 0-8 zoom levels and parts of the world that are more important at 0-14 zoom levels all as mbtiles. Here is my basic layer definition:

new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      overlaps: false,
      attributions: "© <a href='https://www.openstreetmap.org/copyright'>" +
        "OpenStreetMap contributors</a>",
      format: new ol.format.MVT(),
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 14}),
      tilePixelRatio: 16,
      url: "/maptiles/osm/{z}/{x}/{y}.vector.pbf"
    }),
    style: createMapboxStreetsV6Style()
  });

Previously I was using a bit of a hack with a vector source and vector layers with GEOjson data. I have several problems with the new method that OL3 seems to be moving towards:

1. If I set it to zoom level 14 as the max then as you pan around it will just request zoom level 14 and not request 8 that may only be available in that area. If I try to return the 8th zoom level data from the web server, then obviously the x and y are off and you get bad data.

2. The other issue I have is before since it was vector data it didn't matter how much you zoomed in, it still looked okay and I guess was re-rendered. Now, if I zoom past zoom level 8 anywhere that doesn't have more than that (even if I set maxzoom to 8), it just gets blurry like a PNG tile would. It seems like there should still be a way to have it redraw the same vector data. After all that's half the point of using vector data and not PNGs.

Blurry Image with max zoom level 8

Any help and ideas would be appreciated. Thanks.

Answer 1

To resolve your first issue, the key to reusing tiles for different zoom levels is to define a custom tile grid with new ol.tilegrid.TileGrid() instead of ol.tilegrid.createXYZ() . Depending on how you organise your zoom levels, you may also need a custom tileUrlFunction configured on the ol.source.VectorTile , to translate tile grid zoom levels (which are always 0,1,2,...) to the zoom levels your tile set uses.

Your second issue can be simply be resolved by configuring the ol.layer.VectorTile with renderMode: 'vector' .

Both techniques are shown in the https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html example. Your tile grid configuration will be a bit different though.