helgoland-toolbox documentation
  1. Components
  2. OlLayerAnimateTimeComponent

File

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

Description

Legend component to animate time dependend layers, the time information is gathered by the WMS capabilities

Extends

OlLayerTimeSelectorComponent

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

constructor(wmsCaps: WmsCapabilitiesService)
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:20
Parameters :
Name Type Optional
wmsCaps WmsCapabilitiesService No

Inputs

timeInterval
Default value : 2000
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:18

Interval of the animation
layer
Type : BaseLayer
Inherited from OlLayerTimeSelectorComponent
Defined in OlLayerTimeSelectorComponent:17

Methods

Public resetAnimation
resetAnimation()
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:45
Returns : void
Public startAnimation
startAnimation()
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:28
Returns : void
Public stopAnimation
stopAnimation()
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:41
Returns : void
Public compareFn
compareFn(option1: Date, option2: Date)
Inherited from OlLayerTimeSelectorComponent
Defined in OlLayerTimeSelectorComponent:56
Parameters :
Name Type Optional
option1 Date No
option2 Date No
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 :
Name Type Optional
time Date No
Returns : void
Protected setTime
setTime(time: Date)
Inherited from OlLayerTimeSelectorComponent
Defined in OlLayerTimeSelectorComponent:69
Parameters :
Name Type Optional
time Date No
Returns : void

Properties

Private interval
Type : NodeJS.Timeout
Defined in libs/open-layers/src/lib/controls/legend/ol-layer-animate-time/ol-layer-animate-time.component.ts:20
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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""