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

Question

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

Answer 1

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

1. 调用ol.source.TileImage#getTileUrlFunction您的源，以便您可以计算要缓存的图块的 url。

2. 调用ol.source.TileImage#getTileGrid您的源，以便您可以获得要缓存的范围和缩放级别的图块坐标

3. 调用ol.tilegrid.TileGrid#forEachTileCoord一个函数，该函数计算每个图块的 url 并将其设置为图像对象上的 src。这样做时，请跟踪加载图块的数量，以便知道何时完成。

4. 在对源进行相应维度更改后，对所有维度重复上述操作。

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

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;
}