Renamed prefixes in angular.json
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
Willem Dantuma
@@ -0,0 +1,98 @@
|
||||
<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<ng-container *ngIf="(mapState$|async) as mapState">
|
||||
<aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
|
||||
<aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
|
||||
<fm-map-zoom-to-extent [extent]="extent$|async" [animate]="true"></fm-map-zoom-to-extent>
|
||||
</aol-view>
|
||||
</ng-container>
|
||||
<aol-interaction-default></aol-interaction-default>
|
||||
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
|
||||
<fm-map-item-layers [itemLayers]="baseLayers|async"></fm-map-item-layers>
|
||||
<fm-map-item-layers [itemLayers]="overlayLayers|async"></fm-map-item-layers>
|
||||
<fm-map-item-layers [itemLayer]="selectedItemLayer|async"></fm-map-item-layers>
|
||||
<aol-layer-vector>
|
||||
<fm-map-item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></fm-map-item-source-vector>
|
||||
</aol-layer-vector>
|
||||
<fm-map-gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></fm-map-gps-location>
|
||||
<div class="control-container">
|
||||
<!-- <switch2d3d></switch2d3d>-->
|
||||
<fm-map-rotation-reset></fm-map-rotation-reset>
|
||||
</div>
|
||||
<fm-map-file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
|
||||
</aol-map>
|
||||
<fm-map-map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></fm-map-map-search>
|
||||
<fm-side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
|
||||
<div class="panel-wrapper">
|
||||
<div class="panel-top bg-secondary" *ngIf="!(searchMinified | async)">
|
||||
</div>
|
||||
<div class="panel-bottom">
|
||||
|
||||
<div *ngIf="!(selectedItem|async)">
|
||||
<fm-map-feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></fm-map-feature-list-container>
|
||||
</div>
|
||||
|
||||
<div *ngIf="(selectedItem | async);let item">
|
||||
<fm-map-selected-item-container [item]="item"></fm-map-selected-item-container>
|
||||
</div>
|
||||
<div *ngIf="(features|async).length == 0" class="no-results m-2">
|
||||
<div *ngIf="(queryState|async)?.query">Cannot find <span>{{(queryState|async)?.query}}</span></div>
|
||||
<div *ngIf="(queryState|async)?.tags">Cannot find tag <span>{{(queryState|async)?.tags}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fm-side-panel>
|
||||
<fm-side-panel [visible]="(menuVisible|async)" class="menu">
|
||||
<div class="container-fluid">
|
||||
<div class="body">
|
||||
<div class="logo">
|
||||
<span><img src="/images/farmmapslogo.png" /></span>
|
||||
<span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
|
||||
</div>
|
||||
|
||||
<div class="card menu-card">
|
||||
<div class="d-flex flex-row flex-wrap">
|
||||
<div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
|
||||
<div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
|
||||
<div class="caption" i18n>Farms</div>
|
||||
</div>
|
||||
<div class="shortcut-icon" (click)="handleTrijntjeClick($event,{itemType:'vnd.farmmaps.itemtype.trijntje'})">
|
||||
<div class="icon rounded-circle trijntje-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
|
||||
<div class="caption" i18n>Trijntje</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card menu-card">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/my_drive']" class="nav-link"><span i18n><i class="fa fa-folder" aria-hidden="true"></i> My Drive</span></a></li>
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/map_uploads']" class="nav-link"><span i18n><i class="fa fa-cloud-upload" aria-hidden="true"></i> Map uploads</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card menu-card">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0">
|
||||
<a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
|
||||
<div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
|
||||
<fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item py-0">
|
||||
<a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
|
||||
<div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
|
||||
<fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--<div class="card menu-card">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
|
||||
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</fm-side-panel>
|
||||
|
||||
171
projects/common-map/src/fm-map/components/map/map.component.scss
Normal file
171
projects/common-map/src/fm-map/components/map/map.component.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
aol-map { position:absolute;width:100%;height:100%;}
|
||||
|
||||
.arrow {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-height:22rem;
|
||||
min-width:15rem;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height:19rem;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left:-7px;
|
||||
padding-left:7px;
|
||||
margin-right:-7px;
|
||||
padding-right:7px;
|
||||
margin-bottom:7px;
|
||||
}
|
||||
|
||||
.icon-top {
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
height: 9.75rem;
|
||||
}
|
||||
|
||||
.icon-top i {
|
||||
padding-top: 1.875rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
switch2d3d {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-top {
|
||||
display: block;
|
||||
height:0;
|
||||
}
|
||||
|
||||
.panel-bottom {
|
||||
overflow:auto;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.no-results > span {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
div.logo {
|
||||
display:flex;
|
||||
padding-top:1em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
div.logo img {
|
||||
width:100%;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
div.logo button {
|
||||
margin-left:1em;
|
||||
}
|
||||
|
||||
timespan {
|
||||
position: absolute;
|
||||
transition: left 0.5s;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
timespan.menuVisible {
|
||||
left: 22rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .timespan div.clearfix {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
|
||||
:host ::ng-deep .menu .side-panel {
|
||||
z-index: 100;
|
||||
background-color: rgb(245,245,245);
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.panel-top {
|
||||
height: 8.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
transition: margin-left 0.3s;
|
||||
}
|
||||
|
||||
.shortcut-icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.shortcut-icon > .icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: #731e64;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
color: #ffffff;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.shortcut-icon > .caption {
|
||||
text-align: center;
|
||||
width: 4rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: theme-color();
|
||||
}
|
||||
|
||||
.shortcut-icon > .farm-icon {
|
||||
background-color: #731E64;
|
||||
}
|
||||
|
||||
.shortcut-icon > .trijntje-icon {
|
||||
background-color: #FAA33F;
|
||||
}
|
||||
|
||||
/*.panel-visible {
|
||||
margin-left:22rem;
|
||||
}*/
|
||||
295
projects/common-map/src/fm-map/components/map/map.component.ts
Normal file
295
projects/common-map/src/fm-map/components/map/map.component.ts
Normal file
@@ -0,0 +1,295 @@
|
||||
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
|
||||
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
|
||||
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
//import { proj,Map } from 'openlayers';
|
||||
|
||||
// Map
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from '../../models';
|
||||
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
||||
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
|
||||
import { StateSerializerService } from '../../services/state-serializer.service';
|
||||
import { GeolocationService} from '../../services/geolocation.service';
|
||||
|
||||
// AppCommon
|
||||
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
|
||||
import { IItemType, IItem } from '@farmmaps/common';
|
||||
import {commonReducers} from '@farmmaps/common';
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
|
||||
import {Feature} from 'ol';
|
||||
import {Extent,createEmpty,extend } from 'ol/extent';
|
||||
import {transform} from 'ol/proj';
|
||||
import { query } from '@angular/animations';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-map',
|
||||
templateUrl: './map.component.html',
|
||||
styleUrls: ['./map.component.scss']
|
||||
})
|
||||
|
||||
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
title: string = 'Map';
|
||||
public openedModalName: Observable<string>;
|
||||
public itemTypes: Observable<{ [id: string]: IItemType }>;
|
||||
public mapState$: Observable<IMapState>;
|
||||
public features: Observable<Array<Feature>>;
|
||||
public overlayLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedOverlayLayer: Observable<IItemLayer>;
|
||||
public selectedItemLayer: Observable<IItemLayer>;
|
||||
public baseLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedBaseLayer: Observable<IItemLayer>;
|
||||
public projection: Observable<string>;
|
||||
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
|
||||
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
|
||||
private paramSub: Subscription;
|
||||
private itemTypeSub: Subscription;
|
||||
private mapStateSub: Subscription;
|
||||
private queryStateSub: Subscription;
|
||||
public parentCode: Observable<string>;
|
||||
public panelVisible: Observable<boolean>;
|
||||
public panelCollapsed: Observable<boolean>;
|
||||
public selectedFeature: Observable<Feature>;
|
||||
public selectedItem: Observable<IItem>;
|
||||
public queryState: Observable<IQueryState>;
|
||||
public period: Observable<IPeriodState>;
|
||||
public clearEnabled: Observable<boolean>;
|
||||
public searchCollapsed: Observable<boolean>;
|
||||
public searchMinified: Observable<boolean>;
|
||||
public menuVisible: Observable<boolean>;
|
||||
public query: Observable<IQueryState>;
|
||||
public position: Observable<Position>;
|
||||
public baseLayersCollapsed:boolean = true;
|
||||
public overlayLayersCollapsed: boolean = true;
|
||||
public extent$: Observable<Extent>;
|
||||
@ViewChild('map') map;
|
||||
|
||||
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
escapeClose(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.handleCloseModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleOpenModal(modalName: string) {
|
||||
this.store.dispatch(new commonActions.OpenModal(modalName));
|
||||
}
|
||||
|
||||
handleCloseModal() {
|
||||
this.store.dispatch(new commonActions.CloseModal());
|
||||
}
|
||||
|
||||
handleFileDropped(droppedFile: IDroppedFile) {
|
||||
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
|
||||
}
|
||||
|
||||
handleFeaturesSelected(feature: Feature) {
|
||||
if (feature) {
|
||||
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
|
||||
this.store.dispatch(new mapActions.DoQuery(newQuery));
|
||||
}
|
||||
}
|
||||
|
||||
handleSearch(queryState: IQueryState) {
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.dispatch(new mapActions.Init());
|
||||
this.selectedFeatures.next({x:0,y:0,features:[]});
|
||||
this.mapState$ = this.store.select(mapReducers.selectGetMapState);
|
||||
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
|
||||
this.features = this.store.select(mapReducers.selectGetFeatures);
|
||||
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
|
||||
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
|
||||
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
|
||||
this.projection = this.store.select(mapReducers.selectGetProjection);
|
||||
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
|
||||
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
|
||||
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
|
||||
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
|
||||
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
|
||||
this.queryState = this.store.select(mapReducers.selectGetQueryState);
|
||||
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
|
||||
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
|
||||
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
|
||||
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
|
||||
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
|
||||
this.query = this.store.select(mapReducers.selectGetQuery);
|
||||
this.extent$ = this.store.select(mapReducers.selectGetExtent);
|
||||
this.selectedFeatures.next(null);
|
||||
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
|
||||
this.period = this.store.select(mapReducers.selectGetPeriod);
|
||||
this.position = this.geolocationService.getCurrentPosition();
|
||||
|
||||
this.mapState$.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
|
||||
this.replaceUrl(state[0], state[1], true);
|
||||
});
|
||||
this.query.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
|
||||
this.replaceUrl(state[1], state[0],false);
|
||||
});
|
||||
}
|
||||
|
||||
private stateSetCount: number = 0;
|
||||
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
|
||||
private lastMapState: string = "";
|
||||
ngAfterViewInit() {
|
||||
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
|
||||
//console.log("Param sub");
|
||||
var newMapState: IMapState = null;
|
||||
var newQueryState: IQueryState = null;
|
||||
var mapStateChanged = false;
|
||||
var queryStateChanged = false;
|
||||
if (params.has("xCenter") && params.has("yCenter")) {
|
||||
let xCenter = parseFloat(params.get("xCenter"));
|
||||
let yCenter = parseFloat(params.get("yCenter"));
|
||||
let zoom = parseFloat(params.get("zoom"));
|
||||
let rotation = parseFloat(params.get("rotation"));
|
||||
let baseLayer = params.get("baseLayer");
|
||||
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
|
||||
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
|
||||
this.lastMapState = JSON.stringify(newMapState);
|
||||
//console.log(`Base layer: ${newMapState.baseLayerCode}`)
|
||||
}
|
||||
if (params.has("queryState")) {
|
||||
let queryState = params.get("queryState");
|
||||
newQueryState = tassign(mapReducers.initialQueryState);
|
||||
if (queryState != "") {
|
||||
newQueryState = this.serializeService.deserialize(queryState);
|
||||
}
|
||||
queryStateChanged = this.lastQueryState != queryState;
|
||||
this.lastQueryState = queryState;
|
||||
}
|
||||
|
||||
if (mapStateChanged && queryStateChanged) {
|
||||
//console.log("Both states");
|
||||
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
|
||||
} else if (mapStateChanged) {
|
||||
//console.log("Map state");
|
||||
this.store.dispatch(new mapActions.SetMapState(newMapState));
|
||||
} else if (queryStateChanged) {
|
||||
//console.log("Query state");
|
||||
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
|
||||
}
|
||||
this.stateSetCount += 1;
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.map.instance.updateSize();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
handleSearchCollapse(event) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleSearchExpand(event) {
|
||||
this.store.dispatch(new mapActions.ExpandSearch());
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new mapActions.ToggleMenu());
|
||||
}
|
||||
|
||||
handleToggleBaseLayers(event:MouseEvent) {
|
||||
this.baseLayersCollapsed = !this.baseLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleToggleOverlayLayers(event: MouseEvent) {
|
||||
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handlePredefinedQuery(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
handleTrijntjeClick(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
var mapState = JSON.parse(this.lastMapState);
|
||||
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
|
||||
}
|
||||
|
||||
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
|
||||
//console.log(`Replace url :${mapState.baseLayerCode}`)
|
||||
this.router.navigate([".", mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: replace,relativeTo:this.route.parent });
|
||||
}
|
||||
|
||||
handleOnMoveEnd(event) {
|
||||
var map = event.map;
|
||||
var view = map.getView();
|
||||
var rotation = view.getRotation();
|
||||
var zoom = view.getZoom();
|
||||
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
|
||||
var extent = view.calculateExtent(this.map.instance.getSize());
|
||||
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
|
||||
let state = { mapState: mapState, extent: extent };
|
||||
let source = from([state]);
|
||||
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
|
||||
if (mapState && baselayer && queryState) {
|
||||
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
|
||||
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
|
||||
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleOnMouseDown(event: MouseEvent) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleOnDownload(event) {
|
||||
|
||||
}
|
||||
|
||||
handleClearSearch(event) {
|
||||
this.store.dispatch(new commonActions.Escape(true, false));
|
||||
}
|
||||
|
||||
handleOnDelete(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
handleZoomToExtent(itemLayer: IItemLayer) {
|
||||
var extent = createEmpty();
|
||||
extend(extent, itemLayer.layer.getExtent());
|
||||
if (extent) {
|
||||
this.store.dispatch(new mapActions.SetExtent(extent));
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectBaseLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleSelectOverlayLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
|
||||
if (this.mapStateSub) this.mapStateSub.unsubscribe();
|
||||
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
|
||||
}
|
||||
Reference in New Issue
Block a user