2016-08-24 31 views
2

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

+0

「飛到」有多少個地方? –

+0

@JonatasWalker可能有數百個日期。隊列將是必要的。 – benjaki

回答

2

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

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

感謝您的示例。我的服務器正在發送緩存阻止標題,我可以在客戶端使用'tileImageSource.getTile(z,x,y,pixelRatio,projection)'將其添加到OpenLayers的'tileCacheForProjection'中。 – benjaki

1

解決方案,圍繞高速緩存,防止頭得到。

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