openlayers-3

OpenLayers: How to detect the map view is completely loaded?


I'm implementing map exporting functionality using OpenLayers 3.

But there is one problem: one cannot determine whether the map view is completely loaded or a few tiles is missing yet.

It seems there is no such API or event. The close one is tileloadstart - tileloadend pair. But OpenLayers loads tiles asynchronously, and before the tile is actually loading the tileloadstart is not fired - that is, a tile that is queued in the tile queue does not fire the event before actually loading.

Hot can I detect the map view is completely loaded?


Solution

  • I eventually implemented the export function successfully. Below is the rough explanation.

    1. Register tileloadstart, tileloadend, tileloaderror event handlers on the ol.sources using ol.source.on(), and start managing the tile load count.
    2. Register postcompose event handlers on the ol.Map using ol.Map.once().
    3. call ol.Map.renderSync(). This triggers the tile loading, so from now if there is no tile loading, it will mean that all tile have been loaded.
    4. On postcompose event handler, capture the map content from event.context using event.context.canvas.toDataURL(), and register postrender function using event.frameState.postRenderFunctions.push() (a bit hacky).
    5. On the registered postrender function, check the tile load count (which can be managed by the tileload* event handlers). If the count is not zero, abandon the captured content. Else, the capture is done.
    6. On tileloadend and tileloaderror, if the tile load count becomes zero, retry from the step 3 above.