如何刷新Openlayer中的單個圖塊？

Question

我正在嘗試構建一個具有隨着時間變化的圖塊的應用程序。 到目前為止，我只能刷新整個圖塊源。 但是，每次刷新時，整個圖片都會短暫閃爍-圖片被刪除並重新繪制。 但是，如果切片正在加載，則僅重畫加載了新切片的圖像的一部分。 我想得到類似的行為

var Source=new ol.source.OSM({
                url: 'http://localhost:900/{z}-{x}-{y}.png',
                attributions:[],
                wrapX: false    ,
                tileLoadFunction:function(imageTile, src) {var mr = Math.random();    imageTile.getImage().src = src+'?t='+mr;}
            });

加上令人耳目一新：

Source.tileCache.expireCache({});
            Source.tileCache.clear();
            Source.refresh();

Answer 1

如果不重寫OpenLayers的一部分，可能無法更改刷新的方式，但是如果您維護每個圖塊的更新時間戳而不是添加隨機值，則OpenLayers將在不需要更新時使用瀏覽器緩存，而不是從服務器重新加載每個圖塊，刷新速度更快，因此閃爍應該不太明顯。 由於它將由圖塊坐標索引，因此需要將其添加到tileUrlFunction中，而不是tileLoadFunction中。 OSM構造函數不支持tileUrlFunction，但是可以使用XYZ代替。

var startTime = new Date().getTime();
var updateTimes = {};

var source = new ol.source.XYZ({
    attributions:[],
    wrapX: false,
    tileUrlFunction: function(tileCoord) {
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = -tileCoord[2]-1;
        var timestamp = updateTimes[ z + '_' + x + '_' y ] || startTime;
        return 'http://localhost:900/' + z + '-' + x + '-' + y + '.png?t=' + timestamp;
    }
});

function refresh(x, y, z) {
  updateTimes[ z + '_' + x + '_' y ] = new Date().getTime();
  source.refresh();
}

通過在刷新之前預加載新的圖塊以填充瀏覽器緩存，可能會得到進一步的改進

function refresh(x, y, z) {
  updateTimes[ z + '_' + x + '_' y ] = new Date().getTime();
  var img = document.createElement("img");
  img.onload = function() {
      img.remove();
      source.refresh();
  };
  img.src = 'http://localhost:900/' + z + '-' + x + '-' + y + '.png?t=' + updateTimes[ z + '_' + x + '_' y ];
}

Answer 2

我解決了它-您無法刷新整個源，但是只能從緩存中刪除磁貼：

function RefreshIndividual(z,x, y) {
            var index= z+'-'+x+'-'+y;
            var index2= z+'/'+x+'/'+(-y-1);
            updateTimes[index] = new Date().getTime();
            console.log(index,'t'+updateTimes[index]);
            Source.tileCache.remove(index2);
            Source.changed();

        }