[英]How to precache tiles with OpenLayers for date animation
我正在开发一段时间内具有多个图层的OpenLayers地图动画。 我想预先缓存ol.layer.tile瓦片,使日期之间有平滑的过渡。 有关如何预先缓存/预加载这些瓷砖的任何建议?
你想在这里依赖你的浏览器缓存。 并且它要求您的服务器发送适当的缓存标头,因此浏览器不会在每次请求时重新获取图像。 考虑到这些先决条件,请按以下步骤操作:
在源代码上调用ol.source.TileImage#getTileUrlFunction
,以便计算要缓存的切片的网址。
在源上调用ol.source.TileImage#getTileGrid
,这样就可以获得要缓存的范围和缩放级别的切片坐标
使用一个函数调用ol.tilegrid.TileGrid#forEachTileCoord
,该函数计算每个图块的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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.