Hide old tiles while loading new ones when zooming in Openlayers

Question

Standard behavior, while zooming in and out in Openlayers, is that the current tile gets resampled and displayed stretched or compressed until the new tile is available. That's how it looks like while zooming in:

Is it possible to change this behavior on layer level so that the old tile is hidden till the new one is loaded? I would like to apply that to ol.layer.Tile and ol.layer.VectorTile layers.

In my usage case I zoom in quite often when selecting features so tiles from low zoom levels get streched quite heavily. I would prefer to make them invisible and show the background color while loading new tiles.

Note: In Openlayers 2 there was a transitionEffect parameter in OpenLayers.Layer.WMS as shown in this example. 'default' value sounds like what I need, also I don't see any difference to 'resize' value...

As a workaround I could think of listening to tileloadstart and tileloadend events and meanwhile set opacity of the whole layer to 0. But I would prefer to see tiles appearing as the get loaded.

Answer 1

ol.source.[TYPE].refresh() is the closest native OL4 answer to the problem if hooked into the change:resolution event of the view and if the source is unset from the layer based on all zoom interpreted actions.

var map;
baseSource = new ol.source.OSM();
baseLayer = new ol.layer.Tile({
  name: "OSM Basemap",
  source: baseSource
});

var view = new ol.View({
  center: [0, 0],
  zoom: 2
});

map = new ol.Map({
  target: "map",
  layers: [ baseLayer],
  view: view,
  controls: [new ol.control.Zoom()]
});

$("#map .ol-zoom-in").on('click',function() {
    baseLayer.unset('source');
});
$("#map .ol-zoom-out").on('click',function() {
    baseLayer.unset('source');
});
$("#map").on('dblclick',function(){
        baseLayer.unset('source');
});
$("#map").on('wheel',function(){
        baseLayer.unset('source');
});

view.on("change:resolution", function(e) {
  if (Number.isInteger(e.target.getZoom())) {
    baseSource.refresh();
    baseLayer.setSource(baseSource);
  }
});

document.getElementById('zoom').addEventListener(
'change',
function() {view.setZoom(this.value);},
false);

This will first unset the layer source when a zoom user event is triggered - may cause false positives for now but demonstration works. Once a change of the resolution is triggered - usually through a zoom event completing - the canvas refreshes and draws with the tiles from the new zoom level.

Click here for the fiddle

While the example uses a tile layer and OSM source I can't see any reason why this wouldn't work with other layer and source types. All layers require a source to be specified (providing the "unset" and "setSource" functions) and all Sources provide the "refresh" function.

Answer 2

I think there is no way to hide single tiles yet. But you can hide the complete layer while loading using this code:

// hides layer on zoom and shows it again if all tiles are loaded
function setTileHidingWhileLoadingFor(tileLayer){
    // need source to listen to tile load events
    let source = tileLayer.getSource();
    // keep track of tiles
    let tilesToHandleCount = 0;

    // handle layer source events
    source.on("tileloadstart", function(){
        tilesToHandleCount += 1;
        // make layer invisible
        tileLayer.setVisible(false);
    });

    // inner function that is used on tile load success & fail
    function decreaseTilesToHandleAndMakeLayerVisible(){
        tilesToHandleCount -= 1;
        if(tilesToHandleCount == 0){
            // make layer visible again
            tileLayer.setVisible(true);
        }
    }

    source.on("tileloadend", function(){
        decreaseTilesToHandleAndMakeLayerVisible();
    });

    source.on("tileloaderror", function(){
        decreaseTilesToHandleAndMakeLayerVisible();
    });
}

At least it is working with a simple OSM tile layer.