如何使用OpenLayers爲日期動畫預緩存瓦片

Question

我正在使用多個圖層在一段時間內對OpenLayers地圖進行動畫處理。我想預先準備ol.layer.tile圖塊以便在日期之間平滑過渡。有關如何預先緩存/預加載這些磁貼的任何建議？

Answer 1

你會想在這裏依靠你的瀏覽器緩存。並且它要求您的服務器發送適當的緩存標頭，因此瀏覽器不會在每次請求時重新獲取圖像。有了這些前提條件，步驟如下：輸入源

1. 呼叫ol.source.TileImage#getTileUrlFunction這樣你就可以計算要緩存瓷磚的URL。視頻源

2. 呼叫ol.source.TileImage#getTileGrid這樣你就可以得到瓷磚座標要緩存

3. 呼叫ol.tilegrid.TileGrid#forEachTileCoord與計算網址用於每個圖塊，並將其設置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; 
    }); 
});