如何使用OpenLayers預處理磁貼以獲取日期動畫

Question

我正在開發一段時間內具有多個圖層的OpenLayers地圖動畫。 我想預先緩存ol.layer.tile瓦片，使日期之間有平滑的過渡。 有關如何預先緩存/預加載這些瓷磚的任何建議？

Answer 1

你想在這里依賴你的瀏覽器緩存。 並且它要求您的服務器發送適當的緩存標頭，因此瀏覽器不會在每次請求時重新獲取圖像。 考慮到這些先決條件，請按以下步驟操作：

1. 在源代碼上調用ol.source.TileImage#getTileUrlFunction ，以便計算要緩存的切片的網址。

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

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