OpenLayers: How to detect map display fully loaded?

Question

I implement map export features using OpenLayers 3.

But there is one problem: it is impossible to determine whether the map is fully loaded or if several fragments remain.

There seems to be no such API or event. Close is a tileloadstart - tileloadend pair. But OpenLayers loads tiles asynchronously, and before the fragment actually loads, tileloadstart does not start, i.e. A tile queued in a tile queue does not fire an event until the actual load.

Hot can I find that the map view is fully loaded?

Answer 1

In the end, I successfully implemented the export function. The following is a rough explanation.

• Register tileloadstart , tileloadend , tileloaderror event handlers on ol.source with ol.source.on() and start managing the number of fragments loaded.
• Register postcompose event postcompose on ol.Map with ol.Map.once() .
• call ol.Map.renderSync() . This causes the tile to load, so now if there is no tile download, it will mean that all tiles have been downloaded.
• In the postcompose event postcompose grab the map contents from event.context using event.context.canvas.toDataURL() and register the postrender function using event.frameState.postRenderFunctions.push() (a bit hacked).
• In the registered postrender function, check the number of fragments loaded (which can be controlled by tileload* event tileload* ). If the counter is non-zero, leave the captured content. Otherwise, the capture is done.
• In tileloadend and tileloaderror , if the number of tiles to load becomes zero, try again from step 3 above.

Answer 2

Event

postrender is like a trick, for example:

 map.once('postrender', function(event) { doyourmagic(); }); 

Works with at least OpenLayers 3.8.2. There is a wonderful answer there about the subject.

Answer 3

Basically, to make sure everything is displayed on your map, you need to listen to download events for each layer that you have on the map. For the wms and wfs layers, this is clear, and I think you know how to do it. For tile layers check this example here

Answer 4

Meanwhile , OpenLayers provides a very popular rendercomplete event that may be useful.