AW-6046 Angular 17

projects/ng-openlayers/src/lib/layers/layer.component.ts

@@ -0,0 +1,68 @@
+import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
+import Event from 'ol/events/Event';
+import { MapComponent } from '../map.component';
+import { LayerGroupComponent } from './layergroup.component';
+import { Extent } from 'ol/extent';
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Input()
+  opacity: number;
+  @Input()
+  visible: boolean;
+  @Input()
+  extent: Extent;
+  @Input()
+  zIndex: number;
+  @Input()
+  minResolution: number;
+  @Input()
+  maxResolution: number;
+
+  @Input()
+  prerender: (evt: Event) => void;
+  @Input()
+  postrender: (evt: Event) => void;
+
+  public instance: any;
+  public componentType = 'layer';
+
+  protected constructor(protected host: MapComponent | LayerGroupComponent) {}
+
+  ngOnInit() {
+    if (this.prerender !== null && this.prerender !== undefined) {
+      this.instance.on('prerender', this.prerender);
+    }
+    if (this.postrender !== null && this.postrender !== undefined) {
+      this.instance.on('postrender', this.postrender);
+    }
+    this.host.instance.getLayers().push(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.getLayers().remove(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+        if (key === 'prerender') {
+          this.instance.un('prerender', changes[key].previousValue);
+          this.instance.on('prerender', changes[key].currentValue);
+        }
+        if (key === 'postrender') {
+          this.instance.un('postrender', changes[key].previousValue);
+          this.instance.on('postrender', changes[key].currentValue);
+        }
+      }
+    }
+    // console.log('changes detected in aol-layer, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+}

projects/ng-openlayers/src/lib/layers/layergroup.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
+import { Group } from 'ol/layer';
+import { LayerComponent } from './layer.component';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-layer-group',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
+  public instance: Group;
+
+  constructor(
+    map: MapComponent,
+    @SkipSelf()
+    @Optional()
+    group?: LayerGroupComponent
+  ) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log(`creating ol.layer.Group instance with:`, this);
+    this.instance = new Group(this);
+    super.ngOnInit();
+  }
+}

projects/ng-openlayers/src/lib/layers/layerimage.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Image } from 'ol/layer';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+import { Extent } from 'ol/extent';
+
+@Component({
+  selector: 'aol-layer-image',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
+  @Input()
+  opacity: number;
+  @Input()
+  visible: boolean;
+  @Input()
+  extent: Extent;
+  @Input()
+  minResolution: number;
+  @Input()
+  maxResolution: number;
+  @Input()
+  zIndex: number;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    this.instance = new Image(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ng-openlayers/src/lib/layers/layertile.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { Tile } from 'ol/layer';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-tile',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  preload: number;
+  @Input()
+  useInterimTilesOnError: boolean;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Tile instance with:', this);
+    this.instance = new Tile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ng-openlayers/src/lib/layers/layervector.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { MapComponent } from '../map.component';
+import { Vector } from 'ol/layer';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-vector',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  renderBuffer: number;
+
+  @Input()
+  style: Style | Style[] | StyleFunction;
+
+  @Input()
+  updateWhileAnimating: boolean;
+
+  @Input()
+  updateWhileInteracting: boolean;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Vector instance with:', this);
+    this.instance = new Vector(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ng-openlayers/src/lib/layers/layervectortile.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
+import { VectorTile } from 'ol/layer';
+import { Feature } from 'ol';
+import { Style } from 'ol/style';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+import { StyleFunction } from 'ol/style/Style';
+
+@Component({
+  selector: 'aol-layer-vectortile',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
+  @Input()
+  renderBuffer: number;
+  @Input()
+  renderMode: any | string;
+  /* not marked as optional in the typings */
+  @Input()
+  renderOrder: (feature1: Feature, feature2: Feature) => number;
+  @Input()
+  style: Style | Style[] | StyleFunction;
+  @Input()
+  updateWhileAnimating: boolean;
+  @Input()
+  updateWhileInteracting: boolean;
+  @Input()
+  visible: boolean;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.VectorTile instance with:', this);
+    this.instance = new VectorTile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}