File
Description
Legend component to select time stamps of a layer, the time information is gathered by the WMS capabilities
Implements
Metadata
selector |
n52-ol-layer-time-selector |
templateUrl |
./ol-layer-time-selector.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Methods
Public
compareFn
|
compareFn(option1: Date, option2: Date)
|
|
Parameters :
Name |
Type |
Optional |
option1 |
Date
|
No
|
option2 |
Date
|
No
|
|
Protected
determineCurrentTimeParameter
|
determineCurrentTimeParameter()
|
|
|
Public
onSelect
|
onSelect(time: Date)
|
|
Parameters :
Name |
Type |
Optional |
time |
Date
|
No
|
|
Protected
setTime
|
setTime(time: Date)
|
|
Parameters :
Name |
Type |
Optional |
time |
Date
|
No
|
|
Public
currentTime
|
Type : Date
|
|
Protected
layerid
|
Type : string
|
|
Protected
layerSource
|
Type : TileWMS
|
|
Public
timeDimensions
|
Type : Date[]
|
|
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 with directive