feat(wmts): add wmts tile load events

quentinlampin · Nov 13, 2019 · 7aba5ca · 7aba5ca
1 parent e9dcb6d
commit 7aba5ca
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts
@@ -7,16 +7,18 @@ import {
   ContentChild,
   SimpleChanges,
   OnChanges,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { LayerTileComponent } from '../layers/layertile.component';
-import { TileGridComponent } from '../tilegrid.component';
 import { SourceComponent } from './source.component';
 import { TileGridWMTSComponent } from '../tilegridwmts.component';
 import { WMTS } from 'ol/source';
 import { WMTS as TileGridWMTS } from 'ol/tilegrid';
 import { WMTSRequestEncoding } from 'ol/source';
 import { ProjectionLike } from 'ol/proj';
 import { LoadFunction } from 'ol/Tile';
+import { TileSourceEvent } from 'ol/source/Tile';
 
 @Component({
   selector: 'aol-source-tilewmts',
@@ -64,6 +66,13 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   @Input()
   wrapX?: boolean;
 
+  @Output()
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+
   @ContentChild(TileGridWMTSComponent, { static: false })
   tileGridWMTS: TileGridWMTSComponent;
 
@@ -94,6 +103,9 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
 
   setLayerSource(): void {
     this.instance = new WMTS(this);
+    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
     this.host.instance.setSource(this.instance);
   }
 

diff --git a/src/app/select-interaction/select-interaction.component.ts b/src/app/select-interaction/select-interaction.component.ts
@@ -6,33 +6,33 @@ import { SelectEvent } from 'ol/interaction/Select';
 @Component({
   selector: 'app-select-interaction',
   template: `
-      <aol-map #map width="100%" height="100%">
-          <aol-interaction-default></aol-interaction-default>
-
-          <aol-interaction-select
-                  [layers]="isMarkerLayer"
-                  (olSelect)="select($event)"
-                  [wrapX]="false"
-          ></aol-interaction-select>
-
-          <aol-view [zoom]="5">
-              <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
-          </aol-view>
-
-          <aol-layer-tile [opacity]="1">
-              <aol-source-osm></aol-source-osm>
-          </aol-layer-tile>
-
-          <aol-layer-vector #markersLayer>
-              <aol-source-vector #markersSource [wrapX]="false">
-                  <aol-feature>
-                      <aol-geometry-point>
-                          <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
-                      </aol-geometry-point>
-                  </aol-feature>
-              </aol-source-vector>
-          </aol-layer-vector>
-      </aol-map>
+    <aol-map #map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+
+      <aol-interaction-select
+        [layers]="isMarkerLayer"
+        (olSelect)="select($event)"
+        [wrapX]="false"
+      ></aol-interaction-select>
+
+      <aol-view [zoom]="5">
+        <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
+      </aol-view>
+
+      <aol-layer-tile [opacity]="1">
+        <aol-source-osm></aol-source-osm>
+      </aol-layer-tile>
+
+      <aol-layer-vector #markersLayer>
+        <aol-source-vector #markersSource [wrapX]="false">
+          <aol-feature>
+            <aol-geometry-point>
+              <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
+            </aol-geometry-point>
+          </aol-feature>
+        </aol-source-vector>
+      </aol-layer-vector>
+    </aol-map>
   `,
 })
 export class SelectInteractionComponent {