feat(image): add image loading events

Author: Elodie Tasia

projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts

@@ -1,4 +1,4 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { Component, Host, Input, OnInit, forwardRef, Output, EventEmitter } from '@angular/core';
 import { ProjectionLike, source, Extent, AttributionLike, ImageLoadFunctionType, Size } from 'openlayers';
 import { SourceComponent } from './source.component';
 import { LayerImageComponent } from '../layers/layerimage.component';
@@ -30,12 +30,22 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
   @Input()
   imageSize?: Size;
 
+  @Output()
+  onImageLoadStart = new EventEmitter<source.ImageEvent>();
+  @Output()
+  onImageLoadEnd = new EventEmitter<source.ImageEvent>();
+  @Output()
+  onImageLoadError = new EventEmitter<source.ImageEvent>();
+
   constructor(@Host() layer: LayerImageComponent) {
     super(layer);
   }
 
   ngOnInit() {
     this.instance = new source.ImageStatic(this);
     this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: source.ImageEvent) => this.onImageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: source.ImageEvent) => this.onImageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: source.ImageEvent) => this.onImageLoadError.emit(event));
   }
 }

projects/ngx-openlayers/src/lib/sources/imagewms.component.ts

@@ -1,4 +1,14 @@
-import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  forwardRef,
+  SimpleChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { AttributionLike, ImageLoadFunctionType, ProjectionLike, source } from 'openlayers';
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
@@ -36,13 +46,23 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange
   @Input()
   url: string;
 
+  @Output()
+  onImageLoadStart = new EventEmitter<source.ImageEvent>();
+  @Output()
+  onImageLoadEnd = new EventEmitter<source.ImageEvent>();
+  @Output()
+  onImageLoadError = new EventEmitter<source.ImageEvent>();
+
   constructor(@Host() layer: LayerImageComponent) {
     super(layer);
   }
 
   ngOnInit() {
     this.instance = new source.ImageWMS(this);
     this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: source.ImageEvent) => this.onImageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: source.ImageEvent) => this.onImageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: source.ImageEvent) => this.onImageLoadError.emit(event));
   }
 
   ngOnChanges(changes: SimpleChanges) {

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
 import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
+import { ImageWMSComponent } from './image-wms/image-wms.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
     ColorSelectHoverComponent,
     MarkerComponent,
     ArcgisImageComponent,
+    ImageWMSComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

src/app/app.routing.ts

@@ -17,6 +17,7 @@ import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
 import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
+import { ImageWMSComponent } from './image-wms/image-wms.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -39,6 +40,7 @@ const routes: Routes = [
       { path: 'cluster', component: ClusterComponent },
       { path: 'raster', component: RasterComponent },
       { path: 'arcgis-image', component: ArcgisImageComponent },
+      { path: 'image-wms', component: ImageWMSComponent },
     ],
   },
   { path: '**', redirectTo: '' },

src/app/example-list.ts

@@ -85,4 +85,10 @@ export const examplesList = [
     routerLink: 'arcgis-image',
     openLayersLink: 'https://openlayers.org/en/latest/examples/arcgis-image.html',
   },
+  {
+    title: 'Image Load Events',
+    description: 'Example of using aol-source-imagewms. This example listens to image loading events.',
+    routerLink: 'image-wms',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/image-load-events.html',
+  },
 ];

src/app/image-wms/image-wms.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <aol-map #map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-view zoom="4"> <aol-coordinate [x]="-10997148" [y]="4569099"></aol-coordinate> </aol-view>
+      <aol-layer-image>
+        <aol-source-imagewms
+          [url]="'https://ahocevar.com/geoserver/wms'"
+          [params]="params"
+          [serverType]="'geoserver'"
+          (onImageLoadStart)="onImageLoadStart()"
+          (onImageLoadEnd)="onImageLoadEnd()"
+        ></aol-source-imagewms>
+      </aol-layer-image>
+    </aol-map>
+  `,
+  styles: [
+    `
+      map {
+        background: #e0eced;
+      }
+    `,
+  ],
+})
+export class ImageWMSComponent implements OnInit {
+  constructor() {}
+
+  params = { LAYERS: 'topp:states' };
+
+  ngOnInit() {}
+
+  onImageLoadStart() {
+    console.log('image starts loading at: ' + new Date());
+  }
+
+  onImageLoadEnd() {
+    console.log('image ends loading at: ' + new Date());
+  }
+}