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

我解决了它-您无法刷新整个源，但是只能从缓存中删除切片：

   Name        F        R   Frequency                                                 
Sample1   CGATCG  AGCTAGC          1
Sample1    ACGTG   AGCTGA          2
Sample1   CGTCAG   GGCTTT          2
Sample1   CGGGGT   GGGTTC          5
Sample1    GCTGC  GCTGCGT          8
Sample2  ACTGTCG  CCCAAAT          1
Sample2    ACTAG  GCATGCA          3
Sample2  ACTAGCA   ACACCA          4
Sample2   CGATCA  GCATGCA          5
Sample2   AGTCAG    GTCAG         10
Sample3    GGCAT   TTACTA          0
Sample3   GTCATG   GCTTTA          0
Sample3    GTCAG  TCGTAGC          2
Sample3  GCATGCA  GCATGCA          3
Sample3    GTCAG   AATCTC          4

如何刷新Openlayer中的单个图块？

2 个答案: