Openlayers 3替换失败的图块

Question

We are running Open Layers 3.15. Sometimes we get a dropped or failed tile. Currently it displays nothing, (which can be confusing for our users) so we'd like to replace this with a tile that says 'no data' or something. I've tried picking up the event and replacing the source of the tile eg

            source.on('tileloaderror', function(){
               source.setUrl('./images/map/failureTile.png');
            });

but the problem with this is, instead of doing this on 1 tile, it does it for the entire layer, we don't want that.

Anyone know how we can do this for just the tile that failed and not the entire layer?

Answer 1

It's 2018, but for someone who may need this. Tested on v5.3.0

source.on('tileloaderror', function (event) {
  var tileLoadFunction = function (imageTile, src) {
    imageTile.getImage().src = './images/map/failureTile.png';
  };
  if (event.tile.tileLoadFunction_ != tileLoadFunction) {
    event.tile.tileLoadFunction_ = tileLoadFunction;
    event.tile.load();
  }
});

This code relys on private function event.tile.tileLoadFunction_ is exposed.

Unfortunately xnakos' answer doesn't work on v5.3.0 because the event.tile.getImage() has been replaced with 1x1 canvas image by internal error handler.

Also noted, changing event.tile.src_ directly, seems to be an option, but it doesn't work either because of cache key or something.

Answer 2

A tile which failed to load should have a distinct class (.olImageLoadError). You can define a CSS rule not show these items.

.olImageLoadError { 
    display: none !important;
}

Answer 3

You could try this:

source.on('tileloaderror', function(event) {
    event.tile.getImage().src = './images/map/failureTile.png';
});

You need the event parameter, that can get you the tile that failed, so that you can change the tile's image.

Warning: I tested the code above using tileloadend instead of tileloaderror , because my tiles never fail on me. :) I used a simulated failure rate using Math.random() and some random tiles were replaced by the image specified. I cannot think of a reason the code above would not work. If you verify it works, I will remove this warning from my answer. I tested it on OpenLayers 3.14.2 and on an OSM source.