407 lines
16 KiB
TypeScript
407 lines
16 KiB
TypeScript
import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone } from '@angular/core';
|
|
import { Location } from '@angular/common';
|
|
import { Observable, Subject, Subscription, from,of } from 'rxjs';
|
|
import { withLatestFrom, switchMap,skip } from 'rxjs/operators';
|
|
import { Router, ActivatedRoute, ParamMap } 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} from '../../models/map.state';
|
|
import { ISelectedFeatures } from '../../models/selected.features';
|
|
import { IItemLayer } from '../../models/item.layer';
|
|
import { IQueryState } from '@farmmaps/common';
|
|
import { IPeriodState } from '../../models/period.state';
|
|
import {IStyles} from '../../models/style.cache';
|
|
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
|
import { StateSerializerService } from '@farmmaps/common';
|
|
import { GeolocationService} from '../../services/geolocation.service';
|
|
import {DeviceOrientationService} from '../../services/device-orientation.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 { tassign } from 'tassign';
|
|
import * as style from 'ol/style';
|
|
|
|
|
|
@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> = this.store.select(commonReducers.selectOpenedModalName);
|
|
public itemTypes$: Observable<{ [id: string]: IItemType }>;
|
|
public mapState$: Observable<IMapState> = this.store.select(mapReducers.selectGetMapState);
|
|
public features$: Observable<Array<Feature>> = this.store.select(mapReducers.selectGetFeatures);
|
|
public overlayLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetOverlayLayers);
|
|
public selectedOverlayLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
|
|
public selectedItemLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedItemLayer);
|
|
public baseLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetBaseLayers);
|
|
public selectedBaseLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedBaseLayer);
|
|
public projection$: Observable<string> = this.store.select(mapReducers.selectGetProjection);
|
|
public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
|
|
public droppedFile$: Subject<IDroppedFile> = new Subject<IDroppedFile>();
|
|
private paramSub: Subscription;
|
|
private itemTypeSub: Subscription;
|
|
private stateSub: Subscription;
|
|
private queryStateSub: Subscription;
|
|
private querySub: Subscription;
|
|
public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
|
|
public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
|
|
public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
|
|
public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
|
|
public clickedFeature: Subject<Feature> = new Subject<Feature>();
|
|
public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
|
|
public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
|
|
public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState);
|
|
public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
|
|
public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
|
|
public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
|
|
public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
|
|
public menuVisible$: Observable<boolean>;
|
|
public query$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQuery);
|
|
public position$: Observable<Position> = this.geolocationService.getCurrentPosition();
|
|
public compassHeading$: Observable<number> = this.deviceorientationService.getCurrentCompassHeading();
|
|
public baseLayersCollapsed:boolean = true;
|
|
public overlayLayersCollapsed: boolean = true;
|
|
public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent);
|
|
public styles$:Observable<IStyles> = this.store.select(mapReducers.selectGetStyles);
|
|
private setStateCount$:Observable<number> = this.store.select(mapReducers.selectgetSetStateCount);
|
|
private lastUrl = "";
|
|
|
|
@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,
|
|
private zone: NgZone,
|
|
private deviceorientationService:DeviceOrientationService) {
|
|
this.querySub = this.query$.pipe(skip(1), withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
|
|
if(queryState) {
|
|
let newQueryState = tassign(mapReducers.initialQueryState);
|
|
console.debug(`Do Query ${setStateCount}`);
|
|
let urlparts=[];
|
|
if (queryState.itemCode && queryState.itemCode != "") {
|
|
if(queryState.itemType && queryState.itemType!= "") {
|
|
let itemType = this.itemTypeService.itemTypes[queryState.itemType];
|
|
if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
|
|
urlparts.push('/editor');
|
|
urlparts.push(itemType.editor);
|
|
urlparts.push('item');
|
|
urlparts.push(queryState.itemCode);
|
|
}
|
|
}
|
|
} else {
|
|
newQueryState= queryState;
|
|
}
|
|
if(urlparts.length==0 ) {
|
|
newQueryState.itemCode = queryState.itemCode;
|
|
this.zone.run(() => {
|
|
this.store.dispatch(new mapActions.SetQueryState(newQueryState,false));
|
|
})
|
|
} else {
|
|
this.router.navigate(urlparts);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
@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 });
|
|
}
|
|
|
|
handleFeatureClick(feature: Feature) {
|
|
this.clickedFeature.next(feature);
|
|
}
|
|
|
|
handleFeatureHover(feature: Feature) {
|
|
this.store.dispatch(new mapActions.SelectFeature(feature));
|
|
}
|
|
|
|
handleSearch(queryState: IQueryState) {
|
|
this.store.dispatch(new mapActions.DoQuery(queryState));
|
|
}
|
|
|
|
ngOnInit() {
|
|
console.debug("Init");
|
|
this.store.dispatch(new mapActions.Clear());
|
|
this.selectedFeatures$.next({x:0,y:0,features:[]});
|
|
this.selectedFeatures$.next(null);
|
|
}
|
|
|
|
initCustomStyles() {
|
|
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer',new style.Style({
|
|
stroke: new style.Stroke({
|
|
color: 'red',
|
|
lineDash: [ 5,5],
|
|
width: 1
|
|
}),
|
|
geometry:(feature) =>feature.getGeometry()
|
|
})));
|
|
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer_selected',new style.Style({
|
|
stroke: new style.Stroke({
|
|
color: 'red',
|
|
lineDash: [ 5,5],
|
|
width: 3
|
|
}),
|
|
geometry:(feature) =>feature.getGeometry()
|
|
})));
|
|
}
|
|
|
|
round(value:number,decimals:number):number {
|
|
let d = Math.pow(10, decimals);
|
|
return Math.round((value + Number.EPSILON)*d)/d;
|
|
}
|
|
|
|
getMapStateFromUrl(params:ParamMap):IMapState {
|
|
var hasUrlmapState = params.has("xCenter") && params.has("yCenter");
|
|
if (hasUrlmapState) {
|
|
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")?params.get("baseLayer"):"";
|
|
var newMapState = {zoom: zoom, rotation: rotation, xCenter: xCenter, yCenter: yCenter, baseLayerCode: baseLayer };
|
|
return newMapState;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
normalizeMapState(mapState:IMapState):IMapState {
|
|
if(!mapState) return null;
|
|
return {zoom: this.round(mapState.zoom,0),
|
|
rotation: this.round(mapState.rotation,2),
|
|
xCenter: this.round(mapState.xCenter,5),
|
|
yCenter: this.round(mapState.yCenter,5),
|
|
baseLayerCode: mapState.baseLayerCode };
|
|
}
|
|
|
|
serializeMapState(mapState:IMapState):string {
|
|
return JSON.stringify(this.normalizeMapState(mapState));
|
|
}
|
|
|
|
getQueryStateFromUrl(params:ParamMap):IQueryState {
|
|
if (params.has("queryState")) {
|
|
let queryState = params.get("queryState");
|
|
var newQueryState = tassign(mapReducers.initialQueryState);
|
|
if (queryState != "") {
|
|
newQueryState = this.serializeService.deserialize(queryState);
|
|
}
|
|
return newQueryState;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
console.debug("View init");
|
|
this.initCustomStyles();
|
|
|
|
// url to state
|
|
|
|
this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.state$),switchMap(([params,state]) => {
|
|
var newMapState: IMapState = state.mapState;
|
|
var newQueryState: IQueryState = state.queryState;
|
|
|
|
var queryStateChanged = false;
|
|
var mapStateChanged = false;
|
|
let urlMapState = this.getMapStateFromUrl(params);
|
|
if(urlMapState) {
|
|
newMapState = urlMapState;
|
|
mapStateChanged = this.serializeMapState(state.mapState) != this.serializeMapState(newMapState);
|
|
}
|
|
|
|
let urlQueryState = this.getQueryStateFromUrl(params);
|
|
if(urlQueryState) {
|
|
newQueryState = urlQueryState;
|
|
queryStateChanged = this.serializeService.serialize(state.queryState) != this.serializeService.serialize(urlQueryState);
|
|
}
|
|
|
|
if(queryStateChanged && mapStateChanged && state.setStateCount ==0) {
|
|
return of(new mapActions.SetState(newMapState,newQueryState));
|
|
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.serializeMapState(newMapState));
|
|
} else if(queryStateChanged) {
|
|
return of(new mapActions.SetQueryState(newQueryState));
|
|
} return of(new mapActions.SetReplaceUrl(true));
|
|
})).subscribe((action) => {
|
|
if(action) {
|
|
this.zone.run(() => {
|
|
console.debug("Url to state");
|
|
this.store.dispatch(action);
|
|
});
|
|
}
|
|
});
|
|
|
|
// state to url
|
|
|
|
this.stateSub = this.state$.pipe(switchMap((state) => {
|
|
let newUrl = this.serializeMapState(state.mapState) + "_" + this.serializeService.serialize(state.queryState);
|
|
if(this.lastUrl!=newUrl && state.setStateCount>0) {
|
|
this.lastUrl=newUrl;
|
|
return of(state);
|
|
}
|
|
else {
|
|
return of(null);
|
|
}
|
|
})).subscribe((newUrlState) =>{
|
|
if(newUrlState) {
|
|
console.debug(`State to url ${newUrlState.setStateCount}`);
|
|
this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl);
|
|
}
|
|
});
|
|
|
|
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 commonActions.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));
|
|
}
|
|
|
|
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
|
|
let parts =["."];
|
|
parts.push(mapState.xCenter.toFixed(5));
|
|
parts.push(mapState.yCenter.toFixed(5));
|
|
parts.push( mapState.zoom.toFixed(0));
|
|
parts.push( mapState.rotation.toFixed(2));
|
|
if(mapState.baseLayerCode!="") {
|
|
parts.push(mapState.baseLayerCode);
|
|
parts.push( this.serializeService.serialize(queryState));
|
|
console.debug("Replace url",parts);
|
|
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
|
|
}
|
|
}
|
|
|
|
handleOnMoveEnd(event) {
|
|
console.debug("Move end");
|
|
this.zone.run(() =>{
|
|
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.setStateCount$)).subscribe(([[state, baselayer],setStateCount]) => {
|
|
if (mapState && baselayer) { // do not react on first move
|
|
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
|
|
this.store.dispatch(new mapActions.SetMapState(newMapState));
|
|
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
handleOnMouseDown(event: MouseEvent) {
|
|
event.stopPropagation();
|
|
this.zone.run(() =>{
|
|
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() {
|
|
if (this.paramSub) this.paramSub.unsubscribe();
|
|
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
|
|
if (this.stateSub) this.stateSub.unsubscribe();
|
|
if (this.queryStateSub) this.queryStateSub.unsubscribe();
|
|
if (this.querySub) this.querySub.unsubscribe();
|
|
}
|
|
}
|