AW6241 ng-18 adopt ng-openlayers

projects/ng-openlayers/src/lib/sources/bingmaps.component.ts

@@ -0,0 +1,42 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { BingMaps } from 'ol/source';
+import { SourceComponent } from './source.component';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { LoadFunction } from 'ol/Tile';
+
+@Component({
+  selector: 'aol-source-bingmaps',
+  template: ` <div class="aol-source-bingmaps"></div> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }],
+})
+export class SourceBingmapsComponent extends SourceComponent implements OnInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  culture: string;
+  @Input()
+  key: string;
+  @Input()
+  imagerySet: 'Road' | 'Aerial' | 'AerialWithLabels' | 'collinsBart' | 'ordnanceSurvey' = 'Aerial';
+  @Input()
+  maxZoom: number;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  wrapX: boolean;
+
+  instance: BingMaps;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new BingMaps(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/sources/cluster.component.ts

@@ -0,0 +1,54 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import { Cluster, Vector } from 'ol/source';
+
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+import { SourceVectorComponent } from './vector.component';
+
+@Component({
+  selector: 'aol-source-cluster',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
+})
+export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  distance: number;
+  @Input()
+  geometryFunction?: (feature: Feature) => Point;
+  @Input()
+  wrapX?: boolean;
+
+  @ContentChild(SourceVectorComponent, { static: false })
+  sourceVectorComponent: SourceVectorComponent;
+
+  instance: Cluster;
+  source: Vector;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    this.source = this.sourceVectorComponent.instance;
+
+    this.instance = new Cluster(this);
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('distance')) {
+      this.instance.setDistance(this.distance);
+    }
+  }
+}

projects/ng-openlayers/src/lib/sources/geojson.component.ts

@@ -0,0 +1,36 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+import FeatureFormat from 'ol/format/Feature';
+import { Vector } from 'ol/source';
+import { GeoJSON } from 'ol/format';
+import { ProjectionLike } from 'ol/proj';
+
+@Component({
+  selector: 'aol-source-geojson',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }],
+})
+export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
+  @Input()
+  defaultDataProjection: ProjectionLike;
+  @Input()
+  featureProjection: ProjectionLike;
+  @Input()
+  geometryName: string;
+  @Input()
+  url: string;
+
+  instance: Vector;
+  format: FeatureFormat;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.format = new GeoJSON(this);
+    this.instance = new Vector(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,62 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import ImageArcGISRest from 'ol/source/ImageArcGISRest';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { ImageSourceEvent } from 'ol/source/Image';
+
+@Component({
+  selector: 'aol-source-imagearcgisrest',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
+})
+export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
+  @Input() projection: ProjectionLike | string;
+  @Input() url: string;
+  @Input() attributions: AttributionLike;
+  @Input() crossOrigin?: string;
+  @Input() imageLoadFunction?: LoadFunction;
+  @Input() params?: { [k: string]: any };
+  @Input() ratio = 1.5;
+  @Input() resolutions?: number[];
+  @Input() wrapX?: boolean;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageArcGISRest;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new ImageArcGISRest(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

projects/ng-openlayers/src/lib/sources/imagestatic.component.ts

@@ -0,0 +1,88 @@
+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';
+import { ProjectionLike } from 'ol/proj';
+import { Extent } from 'ol/extent';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { Size } from 'ol/size';
+import { ImageSourceEvent } from 'ol/source/Image';
+
+@Component({
+  selector: 'aol-source-imagestatic',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
+})
+export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
+  @Input()
+  projection: ProjectionLike | string;
+  @Input()
+  imageExtent: Extent;
+  @Input()
+  url: string;
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  crossOrigin?: string;
+  @Input()
+  imageLoadFunction?: LoadFunction;
+  @Input()
+  imageSize?: Size;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageStatic;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  setLayerSource(): void {
+    this.instance = new ImageStatic(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.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);
+  }
+}

projects/ng-openlayers/src/lib/sources/imagewms.component.ts

@@ -0,0 +1,74 @@
+import {
+  Component,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  forwardRef,
+  SimpleChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { ImageWMS } from 'ol/source';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { ImageSourceEvent } from 'ol/source/Image';
+import { ServerType } from 'ol/source/wms';
+
+@Component({
+  selector: 'aol-source-imagewms',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
+})
+export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  serverType: ServerType;
+  @Input()
+  imageLoadFunction?: LoadFunction;
+  @Input()
+  params: { [key: string]: any };
+  @Input()
+  projection: ProjectionLike | string;
+  @Input()
+  ratio: number;
+  @Input()
+  resolutions: Array<number>;
+  @Input()
+  url: string;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageWMS;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new ImageWMS(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
+import { OSM } from 'ol/source';
+import { AttributionLike } from 'ol/source/Source';
+import { TileSourceEvent } from 'ol/source/Tile';
+import { LoadFunction } from 'ol/Tile';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { SourceXYZComponent } from './xyz.component';
+
+@Component({
+  selector: 'aol-source-osm',
+  template: ` <div class="aol-source-osm"></div> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
+})
+export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  maxZoom: number;
+  @Input()
+  opaque: boolean;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  url: string;
+  @Input()
+  wrapX: boolean;
+
+  @Output()
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError = new EventEmitter<TileSourceEvent>();
+
+  instance: OSM;
+
+  constructor(
+    @Optional()
+    @Host()
+    protected layer?: LayerTileComponent
+  ) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+    this.instance = new OSM(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.register(this.instance);
+  }
+}

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

@@ -0,0 +1,68 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  Output,
+} from '@angular/core';
+import { Raster, Source } from 'ol/source';
+import { Operation, RasterSourceEvent } from 'ol/source/Raster';
+
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-raster',
+  template: ` <ng-content></ng-content> `,
+  providers: [
+    {
+      provide: SourceComponent,
+      useExisting: forwardRef(() => SourceRasterComponent),
+    },
+  ],
+})
+export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
+  @Input()
+  operation?: Operation;
+  @Input()
+  threads?: number;
+  @Input()
+  lib?: any;
+  @Input()
+  operationType?: 'pixel' | 'image';
+
+  @Output()
+  beforeOperations = new EventEmitter<RasterSourceEvent>();
+  @Output()
+  afterOperations = new EventEmitter<RasterSourceEvent>();
+
+  instance: Raster;
+  sources: Source[] = [];
+
+  @ContentChild(SourceComponent, { static: false })
+  set source(sourceComponent: SourceComponent) {
+    this.sources = [sourceComponent.instance];
+    if (this.instance) {
+      // Openlayer doesn't handle sources update. Just recreate Raster instance.
+      this.init();
+    }
+  }
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    this.init();
+  }
+
+  init() {
+    this.instance = new Raster(this);
+    this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
+    this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
+    this.register(this.instance);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Input, OnDestroy, Directive } from '@angular/core';
+import Source from 'ol/source/Source';
+
+import { LayerComponent } from '../layers/layer.component';
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class SourceComponent implements OnDestroy {
+  @Input()
+  attributions: any;
+
+  public instance: Source;
+  public componentType = 'source';
+
+  protected constructor(protected host: LayerComponent) {}
+
+  ngOnDestroy() {
+    if (this.host && this.host.instance) {
+      this.host.instance.setSource(null);
+    }
+  }
+
+  protected register(s: Source) {
+    if (this.host) {
+      this.host.instance.setSource(s);
+    }
+  }
+}

projects/ng-openlayers/src/lib/sources/tilejson.component.ts

@@ -0,0 +1,25 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { TileJSON } from 'ol/source';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-tilejson',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
+})
+export class SourceTileJSONComponent extends SourceComponent implements OnInit {
+  @Input()
+  url: string;
+
+  instance: TileJSON;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new TileJSON(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/sources/tilewms.component.ts

@@ -0,0 +1,58 @@
+import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { TileWMS } from 'ol/source';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { LoadFunction } from 'ol/Tile';
+import { ServerType } from 'ol/source/wms';
+
+@Component({
+  selector: 'aol-source-tilewms',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
+})
+export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  gutter: number;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  params: { [key: string]: any };
+  @Input()
+  projection: string;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  serverType: ServerType;
+  @Input()
+  tileGrid: TileGrid;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  instance: TileWMS;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new TileWMS(this);
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

projects/ng-openlayers/src/lib/sources/tilewmts.component.ts

@@ -0,0 +1,117 @@
+import {
+  Component,
+  Host,
+  Input,
+  forwardRef,
+  AfterContentInit,
+  ContentChild,
+  SimpleChanges,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { TileGridWMTSComponent } from '../tilegridwmts.component';
+import { WMTS as SourceWMTS } from 'ol/source';
+import WMTS from 'ol/tilegrid/WMTS';
+import { ProjectionLike } from 'ol/proj';
+import { LoadFunction } from 'ol/Tile';
+import { TileSourceEvent } from 'ol/source/Tile';
+import { RequestEncoding } from 'ol/source/WMTS';
+
+@Component({
+  selector: 'aol-source-tilewmts',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
+})
+export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  cacheSize?: number;
+  @Input()
+  crossOrigin?: string;
+  @Input()
+  tileGrid: WMTS;
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  reprojectionErrorThreshold?: number;
+  @Input()
+  requestEncoding?: RequestEncoding | undefined;
+  @Input()
+  layer: string;
+  @Input()
+  style: string;
+  @Input()
+  tileClass?: any;
+  @Input()
+  tilePixelRatio?: number;
+  @Input()
+  version?: string;
+  @Input()
+  format?: string;
+  @Input()
+  matrixSet: string;
+  @Input()
+  dimensions?: any;
+  @Input()
+  url?: string;
+  @Input()
+  tileLoadFunction?: LoadFunction;
+  @Input()
+  urls?: string[];
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError = new EventEmitter<TileSourceEvent>();
+
+  @ContentChild(TileGridWMTSComponent, { static: false })
+  tileGridWMTS: TileGridWMTSComponent;
+
+  instance: SourceWMTS;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  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);
+  }
+
+  setLayerSource(): void {
+    this.instance = new SourceWMTS(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);
+  }
+
+  ngAfterContentInit(): void {
+    if (this.tileGridWMTS) {
+      this.tileGrid = this.tileGridWMTS.instance;
+      this.setLayerSource();
+    }
+  }
+}

projects/ng-openlayers/src/lib/sources/utfgrid.component.ts

@@ -0,0 +1,26 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { SourceComponent } from './source.component';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { UTFGrid } from 'ol/source';
+import { Config } from 'ol/source/TileJSON';
+
+@Component({
+  selector: 'aol-source-utfgrid',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
+})
+export class SourceUTFGridComponent extends SourceComponent implements OnInit {
+  @Input() tileJSON: Config;
+  @Input() url: string;
+
+  instance: UTFGrid;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new UTFGrid(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/sources/vector.component.ts

@@ -0,0 +1,37 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { Vector } from 'ol/source';
+import Feature from 'ol/format/Feature';
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+import { LoadingStrategy } from 'ol/source/Vector';
+
+@Component({
+  selector: 'aol-source-vector',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
+})
+export class SourceVectorComponent extends SourceComponent implements OnInit {
+  @Input()
+  overlaps: boolean;
+  @Input()
+  useSpatialIndex: boolean;
+  @Input()
+  wrapX: boolean;
+  @Input()
+  url: string;
+  @Input()
+  format: Feature;
+  @Input()
+  strategy: LoadingStrategy;
+
+  instance: Vector;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new Vector(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/sources/vectortile.component.ts

@@ -0,0 +1,56 @@
+import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
+import { VectorTile } from 'ol/source';
+import Feature from 'ol/format/Feature';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { LayerVectorTileComponent } from '../layers/layervectortile.component';
+import { FormatComponent } from '../formats/format.component';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { UrlFunction } from 'ol/Tile';
+
+@Component({
+  selector: 'aol-source-vectortile',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
+})
+export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  overlaps: boolean;
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  tilePixelRatio: number;
+  @Input()
+  tileUrlFunction: UrlFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  @ContentChild(FormatComponent, { static: false })
+  formatComponent: FormatComponent;
+  @ContentChild(TileGridComponent, { static: false })
+  tileGridComponent: TileGridComponent;
+
+  public instance: VectorTile;
+  format: Feature;
+  tileGrid: TileGrid;
+
+  constructor(@Host() layer: LayerVectorTileComponent) {
+    super(layer);
+  }
+
+  /* need the children to construct the OL3 object */
+  ngAfterContentInit() {
+    this.format = this.formatComponent.instance;
+    this.tileGrid = this.tileGridComponent.instance;
+    // console.log('creating ol.source.VectorTile instance with:', this);
+    this.instance = new VectorTile(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,115 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { Size } from 'ol/size';
+import { XYZ } from 'ol/source';
+import { TileSourceEvent } from 'ol/source/Tile';
+import { LoadFunction, UrlFunction } from 'ol/Tile';
+import TileGrid from 'ol/tilegrid/TileGrid';
+
+import { LayerTileComponent } from '../layers/layertile.component';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-xyz',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
+})
+export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  opaque: boolean;
+  @Input()
+  projection: string;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  minZoom: number;
+  @Input()
+  maxZoom: number;
+  @Input()
+  tileGrid: TileGrid;
+  @Input()
+  tileLoadFunction?: LoadFunction;
+  @Input()
+  tilePixelRatio: number;
+  @Input()
+  tileSize: number | Size;
+  @Input()
+  tileUrlFunction?: UrlFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  @ContentChild(TileGridComponent, { static: false })
+  tileGridXYZ: TileGridComponent;
+
+  @Output()
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError = new EventEmitter<TileSourceEvent>();
+
+  instance: XYZ;
+
+  constructor(
+    @Optional()
+    @Host()
+    protected layer?: LayerTileComponent
+  ) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+    this.init();
+  }
+
+  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;
+      }
+    }
+
+    this.instance.setProperties(properties, false);
+    if (changes.hasOwnProperty('url')) {
+      this.init();
+    }
+  }
+
+  init() {
+    this.instance = new XYZ(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.register(this.instance);
+  }
+}