确保所有图块都加载到 Open Layers 3 XYZ 源中

Question

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

我们已经看过多篇关于此的文章，但还没有找到 100% 的解决方案来为我们提供所需的解决方案。即使事实并非如此，逻辑 return 也是正确的。我们已尝试使用 tileloadstart、tileloadend、tileloaderror 事件，如 example 页面所示，但这似乎并不总是 return 预期结果。

GIS Stack Exchange 文章 here 看起来很有前途，因为我们可以将下面列出的代码与 tileloadstart/tileloadend 事件结合使用，但有许多函数调用仅在 ol-debug.js 而不是 ol.js 源代码。因此，下面粘贴的代码不适用于 ol.js。此代码只是引用的 GIS Stack Exchange 文章的副本。

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

我有两个问题，任何人都可以就我们可能遗漏的内容提供任何其他想法吗？谢谢你的帮助。

为什么函数调用在 ol-debug.js 而不是 ol.js 中可用，当它们挂在 tilegrid 对象的原型上时？
关于如何判断地图中所有图块是否已完全加载的任何其他建议？

Answer 1

加载事件

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

当发出的 tileloadend 和 tileloaderror 事件的总和等于 tileloadstart 事件的数量时，没有加载正在进行。如果不是这种情况，您应该尝试制作一个可重现的示例，因为它可能是库中的错误。

然而，了解这些事件的含义非常重要。 tileloadend 事件并不表示图块在地图上可见，它表示图块已完成加载并可用于渲染。 tile 的实际呈现将在调用事件处理程序后完成。因此，任何需要有关何时加载和呈现所有图块的信息的图块加载逻辑（例如进行 screenshots/creating 打印时）都必须等到下一个 postrender 事件。

你提到 tileloadend 和实际出现在地图上的图块之间有 5-10 秒，这对于渲染相关来说太长了（除非你做了一些非常奇怪的渲染回调）。

ol-debug.js 对比 ol.js

与许多 JS 库一样，OpenLayers 代码在构建过程中进行了优化和最小化，以创建更小、更高效的构建。任何不属于 API 的类型或函数都将被缩小或删除。仅应使用 ol.js 中可用的方法并记录在 openlayers.org 中，因为任何缩小的方法可能会更改每个构建。

ol-debug.js 是库的非优化版本，用于调试或探索。

Answer 2

这是我的方法。它使用未记录的 API，但它适用于非调试 openlayers 4.2.0.

//"Dirty" tiles can be in one of two states: Either they are being downloaded,
//or the map is holding off downloading their replacement, and they are "wanted."
//We can tell when the map is ready when there are no tiles in either of these
//states, and rendering is done.

var numInFlightTiles = 0;
map.getLayers().forEach(function (layer) {
    var source = layer.getSource();
    if (source instanceof ol.source.TileImage) {
        source.on('tileloadstart', function () {++numInFlightTiles})
        source.on('tileloadend', function () {--numInFlightTiles})
    }
})

map.on('postrender', function (evt) {
    if (!evt.frameState)
        return;

    var numHeldTiles = 0;
    var wanted = evt.frameState.wantedTiles;
    for (var layer in wanted)
        if (wanted.hasOwnProperty(layer))
            numHeldTiles += Object.keys(wanted[layer]).length;

    var ready = numInFlightTiles === 0 && numHeldTiles === 0;
    if (map.get('ready') !== ready)
        map.set('ready', ready);
});

map.set('ready', false);

function whenMapIsReady(callback) {
    if (map.get('ready'))
        callback();
    else
        map.once('change:ready', whenMapIsReady.bind(null, callback));
}

Answer 3

此答案已过时，不适用于 openlayers 6 或更高版本。

如此处记录：https://github.com/openlayers/openlayers/releases/tag/v6.0.0

解决这个问题的方法是将后渲染器放在这样的图层上

const mapLayer = map.getLayers().getArray()[0];

mapLayer.on('postrender', (evt) => {});

这会在渲染第一层后触发后渲染

确保所有图块都加载到 Open Layers 3 XYZ 源中

Ensuring all tiles are loaded in Open Layers 3 XYZ source

tiles

openlayers-3