OpenLayers 3捕獲tile加載的事件

Question

如何在OpenLayers 3中捕獲tile加載的事件？ 在OpenLayers 2中，這可以通過從地圖的底層捕獲“loadend”事件來完成：

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

Answer 1

自OpenLayers v3.3起， tileloadstart ， tileloadend和tileloaderror事件可以在tile源上訂閱。

您可以使用類似於以下內容的內容：

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

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

您可以在此處查看可用於此的所有tile源類： http ： //openlayers.org/en/v3.4.0/apidoc/ol.source.TileImage.html？unstable = true＃setTileLoadFunction