如何刷新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();

        }