File

libs/open-layers/src/lib/controls/legend/ol-layer-opacitiy-slider/ol-layer-opacitiy-slider.component.ts

Description

Legend component handle the opacity of the layer

Implements

OnInit DoCheck

Metadata

selector n52-ol-layer-opacitiy-slider
templateUrl ./ol-layer-opacitiy-slider.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()

Inputs

layer
Type : BaseLayer

Methods

ngDoCheck
ngDoCheck()
Returns : void
ngOnInit
ngOnInit()
Returns : void
setOpacity
setOpacity(o: number)
Parameters :
Name Type Optional
o number No
Returns : void

Properties

Public opacity
Type : number
import { Component, DoCheck, Input, OnInit } from '@angular/core';
import BaseLayer from 'ol/layer/Base';

/**
 * Legend component handle the opacity of the layer
 */
@Component({
  selector: 'n52-ol-layer-opacitiy-slider',
  templateUrl: './ol-layer-opacitiy-slider.component.html'
})
export class OlLayerOpacitiySliderComponent implements OnInit, DoCheck {

  @Input() layer: BaseLayer;

  public opacity: number;

  constructor() { }

  ngOnInit(): void {
    this.opacity = this.layer.getOpacity() * 100;
  }

  ngDoCheck() {
    const o = this.layer.getOpacity() * 100;
    if (this.layer && o !== this.opacity) {
      this.opacity = o;
    }
  }

  setOpacity(o: number) {
    this.opacity = o;
    if (this.layer) {
      this.layer.setOpacity(this.opacity / 100);
    }
  }
}
<input name="ram" type="range" min="0" max="100" [(ngModel)]="opacity" (ngModelChange)="setOpacity($event)" value="0">
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""