How to reload WMTS Tiles after progromattically changing the map center and zoom?

Question

I'm implementing a feature for users to select a list item that corresponds to a point on the map. I am currently able to set the correct map center and the zoom level but the map tiles are blank until I cause a MouseWheelZoom interaction to occur on the map. How do I get my WMTS layers to update to the new zoom level and map extent?

Answer 1

In principle, changing the tileUrlFunction of a WMTS source will trigger a refresh, because that clears the tile cache. If you're lucky and your WMTS server makes proper use of Etags, just using the same url function again will work:

wmtsSource.setTileUrlFunction(wmtsSource.getTileUrlFunction());

If your WMTS server just sets expire headers, you'll have to append something to the url to force the browser to refetch it. Assuming you use KVP encoding to talk to your WMTS server, you could achieve this by doing something like

var random = Math.random();
var originalTileUrlFunction = wmtsSource.getTileUrlFunction();
wmtsSource.setTileUrlFunction(function() {
  return originalTileUrlFunction.apply(this, arguments) + '&' + random;
});