feat(imagearcgis): add image events

quentinlampin · Aug 8, 2019 · 24c1c65 · 24c1c65
1 parent ebba66d
commit 24c1c65
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts
@@ -1,10 +1,21 @@
-import { Component, forwardRef, Host, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
 import { ImageArcGISRest } from 'ol/source';
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
 import { ProjectionLike } from 'ol/proj';
 import { AttributionLike } from 'ol/source/Source';
 import { LoadFunction } from 'ol/Image';
+import { ImageSourceEvent } from 'ol/source/Image';
 
 @Component({
   selector: 'aol-source-imagearcgisrest',
@@ -26,13 +37,23 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
   @Input() resolutions?: number[];
   @Input() wrapX?: boolean;
 
+  @Output()
+  onImageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  onImageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  onImageLoadError = new EventEmitter<ImageSourceEvent>();
+
   constructor(@Host() layer: LayerImageComponent) {
     super(layer);
   }
 
   ngOnInit() {
     this.instance = new ImageArcGISRest(this);
     this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.onImageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.onImageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.onImageLoadError.emit(event));
   }
 
   ngOnChanges(changes: SimpleChanges) {

diff --git a/src/app/arcgis-image/arcgis-image.component.ts b/src/app/arcgis-image/arcgis-image.component.ts
@@ -14,6 +14,8 @@ import { Component } from '@angular/core';
         <aol-source-imagearcgisrest
           projection="EPSG:3857"
           url="https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"
+          (onImageLoadStart)="onImageLoadStart()"
+          (onImageLoadEnd)="onImageLoadEnd()"
         ></aol-source-imagearcgisrest>
       </aol-layer-image>
     </aol-map>
@@ -34,4 +36,12 @@ import { Component } from '@angular/core';
 export class ArcgisImageComponent {
   public zoom = 4;
   public opacity = 1.0;
+
+  onImageLoadStart() {
+    console.log('image starts loading at: ' + new Date());
+  }
+
+  onImageLoadEnd() {
+    console.log('image ends loading at: ' + new Date());
+  }
 }