From 13a28c7666a8cd74b9bd99db1496cb7482af6b52 Mon Sep 17 00:00:00 2001 From: Michael Parry Date: Wed, 9 Jan 2019 10:30:15 +0100 Subject: [PATCH] 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 --- .../lib/sources/imagearcgisrest.component.ts | 1 + .../src/lib/sources/osm.component.ts | 15 +++++++- .../src/lib/sources/raster.component.ts | 6 ++- .../src/lib/sources/source.component.ts | 1 + .../src/lib/sources/xyz.component.ts | 25 +++++++++++-- src/app/example-list.ts | 2 + src/app/raster/raster.component.ts | 37 +++++-------------- 7 files changed, 52 insertions(+), 35 deletions(-) diff --git a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts index 06bfb95b..a709a3ad 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts +++ b/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); diff --git a/projects/ngx-openlayers/src/lib/sources/osm.component.ts b/projects/ngx-openlayers/src/lib/sources/osm.component.ts index b038c4c3..d1e9e640 100644 --- a/projects/ngx-openlayers/src/lib/sources/osm.component.ts +++ b/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 = new EventEmitter(); + @Output() + tileLoadEnd: EventEmitter = new EventEmitter(); + @Output() + tileLoadError: EventEmitter = new EventEmitter(); + 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); } } diff --git a/projects/ngx-openlayers/src/lib/sources/raster.component.ts b/projects/ngx-openlayers/src/lib/sources/raster.component.ts index d54dd1b5..45779249 100644 --- a/projects/ngx-openlayers/src/lib/sources/raster.component.ts +++ b/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); } } diff --git a/projects/ngx-openlayers/src/lib/sources/source.component.ts b/projects/ngx-openlayers/src/lib/sources/source.component.ts index c036a653..9646e4dd 100644 --- a/projects/ngx-openlayers/src/lib/sources/source.component.ts +++ b/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(); } } } diff --git a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts index db771fc2..d3209e40 100644 --- a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts +++ b/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 = new EventEmitter(); + @Output() + tileLoadEnd: EventEmitter = new EventEmitter(); + @Output() + tileLoadError: EventEmitter = new EventEmitter(); + 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); + } } diff --git a/src/app/example-list.ts b/src/app/example-list.ts index 2dbe8ff8..144ffefd 100644 --- a/src/app/example-list.ts +++ b/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', }, { diff --git a/src/app/raster/raster.component.ts b/src/app/raster/raster.component.ts index 7333634e..9e9f0701 100644 --- a/src/app/raster/raster.component.ts +++ b/src/app/raster/raster.component.ts @@ -9,7 +9,7 @@ interface RasterData { @Component({ selector: 'app-raster', template: ` - + @@ -18,35 +18,20 @@ interface RasterData { - + - - - - - - + - + > @@ -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(); } }