Как обновить отдельные плитки в открытых слоях?

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

Я решил - вы не можете обновить весь источник, но просто удалите плитку из кэша:

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();

        }

Answer 2

Вероятно, невозможно изменить способ обновления, не переписывая часть 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 ];
}