File

libs/open-layers/src/lib/controls/legend/ol-layer-time-selector/ol-layer-time-selector.component.ts

Description

Legend component to select time stamps of a layer, the time information is gathered by the WMS capabilities

Implements

OnInit

Metadata

selector n52-ol-layer-time-selector
templateUrl ./ol-layer-time-selector.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(wmsCaps: WmsCapabilitiesService)
Parameters :
Name Type Optional
wmsCaps WmsCapabilitiesService No

Inputs

layer
Type : BaseLayer

Methods

Public compareFn
compareFn(option1: Date, option2: Date)
Parameters :
Name Type Optional
option1 Date No
option2 Date No
Returns : boolean
Protected determineCurrentTimeParameter
determineCurrentTimeParameter()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Public onSelect
onSelect(time: Date)
Parameters :
Name Type Optional
time Date No
Returns : void
Protected setTime
setTime(time: Date)
Parameters :
Name Type Optional
time Date No
Returns : void

Properties

Public currentTime
Type : Date
Protected layerid
Type : string
Protected layerSource
Type : TileWMS
Public loading
Type : boolean
Public timeDimensions
Type : Date[]
Protected url
Type : string
import { Component, Input, OnInit } from '@angular/core';
import BaseLayer from 'ol/layer/Base';
import Layer from 'ol/layer/Layer';
import { TileWMS } from 'ol/source';

import { WmsCapabilitiesService } from '../../../services/wms-capabilities.service';

/**
 * Legend component to select time stamps of a layer, the time information is gathered by the WMS capabilities
 */
@Component({
  selector: 'n52-ol-layer-time-selector',
  templateUrl: './ol-layer-time-selector.component.html'
})
export class OlLayerTimeSelectorComponent implements OnInit {

  @Input() layer: BaseLayer;

  public currentTime: Date;

  public timeDimensions: Date[];

  public loading: boolean;

  protected layerSource: TileWMS;
  protected layerid: string;
  protected url: string;

  constructor(
    protected wmsCaps: WmsCapabilitiesService
  ) { }

  ngOnInit() {
    if (this.layer instanceof Layer) {
      const source = this.layer.getSource();
      if (source instanceof TileWMS) {
        this.loading = true;
        this.layerSource = source;
        this.url = source.getUrls()[0];
        this.layerid = source.getParams()['layers'] || source.getParams()['LAYERS'];
        this.wmsCaps.getTimeDimensionArray(this.layerid, this.url)
          .subscribe(
            res => this.timeDimensions = res,
            error => { },
            () => this.loading = false
          );
        this.determineCurrentTimeParameter();
      }
    }
  }

  public onSelect(time: Date) {
    this.setTime(time);
  }

  public compareFn(option1: Date, option2: Date) {
    return option1 && option2 && option1.getTime() === option2.getTime();
  }

  protected determineCurrentTimeParameter() {
    const currentTimeParam = this.layerSource.getParams()['time'] || this.layerSource.getParams()['Time'];
    if (currentTimeParam) {
      this.currentTime = new Date(currentTimeParam);
    } else {
      this.wmsCaps.getDefaultTimeDimension(this.layerid, this.url).subscribe(time => this.currentTime = time);
    }
  }

  protected setTime(time: Date) {
    this.currentTime = time;
    this.layerSource.updateParams({ time: time.toISOString() });
  }

}
<span *ngIf="loading">loading ...</span>
<select *ngIf="!loading" [ngModel]="currentTime" [compareWith]="compareFn" (ngModelChange)="onSelect($event)">
    <option *ngFor="let time of timeDimensions" [ngValue]="time">{{time | tzDate: 'L LT z'}}</option>
</select>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""