libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts
Legend component to animate time dependend layers, the time information is gathered by the WMS capabilities
selector | n52-ol-layer-animate-time |
templateUrl | ./ol-layer-animate-time.component.html |
Properties |
|
Methods |
|
Inputs |
constructor(wmsCaps: WmsCapabilitiesService)
|
||||||
Parameters :
|
timeInterval | |
Default value : 2000
|
|
Interval of the animation |
layer | |
Type : BaseLayer
|
|
Inherited from
OlLayerTimeSelectorComponent
|
|
Defined in
OlLayerTimeSelectorComponent:17
|
Public resetAnimation |
resetAnimation()
|
Returns :
void
|
Public startAnimation |
startAnimation()
|
Returns :
void
|
Public stopAnimation |
stopAnimation()
|
Returns :
void
|
Public compareFn |
compareFn(option1: Date, option2: Date)
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:56
|
Returns :
boolean
|
Protected determineCurrentTimeParameter |
determineCurrentTimeParameter()
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:60
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:33
|
Returns :
void
|
Public onSelect | ||||||
onSelect(time: Date)
|
||||||
Inherited from
OlLayerTimeSelectorComponent
|
||||||
Defined in
OlLayerTimeSelectorComponent:52
|
||||||
Parameters :
Returns :
void
|
Protected setTime | ||||||
setTime(time: Date)
|
||||||
Inherited from
OlLayerTimeSelectorComponent
|
||||||
Defined in
OlLayerTimeSelectorComponent:69
|
||||||
Parameters :
Returns :
void
|
Private interval |
Type : NodeJS.Timeout
|
Public currentTime |
Type : Date
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:19
|
Protected layerid |
Type : string
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:26
|
Protected layerSource |
Type : TileWMS
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:25
|
Public loading |
Type : boolean
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:23
|
Public timeDimensions |
Type : Date[]
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:21
|
Protected url |
Type : string
|
Inherited from
OlLayerTimeSelectorComponent
|
Defined in
OlLayerTimeSelectorComponent:27
|
import { Component, Input, OnInit } from '@angular/core';
import { WmsCapabilitiesService } from '../../../services/wms-capabilities.service';
import { OlLayerTimeSelectorComponent } from '../ol-layer-time-selector/ol-layer-time-selector.component';
/**
* Legend component to animate time dependend layers, the time information is gathered by the WMS capabilities
*/
@Component({
selector: 'n52-ol-layer-animate-time',
templateUrl: './ol-layer-animate-time.component.html'
})
export class OlLayerAnimateTimeComponent extends OlLayerTimeSelectorComponent implements OnInit {
/**
* Interval of the animation
*/
@Input() timeInterval = 2000;
private interval: NodeJS.Timeout;
constructor(
protected wmsCaps: WmsCapabilitiesService
) {
super(wmsCaps);
}
public startAnimation() {
// get current time parameter
this.determineCurrentTimeParameter();
// find index in list
let idx = this.timeDimensions.findIndex(e => e.getTime() === this.currentTime.getTime());
// start animation
this.interval = setInterval(() => {
idx++;
if (idx >= this.timeDimensions.length) { idx = 0; }
this.setTime(this.timeDimensions[idx]);
}, this.timeInterval);
}
public stopAnimation() {
clearInterval(this.interval);
}
public resetAnimation() {
this.wmsCaps.getDefaultTimeDimension(this.layerid, this.url).subscribe(time => this.setTime(time));
}
}
<span *ngIf="loading">loading ...</span>
<span *ngIf="!loading">
<span>{{currentTime}}</span>
<span (click)="startAnimation()"> start </span>
<span (click)="stopAnimation()"> stop </span>
<span (click)="resetAnimation()"> reset </span>
</span>