feat(raster): not updated when source change

- re-instantiate raster when source change
- add TileEvent(s) on XYZ and OSM
- add wrapX to ArcGISRest
- add example desciption

Author: Michael Parry

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

@@ -22,6 +22,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
   @Input() ratio = 1;
   @Input() resolutions?: number[];
   @Input() logo?: string | olx.LogoOptions;
+  @Input() wrapX?: boolean;
 
   constructor(@Host() layer: LayerImageComponent) {
     super(layer);

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

@@ -1,4 +1,4 @@
-import { Component, Host, forwardRef, Input, AfterContentInit, Optional } from '@angular/core';
+import { Component, Host, forwardRef, Input, AfterContentInit, Optional, Output, EventEmitter } from '@angular/core';
 import { source, AttributionLike, TileLoadFunctionType } from 'openlayers';
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
@@ -34,6 +34,13 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
   @Input()
   wrapX: boolean;
 
+  @Output()
+  tileLoadStart: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+  @Output()
+  tileLoadError: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+
   constructor(
     @Host()
     @Optional()
@@ -49,7 +56,13 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
     if (this.tileGridXYZ) {
       this.tileGrid = this.tileGridXYZ.instance;
     }
+
     this.instance = new source.OSM(this);
+
+    this.instance.on('tileloadstart', (event: source.TileEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: source.TileEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: source.TileEvent) => this.tileLoadError.emit(event));
+
     this._register(this.instance);
   }
 }

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

@@ -40,11 +40,13 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
   }
 
   ngAfterContentInit() {
-    this.instance = new source.Raster(this);
+    this.init();
+  }
 
+  init() {
+    this.instance = new source.Raster(this);
     this.instance.on('beforeoperations', (event: source.RasterEvent) => this.beforeOperations.emit(event));
     this.instance.on('afteroperations', (event: source.RasterEvent) => this.afterOperations.emit(event));
-
     this._register(this.instance);
   }
 }

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

@@ -30,6 +30,7 @@ export class SourceComponent implements OnDestroy {
 
     if (this.raster) {
       this.raster.sources = [s];
+      this.raster.init();
     }
   }
 }

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

@@ -8,6 +8,8 @@ import {
   ContentChild,
   SimpleChanges,
   Optional,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { source, Size, TileUrlFunctionType, TileLoadFunctionType, tilegrid } from 'openlayers';
 import { LayerTileComponent } from '../layers/layertile.component';
@@ -58,6 +60,13 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
   @ContentChild(TileGridComponent)
   tileGridXYZ: TileGridComponent;
 
+  @Output()
+  tileLoadStart: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+  @Output()
+  tileLoadError: EventEmitter<source.TileEvent> = new EventEmitter<source.TileEvent>();
+
   constructor(
     @Optional()
     @Host()
@@ -73,8 +82,7 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
     if (this.tileGridXYZ) {
       this.tileGrid = this.tileGridXYZ.instance;
     }
-    this.instance = new source.XYZ(this);
-    this._register(this.instance);
+    this.init();
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -91,8 +99,17 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
 
     this.instance.setProperties(properties, false);
     if (changes.hasOwnProperty('url')) {
-      this.instance = new source.XYZ(this);
-      this._register(this.instance);
+      this.init();
     }
   }
+
+  init() {
+    this.instance = new source.XYZ(this);
+
+    this.instance.on('tileloadstart', (event: source.TileEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: source.TileEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: source.TileEvent) => this.tileLoadError.emit(event));
+
+    this._register(this.instance);
+  }
 }

src/app/example-list.ts

@@ -76,6 +76,8 @@ export const examplesList = [
   },
   {
     title: 'Raster',
+    description:
+      'Example of using raster to perform pixel-based operations. Adjust brightness and contrast in this case.',
     routerLink: 'raster',
   },
   {

src/app/raster/raster.component.ts

@@ -9,7 +9,7 @@ interface RasterData {
 @Component({
   selector: 'app-raster',
   template: `
-    <aol-map [width]="'100%'" [height]="'100%'">
+    <aol-map width="100%" height="100%">
       <aol-interaction-default></aol-interaction-default>
       <aol-control-defaults></aol-control-defaults>
       <aol-control-fullscreen></aol-control-fullscreen>
@@ -18,35 +18,20 @@ interface RasterData {
         <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
       </aol-view>
 
-      <aol-layer-image *ngIf="selectLayer === 'osm'">
+      <aol-layer-image>
         <aol-source-raster
-          #raster1
+          threads="4"
+          operationType="image"
           [operation]="operation"
-          [threads]="threads"
           [lib]="lib"
-          [operationType]="operationType"
           (beforeOperations)="beforeOperations($event)"
-          (afterOperations)="afterOperations($event)"
-        >
-          <aol-source-osm></aol-source-osm>
-        </aol-source-raster>
-      </aol-layer-image>
-
-      <aol-layer-image *ngIf="selectLayer === 'xyz'">
-        <aol-source-raster
-          #raster2
-          [operation]="operation"
-          [threads]="threads"
-          [lib]="lib"
-          [operationType]="operationType"
-          (beforeOperations)="beforeOperations($event)"
-          (afterOperations)="afterOperations($event)"
         >
+          <aol-source-osm *ngIf="selectLayer === 'osm'"></aol-source-osm>
           <aol-source-xyz
+            *ngIf="selectLayer === 'xyz'"
             url="https://c.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71"
             crossOrigin=""
-          >
-          </aol-source-xyz>
+          ></aol-source-xyz>
         </aol-source-raster>
       </aol-layer-image>
     </aol-map>
@@ -94,8 +79,6 @@ interface RasterData {
   ],
 })
 export class RasterComponent {
-  threads = 4;
-  operationType = 'image';
   lib: any = {
     brightness: brightness,
     contrast: contrast,
@@ -105,7 +88,7 @@ export class RasterComponent {
 
   selectLayer = 'osm';
   @ViewChild(SourceRasterComponent)
-  currentRasterSource;
+  rasterSource;
 
   beforeOperations(event) {
     const data: RasterData = event.data;
@@ -120,10 +103,8 @@ export class RasterComponent {
     return imageData;
   }
 
-  afterOperations() {}
-
   updateRaster() {
-    this.currentRasterSource.instance.changed();
+    this.rasterSource.instance.refresh();
   }
 }