FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add hideShowLayerValues flag for fm-map-map
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2025-08-11 09:40:00 +02:00
parent f50ff878e0
commit 2ffce50c47
1 changed files with 194 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@@ -1,39 +1,39 @@
import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone,ElementRef } from '@angular/core'; import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit, NgZone, ElementRef } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Observable, Subject, Subscription, from,of ,EMPTY } from 'rxjs'; import { Observable, Subject, Subscription, from, of, EMPTY } from 'rxjs';
import { withLatestFrom, switchMap,skip } from 'rxjs/operators'; import { withLatestFrom, switchMap, skip } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { DeviceService } from '@farmmaps/common'; import { DeviceService } from '@farmmaps/common';
import {getRenderPixel} from 'ol/render'; import { getRenderPixel } from 'ol/render';
// Map // Map
import * as mapReducers from '../../reducers/map.reducer'; import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions'; import * as mapActions from '../../actions/map.actions';
import { IMapState} from '../../models/map.state'; import { IMapState } from '../../models/map.state';
import { IClickedFeature} from '../../models/clicked.feature'; import { IClickedFeature } from '../../models/clicked.feature';
import { IQuery } from '../../reducers/map.reducer' import { IQuery } from '../../reducers/map.reducer'
import { ISelectedFeatures } from '../../models/selected.features'; import { ISelectedFeatures } from '../../models/selected.features';
import { IItemLayer } from '../../models/item.layer'; import { IItemLayer } from '../../models/item.layer';
import { IListItem, IQueryState } from '@farmmaps/common'; import { IListItem, IQueryState } from '@farmmaps/common';
import { IPeriodState } from '../../models/period.state'; import { IPeriodState } from '../../models/period.state';
import {IStyles} from '../../models/style.cache'; import { IStyles } from '../../models/style.cache';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component'; import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import { StateSerializerService } from '@farmmaps/common'; import { StateSerializerService } from '@farmmaps/common';
import { GeolocationService} from '../../services/geolocation.service'; import { GeolocationService } from '../../services/geolocation.service';
import { GeolocatorService } from '@farmmaps/common'; import { GeolocatorService } from '@farmmaps/common';
import {DeviceOrientationService} from '../../services/device-orientation.service'; import { DeviceOrientationService } from '../../services/device-orientation.service';
// AppCommon // AppCommon
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common'; import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
import { IItemType, IItem } from '@farmmaps/common'; import { IItemType, IItem } from '@farmmaps/common';
import {commonReducers} from '@farmmaps/common'; import { commonReducers } from '@farmmaps/common';
import {commonActions} from '@farmmaps/common'; import { commonActions } from '@farmmaps/common';
import {Feature} from 'ol'; import { Feature } from 'ol';
import {Geometry,Point,Circle} from 'ol/geom'; import { Geometry, Point, Circle } from 'ol/geom';
import {Extent,createEmpty,extend } from 'ol/extent'; import { Extent, createEmpty, extend } from 'ol/extent';
import {transform} from 'ol/proj'; import { transform } from 'ol/proj';
import { tassign } from 'tassign'; import { tassign } from 'tassign';
import * as style from 'ol/style'; import * as style from 'ol/style';
@@ -44,7 +44,7 @@ import * as style from 'ol/style';
styleUrls: ['./map.component.scss'] styleUrls: ['./map.component.scss']
}) })
export class MapComponent implements OnInit, OnDestroy,AfterViewInit { export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
title = 'Map'; title = 'Map';
public openedModalName$: Observable<string> = this.store.select(commonReducers.selectOpenedModalName); public openedModalName$: Observable<string> = this.store.select(commonReducers.selectOpenedModalName);
public itemTypes$: Observable<{ [id: string]: IItemType }>; public itemTypes$: Observable<{ [id: string]: IItemType }>;
@@ -54,44 +54,46 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public selectedOverlayLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedOverlayLayer); public selectedOverlayLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
public selectedItemLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedItemLayer); public selectedItemLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedItemLayer);
public baseLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetBaseLayers); public baseLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetBaseLayers);
public selectedBaseLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedBaseLayer); public selectedBaseLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedBaseLayer);
public projection$: Observable<string> = this.store.select(mapReducers.selectGetProjection); public projection$: Observable<string> = this.store.select(mapReducers.selectGetProjection);
public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>(); public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile$: Subject<IDroppedFile> = new Subject<IDroppedFile>(); public droppedFile$: Subject<IDroppedFile> = new Subject<IDroppedFile>();
private paramSub: Subscription; private paramSub: Subscription;
private itemTypeSub: Subscription; private itemTypeSub: Subscription;
private stateSub: Subscription; private stateSub: Subscription;
private queryStateSub: Subscription; private queryStateSub: Subscription;
private querySub: Subscription; private querySub: Subscription;
public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode); public parentCode$: Observable<string> = this.store.select(mapReducers.selectGetParentCode);
public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible); public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed); public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
public panelExtraWide$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelExtraWide); public panelExtraWide$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelExtraWide);
public selectedFeature$: Observable<Feature<Geometry>> = this.store.select(mapReducers.selectGetSelectedFeature); public selectedFeature$: Observable<Feature<Geometry>> = this.store.select(mapReducers.selectGetSelectedFeature);
public clickedFeature: Subject<Feature<Geometry>> = new Subject<Feature<Geometry>>(); public clickedFeature: Subject<Feature<Geometry>> = new Subject<Feature<Geometry>>();
public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem); public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
public parentItem$: Observable<IItem> =this.store.select(mapReducers.selectGetParentItem); public parentItem$: Observable<IItem> = this.store.select(mapReducers.selectGetParentItem);
public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState); public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
public state$:Observable<{mapState:IMapState,queryState:IQueryState}> = this.store.select(mapReducers.selectGetState); public state$: Observable<{ mapState: IMapState, queryState: IQueryState }> = this.store.select(mapReducers.selectGetState);
public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod); public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled); public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed); public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified); public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
public showDataLayerSlide$: Observable<boolean> = this.store.select(mapReducers.selectGetShowdataLayerSlide); public showDataLayerSlide$: Observable<boolean> = this.store.select(mapReducers.selectGetShowdataLayerSlide);
public menuVisible$: Observable<boolean>; public menuVisible$: Observable<boolean>;
public query$: Observable<IQuery> = this.store.select(mapReducers.selectGetQuery); public query$: Observable<IQuery> = this.store.select(mapReducers.selectGetQuery);
public position$: Observable<GeolocationPosition> = this.geolocationService.getCurrentPosition(); public position$: Observable<GeolocationPosition> = this.geolocationService.getCurrentPosition();
public compassHeading$: Observable<number> = this.deviceorientationService.getCurrentCompassHeading(); public compassHeading$: Observable<number> = this.deviceorientationService.getCurrentCompassHeading();
public baseLayersCollapsed = true; public baseLayersCollapsed = true;
public overlayLayersCollapsed = true; public overlayLayersCollapsed = true;
public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent); public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent);
public styles$:Observable<IStyles> = this.store.select(mapReducers.selectGetStyles); public styles$: Observable<IStyles> = this.store.select(mapReducers.selectGetStyles);
public fullscreen$: Observable<boolean> = this.store.select(commonReducers.selectGetFullScreen); public fullscreen$: Observable<boolean> = this.store.select(commonReducers.selectGetFullScreen);
private lastUrl = ""; private lastUrl = "";
private initialized = false; private initialized = false;
public noContent = false; public noContent = false;
public overrideSelectedItemLayer = false; public overrideSelectedItemLayer = false;
public overrideOverlayLayers = false; public overrideOverlayLayers = false;
public hideShowLayerValues = false;
public const
public dataLayerSlideValue = 50; public dataLayerSlideValue = 50;
public dataLayerSlideEnabled = false; public dataLayerSlideEnabled = false;
private visibleAreaBottom = 0; private visibleAreaBottom = 0;
@@ -110,47 +112,48 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private geolocationService: GeolocationService, private geolocationService: GeolocationService,
private geolocaterService: GeolocatorService, private geolocaterService: GeolocatorService,
private zone: NgZone, private zone: NgZone,
private deviceorientationService:DeviceOrientationService, private deviceorientationService: DeviceOrientationService,
public devicesService:DeviceService) { public devicesService: DeviceService) {
if(route && route.snapshot && route.snapshot.data && route.snapshot.data["fm-map-map"]) { if (route && route.snapshot && route.snapshot.data && route.snapshot.data["fm-map-map"]) {
const params = route.snapshot.data["fm-map-map"]; const params = route.snapshot.data["fm-map-map"];
this.overrideSelectedItemLayer = params["overrideSelectedItemlayer"] ? params["overrideSelectedItemlayer"] : false; this.overrideSelectedItemLayer = params["overrideSelectedItemlayer"] ? params["overrideSelectedItemlayer"] : false;
this.overrideOverlayLayers = params["overrideOverlayLayers"] ? params["overrideOverlayLayers"] : false; this.overrideOverlayLayers = params["overrideOverlayLayers"] ? params["overrideOverlayLayers"] : false;
} this.hideShowLayerValues = params["hideShowLayerValues"] ? params["hideShowLayerValues"] : false;
this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$)).subscribe(([query,mapState]) =>{ }
if(query && query.querystate) { this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$)).subscribe(([query, mapState]) => {
let newQueryState = tassign(mapReducers.initialQueryState); if (query && query.querystate) {
//console.debug(`Do Query`); let newQueryState = tassign(mapReducers.initialQueryState);
const urlparts=[]; //console.debug(`Do Query`);
if (query.querystate.itemCode && query.querystate.itemCode != "") { const urlparts = [];
if(query.querystate.itemType && query.querystate.itemType!= "") { if (query.querystate.itemCode && query.querystate.itemCode != "") {
const itemType = this.itemTypeService.itemTypes[query.querystate.itemType]; if (query.querystate.itemType && query.querystate.itemType != "") {
if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { const itemType = this.itemTypeService.itemTypes[query.querystate.itemType];
urlparts.push('/editor'); if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
urlparts.push(itemType.editor); urlparts.push('/editor');
urlparts.push('item'); urlparts.push(itemType.editor);
urlparts.push(query.querystate.itemCode); urlparts.push('item');
} urlparts.push(query.querystate.itemCode);
} }
} else {
newQueryState= query.querystate;
}
if(urlparts.length==0 ) {
newQueryState.itemCode = query.querystate.itemCode;
this.zone.run(() => {
this.replaceUrl(mapState,newQueryState,query.replace);
})
} else {
this.router.navigate(urlparts);
} }
} else {
newQueryState = query.querystate;
} }
}); if (urlparts.length == 0) {
this.store.dispatch(new mapActions.Init()); newQueryState.itemCode = query.querystate.itemCode;
// this.store.select(commonReducers.getRootItems).subscribe((l) => { this.zone.run(() => {
// if(l && l.length>0) { this.replaceUrl(mapState, newQueryState, query.replace);
// this.store.dispatch(new mapActions.Init()); })
// } } else {
// }); this.router.navigate(urlparts);
}
}
});
this.store.dispatch(new mapActions.Init());
// this.store.select(commonReducers.getRootItems).subscribe((l) => {
// if(l && l.length>0) {
// this.store.dispatch(new mapActions.Init());
// }
// });
} }
@HostListener('document:keyup', ['$event']) @HostListener('document:keyup', ['$event'])
@@ -161,19 +164,19 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
} }
handlePanelResize(resizeTop:number) { handlePanelResize(resizeTop: number) {
if(resizeTop==100 || !this.devicesService.IsMobile() ) { if (resizeTop == 100 || !this.devicesService.IsMobile()) {
this.visibleAreaBottom=0; this.visibleAreaBottom = 0;
} else { } else {
this.visibleAreaBottom=100-resizeTop; this.visibleAreaBottom = 100 - resizeTop;
if(this.visibleAreaBottom>60) { if (this.visibleAreaBottom > 60) {
this.visibleAreaBottom=60; this.visibleAreaBottom = 60;
} }
} }
} }
bottom(panelVisible:boolean) { bottom(panelVisible: boolean) {
if(panelVisible) { if (panelVisible) {
return this.visibleAreaBottom + '%'; return this.visibleAreaBottom + '%';
} else { } else {
return "0%"; return "0%";
@@ -181,7 +184,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
handleOpenModal(modalName: string) { handleOpenModal(modalName: string) {
this.store.dispatch(new commonActions.OpenModal(modalName)); this.store.dispatch(new commonActions.OpenModal(modalName));
} }
handleCloseModal() { handleCloseModal() {
@@ -189,7 +192,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
handleFileDropped(droppedFile: IDroppedFile) { handleFileDropped(droppedFile: IDroppedFile) {
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry }); this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode: droppedFile.parentCode, geometry: droppedFile.geometry });
} }
handleFeatureClick(feature: Feature<Geometry>) { handleFeatureClick(feature: Feature<Geometry>) {
@@ -205,26 +208,26 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new mapActions.DoQuery(queryState)); this.store.dispatch(new mapActions.DoQuery(queryState));
} }
handleSidepaneloutletActivate(component:any) { handleSidepaneloutletActivate(component: any) {
if(component && component.hasOwnProperty('clickedFeature')) { if (component && component.hasOwnProperty('clickedFeature')) {
(component as IClickedFeature).clickedFeature = this.clickedFeature; (component as IClickedFeature).clickedFeature = this.clickedFeature;
} }
if(component && component.hasOwnProperty('extrawide')) { if (component && component.hasOwnProperty('extrawide')) {
this.store.dispatch(new mapActions.SetPanelExtraWide(true)); this.store.dispatch(new mapActions.SetPanelExtraWide(true));
}
} }
}
handleSidepaneloutletDeactivate(component:any) { handleSidepaneloutletDeactivate(component: any) {
if(component && component.hasOwnProperty('clickedFeature')) { if (component && component.hasOwnProperty('clickedFeature')) {
(component as IClickedFeature).clickedFeature = null; (component as IClickedFeature).clickedFeature = null;
} }
if(component && component.hasOwnProperty('extrawide')) { if (component && component.hasOwnProperty('extrawide')) {
this.store.dispatch(new mapActions.SetPanelExtraWide(false)); this.store.dispatch(new mapActions.SetPanelExtraWide(false));
} }
} }
handlePrerender(event:any) { handlePrerender(event: any) {
if(!this.dataLayerSlideEnabled) return; if (!this.dataLayerSlideEnabled) return;
const ctx = event.context; const ctx = event.context;
const mapSize = this.map.instance.getSize(); const mapSize = this.map.instance.getSize();
const width = mapSize[0] * (this.dataLayerSlideValue / 100); const width = mapSize[0] * (this.dataLayerSlideValue / 100);
@@ -243,72 +246,74 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
ctx.clip(); ctx.clip();
} }
handleSlideChange(event:any) { handleSlideChange(event: any) {
this.dataLayerSlideValue = event.target.value; this.dataLayerSlideValue = event.target.value;
this.map.instance.render(); this.map.instance.render();
} }
ngOnInit() { ngOnInit() {
this.initialized = false; this.initialized = false;
//console.debug("Init"); //console.debug("Init");
this.store.dispatch(new mapActions.Clear()); this.store.dispatch(new mapActions.Clear());
this.selectedFeatures$.next({x:0,y:0,features:[]}); this.selectedFeatures$.next({ x: 0, y: 0, features: [] });
this.selectedFeatures$.next(null); this.selectedFeatures$.next(null);
} }
initCustomStyles() { initCustomStyles() {
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer',new style.Style({ this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer', new style.Style({
stroke: new style.Stroke({ stroke: new style.Stroke({
color: 'red', color: 'red',
lineDash: [ 5,5], lineDash: [5, 5],
width: 1 width: 1
}), }),
geometry:(feature) =>feature.getGeometry() geometry: (feature) => feature.getGeometry()
}))); })));
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer_selected',new style.Style({ this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer_selected', new style.Style({
stroke: new style.Stroke({ stroke: new style.Stroke({
color: 'red', color: 'red',
lineDash: [ 5,5], lineDash: [5, 5],
width: 3 width: 3
}), }),
geometry:(feature) =>feature.getGeometry() geometry: (feature) => feature.getGeometry()
}))); })));
} }
round(value:number,decimals:number):number { round(value: number, decimals: number): number {
const d = Math.pow(10, decimals); const d = Math.pow(10, decimals);
return Math.round((value + Number.EPSILON)*d)/d; return Math.round((value + Number.EPSILON) * d) / d;
} }
getMapStateFromUrl(params:ParamMap):IMapState { getMapStateFromUrl(params: ParamMap): IMapState {
const hasUrlmapState = params.has("xCenter") && params.has("yCenter"); const hasUrlmapState = params.has("xCenter") && params.has("yCenter");
if (hasUrlmapState) { if (hasUrlmapState) {
const xCenter = parseFloat(params.get("xCenter")); const xCenter = parseFloat(params.get("xCenter"));
const yCenter = parseFloat(params.get("yCenter")); const yCenter = parseFloat(params.get("yCenter"));
const zoom = parseFloat(params.get("zoom")); const zoom = parseFloat(params.get("zoom"));
const rotation = parseFloat(params.get("rotation")); const rotation = parseFloat(params.get("rotation"));
const baseLayer = params.get("baseLayer")?params.get("baseLayer"):""; const baseLayer = params.get("baseLayer") ? params.get("baseLayer") : "";
const newMapState = {zoom: zoom, rotation: rotation, xCenter: xCenter, yCenter: yCenter, baseLayerCode: baseLayer }; const newMapState = { zoom: zoom, rotation: rotation, xCenter: xCenter, yCenter: yCenter, baseLayerCode: baseLayer };
return newMapState; return newMapState;
} else { } else {
return null; return null;
} }
} }
normalizeMapState(mapState:IMapState):IMapState { normalizeMapState(mapState: IMapState): IMapState {
if(!mapState) return null; if (!mapState) return null;
return {zoom: this.round(mapState.zoom,0), return {
rotation: this.round(mapState.rotation,2), zoom: this.round(mapState.zoom, 0),
xCenter: this.round(mapState.xCenter,5), rotation: this.round(mapState.rotation, 2),
yCenter: this.round(mapState.yCenter,5), xCenter: this.round(mapState.xCenter, 5),
baseLayerCode: mapState.baseLayerCode }; yCenter: this.round(mapState.yCenter, 5),
baseLayerCode: mapState.baseLayerCode
};
} }
serializeMapState(mapState:IMapState):string { serializeMapState(mapState: IMapState): string {
return JSON.stringify(this.normalizeMapState(mapState)); return JSON.stringify(this.normalizeMapState(mapState));
} }
getQueryStateFromUrl(params:ParamMap):IQueryState { getQueryStateFromUrl(params: ParamMap): IQueryState {
if (params.has("queryState")) { if (params.has("queryState")) {
const queryState = params.get("queryState"); const queryState = params.get("queryState");
let newQueryState = tassign(mapReducers.initialQueryState); let newQueryState = tassign(mapReducers.initialQueryState);
@@ -323,10 +328,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
ngAfterViewInit() { ngAfterViewInit() {
//console.debug("View init"); //console.debug("View init");
this.noContent=true; this.noContent = true;
this.route.children.forEach((entry) => { this.route.children.forEach((entry) => {
if(entry.outlet=="primary") { if (entry.outlet == "primary") {
this.noContent=false; this.noContent = false;
} }
}); });
@@ -334,54 +339,54 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
// url to state // url to state
const urlMapState = this.getMapStateFromUrl(this.route.snapshot.paramMap); const urlMapState = this.getMapStateFromUrl(this.route.snapshot.paramMap);
const urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap); const urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap);
if(urlQueryState && urlMapState && this.noContent) { if (urlQueryState && urlMapState && this.noContent) {
this.store.dispatch(new mapActions.SetState(urlMapState,urlQueryState)); this.store.dispatch(new mapActions.SetState(urlMapState, urlQueryState));
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(urlMapState)); window.localStorage.setItem("FarmMapsCommonMap_mapState", this.serializeMapState(urlMapState));
} else if(urlQueryState && this.noContent) { } else if (urlQueryState && this.noContent) {
this.store.dispatch(new mapActions.SetQueryState(urlQueryState)); this.store.dispatch(new mapActions.SetQueryState(urlQueryState));
} else { } else {
this.store.dispatch(new mapActions.SetReplaceUrl(true)); this.store.dispatch(new mapActions.SetReplaceUrl(true));
} }
this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => { this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$), switchMap(([params, state]) => {
if(this.initialized && this.noContent) { if (this.initialized && this.noContent) {
const urlQueryState = this.getQueryStateFromUrl(params); const urlQueryState = this.getQueryStateFromUrl(params);
if( this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState)) { if (this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState)) {
return of(new mapActions.SetState(state.mapState,urlQueryState)); return of(new mapActions.SetState(state.mapState, urlQueryState));
}
}
return EMPTY;
})).subscribe((action) => {
if(action) {
this.zone.run(() => {
//console.debug("Url to state");
this.store.dispatch(action);
});
} }
}); }
return EMPTY;
})).subscribe((action) => {
if (action) {
this.zone.run(() => {
//console.debug("Url to state");
this.store.dispatch(action);
});
}
});
// state to url // state to url
this.stateSub = this.state$.pipe(switchMap((state) => { this.stateSub = this.state$.pipe(switchMap((state) => {
const newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState); const newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState);
if(this.lastUrl!=newUrl) { if (this.lastUrl != newUrl) {
this.lastUrl=newUrl; this.lastUrl = newUrl;
return of(state); return of(state);
} }
else { else {
return of(null); return of(null);
} }
})).subscribe((newUrlState: any) => { })).subscribe((newUrlState: any) => {
if(newUrlState) { if (newUrlState) {
//console.debug(`State to url`); //console.debug(`State to url`);
this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl); this.replaceUrl(newUrlState.mapState, newUrlState.queryState, newUrlState.replaceUrl);
} }
}); });
this.initialized = true; this.initialized = true;
this.showDataLayerSlide$.subscribe((v) => { this.showDataLayerSlide$.subscribe((v) => {
this.dataLayerSlideEnabled=v; this.dataLayerSlideEnabled = v;
this.map.instance.render(); this.map.instance.render();
}); });
this.store.select(mapReducers.selectGetViewEnabled).subscribe((v) => { this.store.select(mapReducers.selectGetViewEnabled).subscribe((v) => {
@@ -401,7 +406,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new commonActions.ToggleMenu()); this.store.dispatch(new commonActions.ToggleMenu());
} }
handleToggleBaseLayers(event:MouseEvent) { handleToggleBaseLayers(event: MouseEvent) {
this.baseLayersCollapsed = !this.baseLayersCollapsed; this.baseLayersCollapsed = !this.baseLayersCollapsed;
event.preventDefault(); event.preventDefault();
} }
@@ -418,30 +423,30 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
replaceUrl(mapState: IMapState, queryState: IQueryState, replace = true) { replaceUrl(mapState: IMapState, queryState: IQueryState, replace = true) {
if(this.noContent) { if (this.noContent) {
const newMapState = this.serializeMapState(mapState); const newMapState = this.serializeMapState(mapState);
const newQueryState = this.serializeService.serialize(queryState); const newQueryState = this.serializeService.serialize(queryState);
const currentMapState = this.serializeMapState(this.getMapStateFromUrl(this.route.snapshot.paramMap)); const currentMapState = this.serializeMapState(this.getMapStateFromUrl(this.route.snapshot.paramMap));
const urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap); const urlQueryState = this.getQueryStateFromUrl(this.route.snapshot.paramMap);
const currentQueryState = urlQueryState==null?"":this.serializeService.serialize(urlQueryState); const currentQueryState = urlQueryState == null ? "" : this.serializeService.serialize(urlQueryState);
if(mapState.baseLayerCode!="" && ((newMapState!= currentMapState) || (newQueryState!=currentQueryState))) { if (mapState.baseLayerCode != "" && ((newMapState != currentMapState) || (newQueryState != currentQueryState))) {
const parts =["."]; const parts = ["."];
parts.push(mapState.xCenter.toFixed(5)); parts.push(mapState.xCenter.toFixed(5));
parts.push(mapState.yCenter.toFixed(5)); parts.push(mapState.yCenter.toFixed(5));
parts.push( mapState.zoom.toFixed(0)); parts.push(mapState.zoom.toFixed(0));
parts.push( mapState.rotation.toFixed(2)); parts.push(mapState.rotation.toFixed(2));
parts.push(mapState.baseLayerCode); parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState)); parts.push(this.serializeService.serialize(queryState));
//console.debug("Replace url",parts); //console.debug("Replace url",parts);
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent }); this.router.navigate(parts, { replaceUrl: replace, relativeTo: this.route.parent });
}
} }
}
} }
handleOnMoveEnd(event) { handleOnMoveEnd(event) {
if(this.initialized && this.viewEnabled) { if (this.initialized && this.viewEnabled) {
this.zone.run(() =>{ this.zone.run(() => {
//console.debug("Move end"); //console.debug("Move end");
const map = event.map; const map = event.map;
const view = map.getView(); const view = map.getView();
@@ -466,16 +471,18 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
handleOnMouseDown(event: MouseEvent) { handleOnMouseDown(event: MouseEvent) {
event.stopPropagation(); event.stopPropagation();
this.zone.run(() =>{ this.zone.run(() => {
this.store.dispatch(new commonActions.CloseAll()); this.store.dispatch(new commonActions.CloseAll());
}); });
} }
handleShowLayerValues(event: MouseEvent) { handleShowLayerValues(event: MouseEvent) {
event.stopPropagation(); if (this.hideShowLayerValues) {
this.zone.run(() =>{ event.stopPropagation();
this.store.dispatch(new mapActions.ToggleLayerValuesEnabled()); this.zone.run(() => {
}); this.store.dispatch(new mapActions.ToggleLayerValuesEnabled());
});
}
} }
handleOnDownload(event) { handleOnDownload(event) {
@@ -491,15 +498,15 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
} }
handleOnToggleVisibility(itemLayer: IItemLayer) { handleOnToggleVisibility(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible)); this.store.dispatch(new mapActions.SetVisibility(itemLayer, !itemLayer.visible));
} }
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) { handleOnSetOpacity(event: { layer: IItemLayer, opacity: number }) {
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity)); this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
} }
handleZoomToExtent(itemLayer: IItemLayer) { handleZoomToExtent(itemLayer: IItemLayer) {
const extent = createEmpty(); const extent = createEmpty();
extend(extent, itemLayer.layer.getExtent()); extend(extent, itemLayer.layer.getExtent());
if (extent) { if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent)); this.store.dispatch(new mapActions.SetExtent(extent));
@@ -514,21 +521,21 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer)); this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
} }
handlePeriodChange(period:IPeriodState) { handlePeriodChange(period: IPeriodState) {
this.store.dispatch(new mapActions.SetPeriod(period)); this.store.dispatch(new mapActions.SetPeriod(period));
} }
handleCitySearch(location:string) { handleCitySearch(location: string) {
this.geolocaterService.geocode(location).subscribe(locations => { this.geolocaterService.geocode(location).subscribe(locations => {
if( locations.length > 0) { if (locations.length > 0) {
const point = new Point([locations[0].coordinates.lon,locations[0].coordinates.lat]); const point = new Point([locations[0].coordinates.lon, locations[0].coordinates.lat]);
point.transform('EPSG:4326', 'EPSG:3857'); point.transform('EPSG:4326', 'EPSG:3857');
const circle = new Circle(point.getCoordinates(),5000);// const circle = new Circle(point.getCoordinates(), 5000);//
const extent = createEmpty(); const extent = createEmpty();
extend(extent, circle.getExtent()); extend(extent, circle.getExtent());
this.store.dispatch(new mapActions.SetExtent(extent)) this.store.dispatch(new mapActions.SetExtent(extent))
} }
}); });
} }
ngOnDestroy() { ngOnDestroy() {