确保所有图块均已加载到Open Layers 3 XYZ源中 [英] Ensuring all tiles are loaded in Open Layers 3 XYZ source

问题描述

我们有一些使用ol.source.XYZ源的图层.对于加载策略，我们使用ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({})).在进行其他操作之前，我们需要确保所有图块均已完全加载到地图视图中.

We have some layers that make use of a ol.source.XYZ source. For the loading strategy we use ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({})). We need to ensure that all tiles have been completely loaded in the map view before proceeding with other operations.

我们已经找到了很多与此相关的文章，但尚未找到100％的解决方案来提供所需的解决方案.即使不是这种情况，逻辑也会返回true.我们试图利用

We have come across multiple articles regarding this and haven't found a 100% solution yet that will give us the solution we need. The logic returns true even when it's not the case. We've tried to make use of the tileloadstart, tileloadend, tileloaderror events as shown on the example page but this doesn't seem to always return the expected result.

GIS堆栈交换文章此处似乎很有希望，因为我们可以将下面列出的代码与tileloadstart/tileloadend事件结合使用，但是有许多函数调用仅在 ol-debug.js 中可用，而在 ol.js 源代码.因此，下面粘贴的代码不适用于 ol.js .此代码只是引用的GIS Stack Exchange文章的副本.

The GIS Stack Exchange article here seemed promising because we could use the code listed below in conjunction with tileloadstart/tileloadend events but there are a number of the function calls that are only available in ol-debug.js and not the ol.js source code. Because of this the code pasted below does not work with ol.js. This code is just a copy from the referenced GIS Stack Exchange article.

function calculateNumberOfTiles(tileSource) {
     var tg = (tileSource.getTileGrid()) ? tileSource.getTileGrid(): ol.tilegrid.getForProjection(map.getView().getProjection()), 
            z = tg.getZForResolution(map.getView().getResolution()),
            tileRange = tg.getTileRangeForExtentAndZ(map.getView().calculateExtent(map.getSize()), z),
            xTiles = tileRange['maxX'] - tileRange['minX'] + 1,
            yTiles = tileRange['maxY'] - tileRange['minY'] + 1;
        return xTiles * yTiles;
}

我有两个问题，任何人都可以对我们可能缺少的内容提供任何其他想法吗?谢谢你的帮助.

I have two questions, can anyone please provide any additional thoughts in what we may be missing? Thanks for your help.

1. 当函数调用脱离

1. Why are the function calls available in ol-debug.js and not ol.js when they hang off of the prototype of tilegrid object?
2. Any other suggestions how to tell all tiles are completely loaded in the map?

推荐答案

正在加载事件

您正确地假设源上的每个tileloadstart事件都应在其后对应相应图块的tileloadend或tileloaderror.可以像链接的官方示例中那样，用来跟踪加载磁贴的数量.

You are correct in assuming that each tileloadstart event on the source should be followed by a tileloadend or tileloaderror for the corresponding tile. That can be used, as in the linked official example, to keep track of the number of loading tiles.

当发出的tileloadend和tileloaderror事件的总和等于tileloadstart事件的数量时，将不进行任何加载.如果不是这种情况，则应尝试举一个可复制的示例，因为这可能是库中的错误.

When the sum of emitted tileloadend and tileloaderror events equal the number of tileloadstart events, no loading is in progress. If this is not the case, you should try to make a reproducible example, as it would probably be a bug in the library.

但是重要的是要了解这些事件的含义. tileloadend事件并不意味着该图块在地图上可见，这意味着该图块已完成加载并可用于渲染.瓦片的实际渲染将在事件处理程序被调用之后完成.因此，任何需要有关何时以及何时加载和渲染所有图块的信息(例如，在截屏/创建打印时)的任何图块加载逻辑都必须等到下一个

It is however important to understand what these events mean. The tileloadend event does not mean that the tile is visible on the map, it means that the tile has finished loading and is usable for rendering. The actual rendering of the tile will be done after the event handler is invoked. So any tile loading logic requiring information about when all tiles are loaded and rendered (such when taking screenshots/creating prints) will have to wait until the next postrender event.

您提到tileloadend与实际出现在地图上的图块之间的间隔为5-10秒，这对于与渲染相关的时间太长了(除非您进行了一些非常怪异的渲染回调).

You mention 5-10 seconds between a tileloadend and the tile actually appearing on the map, which is too long for it to be rendering related (unless you do some really freaky rendering callbacks).

ol-debug.js与ol.js

与许多JS库一样，OpenLayers代码在构建过程中得到了优化和最小化，以创建更小，更有效的构建.不属于API的任何类型或函数都将被缩小或删除.只有ol.js中可用的方法和在 openlayers.org 中记录的方法才能用作任何精简方法.方法可能会更改每个版本.

Like many JS libraries, OpenLayers code is optimized and minimized in the build process to create smaller and more efficient builds. Any type or function that is not part of the API will be minified or removed. Only the methods available in ol.js, and documented on openlayers.org, should be used as any minified methods may change each build.

ol-debug.js是该库的非优化版本，供调试或探索时使用.

ol-debug.js is a non-optimized version of the library, intended for use when debugging or exploring.

这篇关于确保所有图块均已加载到Open Layers 3 XYZ源中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！