Javascript 如何使用OpenLayers为日期动画预切平铺

我正在一段时间内制作一个带有多个图层的OpenLayers地图的动画。我想预切ol.layer.tile瓷砖，使其在日期之间平滑过渡。有关于如何预缓存/预加载这些磁贴的建议吗？

您可以在此处使用浏览器缓存。它还要求服务器发送正确的缓存头，这样浏览器就不会在每次请求时都重新获取图像。考虑到这些先决条件，请按以下步骤进行：

在源代码上调用

ol.source.TileImage#getTileUrlFunction

，以便计算要缓存的磁贴的URL

在源代码上调用

ol.source.TileImage#getTileGrid

，以便获得要缓存的范围和缩放级别的平铺坐标

使用一个函数调用

ol.tilegrid.tilegrid#foreachtilecord

，该函数计算每个磁贴的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;
}

---

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

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

---

“飞向”多少地方？@JonatasWalker可能有数百次约会。需要排队。谢谢您的示例。我的服务器正在发送缓存阻止标头，我可以在客户端使用

tileImageSource.getTile（z，x，y，pixelRatio，projection）

绕过此问题，它将该磁贴添加到OpenLayers的

tileCacheForProjection

。