Add layerswitcher

projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts

@@ -0,0 +1,75 @@
+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 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.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+  }
+
+
+
+  handleClick(event:Event) {
+    this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
+  }
+
+  close(event:Event) {
+    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));
+  }
+}