OpenLayers 3 捕捉瓷砖加载事件答案

【问题标题】：OpenLayers 3 catch tiles loaded eventOpenLayers 3 捕捉瓷砖加载事件
【发布时间】：2014-10-13 19:18:42
【问题描述】：

如何在 OpenLayers 3 中捕捉到瓦片加载事件？在 OpenLayers 2 中，这可以通过从地图的基础层捕获“loadend”事件来完成：

map.baseLayer.events.register('loadend' , false, function(){  });

【问题讨论】：

这是一个非常好的问题。我只是花了一些时间 grepping 源代码，这是 renderer/layerrenderer.js 中的一个 opt_tileCallback 方法，但我一开始看不到如何附加到它，也没有时间进一步调查。跨度>
同样的问题。有人知道吗？
来自ol开发者的状态更新：github.com/openlayers/ol3/issues/2832

标签： events event-handling openlayers gis openlayers-3

【解决方案1】：

tileloadstart、tileloadend 和 tileloaderror 事件可以从 OpenLayers v3.3 开始订阅磁贴源。

你可以使用类似下面的东西：

var tilesLoading = 0,
    tilesLoaded = 0;

tileLayer.getSource().on('tileloadend', function () {
    tilesLoaded++;
    if (tilesLoading === tilesLoaded) {
        console.log(tilesLoaded + ' tiles finished loading');
        tilesLoading = 0;
        tilesLoaded = 0;
        //trigger another event, do something etc...
    }
});

tileLayer.getSource().on('tileloadstart', function () {
    this.tilesLoading++;
});

【讨论】：

【解决方案2】：

到目前为止，您可以通过以下方式将其连接起来，直到将某些内容添加到核心中。

tileSource.setTileLoadFunction(( function(){
        var numLoadingTiles = 0;
        var tileLoadFn = tileSource.getTileLoadFunction();
        return (tile, src) => {
            console.log(src);
            if (numLoadingTiles === 0) {
                console.log('loading');
            }
            ++numLoadingTiles;
            var image = tile.getImage();

            image.onload = image.onerror =  function(){
                --numLoadingTiles;
                if (numLoadingTiles === 0) {
                    console.log('idle');
                }
            };
            tileLoadFn(tile, src);
        };
    })());

您可以在此处查看所有可以使用的图块源类： http://openlayers.org/en/v3.4.0/apidoc/ol.source.TileImage.html?unstable=true#setTileLoadFunction

【讨论】：