如何使用 OpenLayers 为日期动画预缓存切片答案

【问题标题】：How to precache tiles with OpenLayers for date animation如何使用 OpenLayers 为日期动画预缓存切片
【发布时间】：2016-08-24 18:25:43
【问题描述】：

我正致力于在一段时间内为具有多个图层的 OpenLayers 地图制作动画。我想预先缓存 ol.layer.tile 瓷砖以在日期之间进行平滑过渡。有关如何预缓存/预加载这些图块的任何建议？

【问题讨论】：

“飞到”多少地方？
@JonatasWalker 可能有数百个约会。需要排队。

标签： javascript openlayers-3

【解决方案1】：

您需要在此处依赖浏览器缓存。它要求您的服务器发送正确的缓存标头，因此浏览器不会在每次请求时重新获取图像。考虑到这些先决条件，请执行以下操作：

在源上调用 ol.source.TileImage#getTileUrlFunction，以便计算要缓存的切片的 url。
在源上调用ol.source.TileImage#getTileGrid，以便获取要缓存的范围和缩放级别的切片坐标
使用函数调用ol.tilegrid.TileGrid#forEachTileCoord，该函数计算每个图块的 url 并将其设置为图像对象上的 src。这样做时，请跟踪加载图块的数量，以便知道何时完成。
在对源进行相应的维度更改后，对所有维度重复上述操作。

最后，您用于预加载单个维度的代码可能如下所示：

var loadingCount = 0;
var myTileUrlFunction = mySource.getTileUrlFunction();
var myTileGrid = mySource.getTileGrid();
myTileGrid.forEachTileCoord(myExtent, myZoom, function(tileCoord) {
  var url = myTileUrlFunction.call(mySource, tileCoord, ol.has.DEVICE_PIXEL_RATIO, myProjection);
  var img = new Image();
  img.onload = function() {
    --loadingCount;
    if (loadingCount == 0) {
      // ready to animate
    }
  }
  ++loadingCount;
  img.src = url;
}

【讨论】：

感谢您的示例。我的服务器正在发送防止缓存的标头，我能够在客户端使用 tileImageSource.getTile(z, x, y, pixelRatio, projection) 绕过它，这会将图块添加到 OpenLayers 的 tileCacheForProjection。

【解决方案2】：

绕过缓存阻止标头的解决方案。

var i = 0;
var renderer = new ol.renderer.canvas.TileLayer(layer);
var tileSource = layer.getSource();
var datePromise = new Promise(function(resolve, reject) {
    tileGrid.forEachTileCoord(extent, currentZ, function(tileCoord) {
        tile = tileSource.getTile(tileCoord[0], tileCoord[1], tileCoord[2], pixelRatio, projection);
        tile.load();
        var loader = function(e) {
            if(e.type === 'tileloadend') {
                --i;
                if(i === 0) {
                    resolve();
                }
            } else {
                 reject(new Error('No response at this URL'));
            }
            /* remove listeners */
            this.un('tileloadend', loader);
            this.un('tileloaderror', loader);
        };
        tileSource.on('tileloadend', loader);
        tileSource.on('tileloaderror', loader);
        ++i;
    });
});

【讨论】：