feat(source:imagestatic): refresh layer source when url change

quentinlampin · Jun 4, 2019 · 410f876 · 410f876
1 parent a65bb8c
commit 410f876
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 11 deletions.
diff --git a/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts
@@ -1,4 +1,14 @@
-import { Component, Host, Input, OnInit, forwardRef, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Host,
+  Input,
+  forwardRef,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  OnInit,
+} from '@angular/core';
 import { ImageStatic } from 'ol/source';
 import { SourceComponent } from './source.component';
 import { LayerImageComponent } from '../layers/layerimage.component';
@@ -16,7 +26,7 @@ import { ImageSourceEvent } from 'ol/source/Image';
   `,
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
 })
-export class SourceImageStaticComponent extends SourceComponent implements OnInit {
+export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
   instance: ImageStatic;
 
   @Input()
@@ -45,11 +55,36 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
     super(layer);
   }
 
-  ngOnInit() {
+  setLayerSource(): void {
     this.instance = new ImageStatic(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));
   }
+
+  ngOnInit() {
+    this.setLayerSource();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        switch (key) {
+          case 'url':
+            this.url = changes[key].currentValue;
+            this.setLayerSource();
+            break;
+          default:
+            break;
+        }
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    this.instance.setProperties(properties, false);
+  }
 }
diff --git a/src/app/image-static/image-static.component.ts b/src/app/image-static/image-static.component.ts
@@ -8,24 +8,40 @@ import Projection from 'ol/proj/Projection';
     <aol-map [width]="'100%'" [height]="'100%'">
       <aol-view [projection]="projection" [zoom]="2" [center]="[512, 484]"> </aol-view>
       <aol-layer-image [opacity]="opacity" [extent]="extent">
-        <aol-source-imagestatic
-          [url]="'https://imgs.xkcd.com/comics/online_communities.png'"
-          [projection]="projection"
-          [imageExtent]="extent"
-        >
-        </aol-source-imagestatic>
+        <aol-source-imagestatic [url]="url" [projection]="projection" [imageExtent]="extent"> </aol-source-imagestatic>
       </aol-layer-image>
     </aol-map>
+    <div class="controls">
+      Current image url:
+      <select (change)="onUrlChange($event)">
+        <option value="https://imgs.xkcd.com/comics/online_communities.png"
+          >https://imgs.xkcd.com/comics/online_communities.png</option
+        >
+        <option value="https://pbs.twimg.com/media/D7IgamEUEAA5DHE.jpg"
+          >https://pbs.twimg.com/media/D7IgamEUEAA5DHE.jpg</option
+        >
+      </select>
+    </div>
   `,
   styles: [
     `
-      map {
-        background: #e0eced;
+      :host {
+        display: flex;
+      }
+
+      aol-map {
+        width: 70%;
+      }
+
+      .controls {
+        width: 28%;
+        padding: 1rem;
       }
     `,
   ],
 })
 export class ImageStaticComponent {
+  public url = 'https://imgs.xkcd.com/comics/online_communities.png';
   public zoom = 5;
   public opacity = 1.0;
   extent: Extent = [0, 0, 1024, 968];
@@ -39,4 +55,8 @@ export class ImageStaticComponent {
   projection = new Projection(this.po);
 
   getCenter = ext => Extent.getCenter(ext);
+
+  onUrlChange(evt) {
+    this.url = evt.target.value;
+  }
 }