I have a map in OpenLayers with TileWMS source that's not very reliable. At almost every full page load there are a few tiles that fail to load with status 503 - Service Unavailable
. When I try to load failed tile a bit later 'manually', it loads without a problem. That lead me to the idea of reloading failed tile if first try is not successful.
I couldn't find any OpenLayers 'official' way of doing that, so I tried to achieve that using tileLoadFunction
, where I initiate reload of the tile with 2 seconds delay and before reload check if tile was already loaded successfully. Reload is triggered by first assigning dummy image source for tile and then the original one. Successful loading of the tile is checked by hooking on tileloadend
event and setting custom flag evt.tile._loaded = true
.
Here is the relevant code:
proj4.defs('EPSG:3912',
'+proj=tmerc +lat_0=0 +lon_0=15 +k=0.9999 +x_0=500000 +y_0=-5000000 +ellps=bessel +towgs84=682,-203,480,0,0,0,0 +units=m +no_defs');
var proj3912 = ol.proj.get('EPSG:3912');
proj3912.setExtent([374371.84, 30513.32, 624119.18, 195517.48]);
var tileGridResolutions = [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5];
var dofLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://prostor4.gov.si/ows2-m-pub/wms',
attributions: ['<a href="http://www.gu.gov.si/">GURS</a>'],
params: {
'LAYERS': 'SI.GURS.ZPDZ:DOF050_D48',
'FORMAT': 'image/png',
'VERSION': '1.3.0'
},
tileGrid: new ol.tilegrid.TileGrid({
extent: proj3912.getExtent(),
resolutions: tileGridResolutions,
tileSize: 256
}),
tileLoadFunction: tileLoadFunction,
projection: proj3912
}),
title: 'Ortofoto',
type: 'base'
});
function tileLoadFunction(imageTile, src) {
imageTile.getImage().src = src;
if (typeof imageTile._retry == 'undefined') {
imageTile._retry = 0;
imageTile._loaded = false;
}
if (imageTile._retry < 3) {
imageTile._retry++;
setTimeout(function() {
if (!imageTile._loaded) {
imageTile.getImage().src = 'img/empty.png';
tileLoadFunction(imageTile, src);
}
}, 2000);
}
}
dofLayer.getSource().on('tileloadend', function(evt) {
evt.tile._loaded = true;
});
Unluckily this method works only in old venerable IE11, but not in Firefox and Chrome. There is no error, it just seems like image is not transferred from image element to canvas. Since I work in ES5 JS, I cannot debug OpenLayers internals to see where the problem is.
Is there any way to make the above method work in Firefox and Chrome or some other approach to try reloading failed TileWMS
tile?