libs/open-layers/src/lib/controls/legend/ol-layer-opacitiy-slider/ol-layer-opacitiy-slider.component.ts
Legend component handle the opacity of the layer
selector | n52-ol-layer-opacitiy-slider |
templateUrl | ./ol-layer-opacitiy-slider.component.html |
Properties |
|
Methods |
Inputs |
constructor()
|
layer | |
Type : BaseLayer
|
|
ngDoCheck |
ngDoCheck()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
setOpacity | ||||||
setOpacity(o: number)
|
||||||
Parameters :
Returns :
void
|
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">