OpenLayers 3 catch tiles loaded event。

How can I catch the tiles loaded event in OpenLayers 3? In OpenLayers 2 this could be done by catching the "loadend" event from the baselayer of the map:

如何捕获OpenLayers 3中加载的tile事件?在OpenLayers 2中，这可以通过从地图的baselayer中捕捉“loadend”事件来完成:

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

2 个解决方案

#1

tileloadstart, tileloadend, and tileloaderror events can be subscribed to on tile sources since OpenLayers v3.3.

自OpenLayers v3.3以来，可以在tile源上订阅tileloadstart、tileloadend和tileloaderror事件。

You can use something similar to the following:

您可以使用以下内容:

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

You can hook this up in the following way as of now, until something is added into the core.

到目前为止，您可以按照以下方式将其连接起来，直到有东西被添加到核心中。

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

You can see all the tile source classes that this can be used for here: http://openlayers.org/en/v3.4.0/apidoc/ol.source.TileImage.html?unstable=true#setTileLoadFunction

您可以看到这里可以使用的所有tile源类:http://openlayers.org/en/v3.4.0/apidoc/ol.source.tileimage.html . unstabletrue #setTileLoadFunction。

#1