Is there a way to tell OpenLayers to use a Different Tile on TILEERROR?

Question

Given some ESRI Vector Tile service, I'd like to tell OpenLayers how to handle tile errors from the VectorTileSource. Specifically, I'd like to tell OpenLayers that when a tile fails to load over the network, OpenLayers should use "this other" tile instead, and draw it stretched.

My application has some "magic" to figure out what the tileCoord values would be for the new tile.

function _magic(tile, url) { /* returns tileCoordLike like [z, x, y] from tilecoord.js 
createOrUpdate*/}
function _request(tile, url) { /* returns Promise */}

// https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction
function tileLoadFunction(tile, url) {

  _request(tile, url).then(
    function () { /*success*/ console.log('it worked, great')},
    function () { /*error*/
      let tileCoordLike = _magic(tile);
      console.log("Need to use a different tile instead:");
      console.log(tileCoordLike);
      tile.setState(ol.TileState.ERROR);
  })
})

Similar questions have asked how to tell OpenLayers to use a static image, but I actually want OL to use a different tile instead. Is there some way to do this?

Answer 1

I had a similar requirement when storing tiles in IndexedDB but it should also work with alternative urls.

Note that a tile load function for vector tiles is more complex than those for image tiles as it must set a loader function for the tile, see the example in https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html

First create a function to fetch a url and return the result as an object url, or if that fails return an alternative url

function altFetch(url1, url2) {
    fetch(url1).then(function(response) {
        if (response.ok) {
            return response.blob();
        }
    }).then(function(result) {
        if (result) {
            resolve(URL.createObjectURL(result));
        } else {
            resolve(url2);
        }
    });
}

Then in the load function (using the default loader from https://github.com/openlayers/openlayers/blob/main/src/ol/featureloader.js#L60) you should revoke the memory hogging object url

function(tile, url) {
    tile.setLoader(function(extent, resolution, projection) {
        altFetch(url, magic(tile, url)).then(function(result) {
            let onLoad;
            if (result.indexOf('blob:') == 0) {
                onLoad = function() {
                    tile.onLoad.bind(tile).apply(null, arguments);
                    URL.revokeObjectURL(result);
                }
            } else {
                onLoad = tile.onLoad.bind(tile);
            }
            loadFeaturesXhr(
                result,
                tile.getFormat(),
                extent,
                resolution,
                projection,
                onLoad,
                tile.onError.bind(tile)
            );
        });
    });
}