Add 'rendercomplete' event

src/ol/PluggableMap.js

@@ -10,6 +10,7 @@ import MapBrowserEventType from './MapBrowserEventType.js';
 import MapEvent from './MapEvent.js';
 import MapEventType from './MapEventType.js';
 import MapProperty from './MapProperty.js';
+import RenderEventType from './render/EventType.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 import ObjectEventType from './ObjectEventType.js';
 import TileQueue from './TileQueue.js';
@@ -135,6 +136,7 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * @fires module:ol/MapEvent~MapEvent
  * @fires module:ol/render/Event~RenderEvent#postcompose
  * @fires module:ol/render/Event~RenderEvent#precompose
+ * @fires module:ol/render/Event~RenderEvent#rendercomplete
  * @api
  */
 class PluggableMap extends BaseObject {
@@ -961,6 +963,10 @@ class PluggableMap extends BaseObject {
         tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
       }
     }
+    if (frameState && this.hasListener(MapEventType.RENDERCOMPLETE) && !frameState.animate &&
+        !this.tileQueue_.getTilesLoading() && !getLoading(this.getLayers().getArray())) {
+      this.renderer_.dispatchRenderEvent(RenderEventType.RENDERCOMPLETE, frameState);
+    }
 
     const postRenderFunctions = this.postRenderFunctions_;
     for (let i = 0, ii = postRenderFunctions.length; i < ii; ++i) {
@@ -1407,3 +1413,21 @@ function createOptionsInternal(options) {
 
 }
 export default PluggableMap;
+
+/**
+ * @param  {Array<module:ol/layer/Base>} layers Layers.
+ * @return {boolean} Layers have sources that are still loading.
+ */
+function getLoading(layers) {
+  for (let i = 0, ii = layers.length; i < ii; ++i) {
+    const layer = layers[i];
+    if (layer instanceof LayerGroup) {
+      return getLoading(layer.getLayers().getArray());
+    }
+    const source = layers[i].getSource();
+    if (source && source.loading) {
+      return true;
+    }
+  }
+  return false;
+}

src/ol/render/EventType.js

@@ -20,5 +20,12 @@ export default {
    * @event module:ol/render/Event~RenderEvent#render
    * @api
    */
-  RENDER: 'render'
+  RENDER: 'render',
+  /**
+   * Triggered when rendering is complete, i.e. all sources and tiles have
+   * finished loading for the current viewport, and all tiles are faded in.
+   * @event module:ol/render/Event~RenderEvent#rendercomplete
+   * @api
+   */
+  RENDERCOMPLETE: 'rendercomplete'
 };

src/ol/renderer/Map.js

@@ -332,6 +332,13 @@ function expireIconCache(map, frameState) {
 MapRenderer.prototype.renderFrame = VOID;
 
 
+/**
+ * @param {module:ol/render/EventType} type Event type.
+ * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
+ */
+MapRenderer.prototype.dispatchRenderEvent = VOID;
+
+
 /**
  * @param {module:ol/layer/Layer~State} state1 First layer state.
  * @param {module:ol/layer/Layer~State} state2 Second layer state.

src/ol/renderer/canvas/Map.js

@@ -69,9 +69,8 @@ class CanvasMapRenderer extends MapRenderer {
   /**
    * @param {module:ol/render/EventType} type Event type.
    * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
-   * @private
    */
-  dispatchComposeEvent_(type, frameState) {
+  dispatchRenderEvent(type, frameState) {
     const map = this.getMap();
     const context = this.context_;
     if (map.hasListener(type)) {
@@ -135,7 +134,7 @@ class CanvasMapRenderer extends MapRenderer {
 
     this.calculateMatrices2D(frameState);
 
-    this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, frameState);
+    this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
 
     const layerStatesArray = frameState.layerStatesArray;
     stableSort(layerStatesArray, sortByZIndex);
@@ -164,7 +163,7 @@ class CanvasMapRenderer extends MapRenderer {
       context.restore();
     }
 
-    this.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, frameState);
+    this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
 
     if (!this.renderedVisible_) {
       this.canvas_.style.display = '';

src/ol/renderer/webgl/Map.js

@@ -249,9 +249,8 @@ class WebGLMapRenderer extends MapRenderer {
   /**
    * @param {module:ol/render/EventType} type Event type.
    * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
-   * @private
    */
-  dispatchComposeEvent_(type, frameState) {
+  dispatchRenderEvent(type, frameState) {
     const map = this.getMap();
     if (map.hasListener(type)) {
       const context = this.context_;
@@ -411,7 +410,7 @@ class WebGLMapRenderer extends MapRenderer {
     this.textureCache_.set((-frameState.index).toString(), null);
     ++this.textureCacheFrameMarkerCount_;
 
-    this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, frameState);
+    this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
 
     /** @type {Array<module:ol/layer/Layer~State>} */
     const layerStatesToDraw = [];
@@ -470,7 +469,7 @@ class WebGLMapRenderer extends MapRenderer {
       frameState.animate = true;
     }
 
-    this.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, frameState);
+    this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
 
     this.scheduleRemoveUnusedLayerRenderers(frameState);
     this.scheduleExpireIconCache(frameState);

src/ol/source/Image.js

@@ -201,16 +201,19 @@ class ImageSource extends Source {
     const image = /** @type {module:ol/Image} */ (event.target);
     switch (image.getState()) {
       case ImageState.LOADING:
+        this.loading = true;
         this.dispatchEvent(
           new ImageSourceEvent(ImageSourceEventType.IMAGELOADSTART,
             image));
         break;
       case ImageState.LOADED:
+        this.loading = false;
         this.dispatchEvent(
           new ImageSourceEvent(ImageSourceEventType.IMAGELOADEND,
             image));
         break;
       case ImageState.ERROR:
+        this.loading = false;
         this.dispatchEvent(
           new ImageSourceEvent(ImageSourceEventType.IMAGELOADERROR,
             image));

src/ol/source/Source.js

@@ -66,6 +66,13 @@ class Source extends BaseObject {
     */
     this.attributions_ = this.adaptAttributions_(options.attributions);
 
+    /**
+     * This source is currently loading data. Sources that defer loading to the
+     * map's tile queue never set this to `true`.
+     * @type {boolean}
+     */
+    this.loading = false;
+
     /**
     * @private
     * @type {module:ol/source/State}

src/ol/source/Vector.js

@@ -871,6 +871,7 @@ class VectorSource extends Source {
   loadFeatures(extent, resolution, projection) {
     const loadedExtentsRtree = this.loadedExtentsRtree_;
     const extentsToLoad = this.strategy_(extent, resolution);
+    this.loading = false;
     for (let i = 0, ii = extentsToLoad.length; i < ii; ++i) {
       const extentToLoad = extentsToLoad[i];
       const alreadyLoaded = loadedExtentsRtree.forEachInExtent(extentToLoad,
@@ -884,6 +885,7 @@ class VectorSource extends Source {
       if (!alreadyLoaded) {
         this.loader_.call(this, extentToLoad, resolution, projection);
         loadedExtentsRtree.insert(extentToLoad, {extent: extentToLoad.slice()});
+        this.loading = true;
       }
     }
   }