86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
|
import {IItemLayer} from '../../models/item.layer';
|
|
import { Store } from '@ngrx/store';
|
|
import * as mapReducers from '../../reducers/map.reducer';
|
|
import * as mapActions from '../../actions/map.actions';
|
|
import {createEmpty,extend } from 'ol/extent';
|
|
import { Observable } from 'rxjs';
|
|
|
|
@Component({
|
|
selector: 'fm-map-layer-switcher',
|
|
templateUrl: './layer-switcher.component.html',
|
|
styleUrls: ['./layer-switcher.component.scss']
|
|
})
|
|
export class LayerSwitcher implements OnInit,OnChanges{
|
|
|
|
public showLayerSwitcher:Observable<boolean>;
|
|
public overlayLayers: Observable<Array<IItemLayer>>;
|
|
public selectedOverlayLayer: Observable<IItemLayer>;
|
|
public selectedItemLayer$: Observable<IItemLayer>;
|
|
public baseLayers: Observable<Array<IItemLayer>>;
|
|
public selectedBaseLayer: Observable<IItemLayer>;
|
|
|
|
constructor( private store: Store<mapReducers.State>) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
|
|
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
|
|
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
|
|
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
|
|
this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer)
|
|
this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
}
|
|
|
|
|
|
|
|
handleClick(event:Event) {
|
|
event.stopPropagation();
|
|
this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
|
|
}
|
|
|
|
close(event:Event) {
|
|
event.stopPropagation();
|
|
this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
|
|
}
|
|
|
|
|
|
|
|
handleOnToggleVisibility(itemLayer: IItemLayer) {
|
|
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
|
|
}
|
|
|
|
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
|
|
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
|
|
}
|
|
|
|
handleOnDelete(itemLayer: IItemLayer) {
|
|
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
|
|
}
|
|
|
|
handleZoomToExtent(itemLayer: IItemLayer) {
|
|
var extent = createEmpty();
|
|
extend(extent, itemLayer.layer.getExtent());
|
|
if (extent) {
|
|
this.store.dispatch(new mapActions.SetExtent(extent));
|
|
}
|
|
}
|
|
|
|
handleSelectOverlayLayer(itemLayer: IItemLayer) {
|
|
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
|
|
}
|
|
|
|
handleSelectBaseLayer(itemLayer: IItemLayer) {
|
|
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
|
|
}
|
|
|
|
handleToggleShowDatalayerSlide(event:Event) {
|
|
this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
|
|
this.store.dispatch(new mapActions.ToggleShowDataLayerSlide());
|
|
event.preventDefault();
|
|
}
|
|
}
|