如何使用OpenLayers预缓存图块以进行日期动画 [英] How to precache tiles with OpenLayers for date animation

问题描述

我正在为一段时间内的多层OpenLayers地图制作动画.我想预缓存ol.layer.tile磁贴以在日期之间进行平滑过渡.关于如何预缓存/预加载这些图块的任何建议?

I am working on animating an OpenLayers map with multiple layers over a period of time. I would like to precache ol.layer.tile tiles to have smooth transitions between the dates. Any suggestions on how to precache/preload these tiles?

推荐答案

您将希望在这里依赖浏览器缓存.并且它要求您的服务器发送正确的缓存头，因此浏览器不会在每次请求时都重新获取图像.牢记这些前提条件，请按照下列步骤操作:

You'll want to rely on your browser cache here. And it requires that your server sends proper cache headers, so the browser does not re-fetch the images with every request. With these prerequisites in mind, proceed as follows:

1. 在源上调用ol.source.TileImage#getTileUrlFunction，以便您可以计算要缓存的图块的网址.

1. Call ol.source.TileImage#getTileUrlFunction on your source so you can compute the urls of the tiles you want to cache.

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

Call ol.source.TileImage#getTileGrid on your source so you can get the tile coordinates for the extent and zoom level you want to cache

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

Call ol.tilegrid.TileGrid#forEachTileCoord with a function that computes the url for each tile and sets it as src on an image object. When doing so, keep track of the number of loading tiles so you know when you're done.

在对源进行各个尺寸更改后，对所有尺寸重复以上操作.

Repeat the above for all dimensions, after making the respective dimension changes to your source.

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

In the end, your code for preloading a single dimension could look something like this:

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

这篇关于如何使用OpenLayers预缓存图块以进行日期动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！