[GIS] Force reload of Tiles in Layer

openlayers

I want to display an indoor map. My problem is that when I change to another floor (the URL changes) the tiles are not refetched. The following code is used:

var indoorSource = new ol.source.XYZ({
    crossOrigin: null,
    tileUrlFunction: parseUrl,
    maxZoom: 45
});
var indoorLayer = new ol.layer.Tile({
    source: indoorSource
});

The parseUrl function is the following:

var parseUrl = function (tileCoords, pixelRatio, projection) {
    var url = 'http://127.0.0.1/tiles/{z}/{level}/{x}/{y}';
    var innerMap = LocalUserData.currentInnerMap();

    url = url.replace('{level}', innerMap.level || 0);
    url = url.replace('{z}', tileCoords.z || 0);
    url = url.replace('{x}', tileCoords.x || 0);
    url = url.replace('{y}', tileCoords.y || 0);
    return url;
};

Is there a way to force a reload of the tiles?

Best Answer

There are 2 ways to avoid getting cached data.

  1. Add additional parameter in your request and make it's value to Math.random() , so every time browser will deal with this request as new and will fetch it from source and will not depend on cache. for example: 
var mr = Math.random();  
var url = 'http://127.0.0.1/tiles/{z}/{level}/{x}/{y}&AutoKey=' + mr ;
  1. Another way that you use POST in your request instead of GET, indeed you are forcing the browser to get data from server.

I have already went through a similar issue specially with IE but my problem was fetching cached vector data while they have been changed already.

Related Question