Do not handle map event in 3D mode

This commit is contained in:
Willem Dantuma 2022-09-28 21:17:57 +02:00
parent cf84f8c93d
commit ac5bd7d635
6 changed files with 36 additions and 9 deletions

View File

@ -55,6 +55,7 @@ export const TOGGLELAYERVALUESENABLED = '[Map] ToggleLayerValuesEnabled'
export const GETLAYERVALUE = '[Map] GetLayerValue'
export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
export const SETVIEWSTATE = '[Map] SetViewState'
export class Clear implements Action {
@ -323,6 +324,11 @@ export class ToggleShowDataLayerSlide implements Action {
constructor() {}
}
export class SetViewState implements Action {
readonly type = SETVIEWSTATE;
constructor(public enabled:boolean) {}
}
export type Actions = SetMapState
| Init
| Clear
@ -367,5 +373,6 @@ export type Actions = SetMapState
| GetLayerValueSuccess
| GetLayerValue
| SetPeriod
| ToggleShowDataLayerSlide;
| ToggleShowDataLayerSlide
| SetViewState;

View File

@ -27,10 +27,12 @@
<div>
</div>
<aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
<aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
<fm-map-zoom-to-extent [extent]="state.extent" [animate]="true"></fm-map-zoom-to-extent>
</aol-view>
<aol-interaction-default></aol-interaction-default>
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
<fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>

View File

@ -94,6 +94,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
public dataLayerSlideValue:number = 50;
public dataLayerSlideEnabled = false;
private visibleAreaBottom = 0;
private viewEnabled: boolean = true;
@ViewChild('map') map;
@ViewChild('contentDiv') contentDiv: ElementRef;
@ -375,6 +376,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.dataLayerSlideEnabled=v;
this.map.instance.render();
});
this.store.select(mapReducers.selectGetViewEnabled).subscribe((v) => {
this.viewEnabled = v;
});
}
handleSearchCollapse(event) {
@ -428,7 +432,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
handleOnMoveEnd(event) {
if(this.initialized) {
if(this.initialized && this.viewEnabled) {
this.zone.run(() =>{
console.debug("Move end");
var map = event.map;

View File

@ -72,6 +72,7 @@ export interface State {
layerValuesEnabled:boolean,
layerValues: Array<ILayervalue>
showDataLayerSlide:boolean,
viewEnabled:boolean
}
export const initialState: State = {
@ -115,7 +116,8 @@ export const initialState: State = {
layerValuesY:0,
layerValuesEnabled:false,
layerValues:[],
showDataLayerSlide:false
showDataLayerSlide:false,
viewEnabled:true
}
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
@ -538,6 +540,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
v.push(a.layervalue);
return tassign(state,{layerValues:v});
}
case mapActions.SETVIEWSTATE:{
let a= action as mapActions.SetViewState;
return tassign(state,{viewEnabled:a.enabled});
}
case commonActions.ITEMDELETEDEVENT:{
let a= action as commonActions.ItemDeletedEvent;
if(state.selectedItem && state.selectedItem.code == a.itemCode) {
@ -599,6 +605,7 @@ export const getLayerValuesEnabled = (state:State) => state.layerValuesEnabled;
export const getLayerValues = (state:State) => state.layerValues;
export const getLayerValuesX = (state:State) => state.layerValuesX;
export const getLayerValuesY = (state:State) => state.layerValuesY;
export const getViewEnabled = (state:State) => state.viewEnabled;
export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
@ -632,5 +639,6 @@ export const selectGetLayerValuesEnabled = createSelector(selectMapState,getLaye
export const selectGetLayerValues = createSelector(selectMapState,getLayerValues);
export const selectGetLayerValuesX = createSelector(selectMapState,getLayerValuesX);
export const selectGetLayerValuesY = createSelector(selectMapState,getLayerValuesY);
export const selectGetViewEnabled = createSelector(selectMapState,getViewEnabled);

View File

@ -1,12 +1,14 @@
import { NgModule } from '@angular/core';
import { Switch2D3DComponent } from './components/olcs/switch2d3d/switch2d3d.component';
import { AppCommonModule} from '@farmmaps/common';
import { AppCommonMapModule} from '@farmmaps/common-map';
@NgModule({
declarations: [Switch2D3DComponent],
imports: [
AppCommonModule
AppCommonModule,
AppCommonMapModule
],
exports: [Switch2D3DComponent]
})

View File

@ -4,6 +4,8 @@ import { MapComponent } from 'ngx-openlayers';
import OLCesium from 'olcs/OLCesium';
import RasterSynchronizer from 'olcs/RasterSynchronizer';
import VectorSynchronizer from 'olcs/VectorSynchronizer';
import { mapReducers,mapActions } from '@farmmaps/common-map';
import { Store } from '@ngrx/store';
@Component({
selector: 'fm-map3d-switch2d3d',
@ -20,7 +22,7 @@ export class Switch2D3DComponent {
private interactions:Interaction[] = [];
constructor(private map: MapComponent) {
constructor(private map: MapComponent,private store: Store<mapReducers.State>) {
}
@ -62,12 +64,14 @@ export class Switch2D3DComponent {
handleClick(event) {
this.enable = !this.enable;
if(this.enable) {
this.store.dispatch(new mapActions.SetViewState(false));
this.disableInteractions();
this.synchronize();
this.ol3d.setEnabled(true);
} else {
this.ol3d.setEnabled(false);
this.enableInteractions();
this.store.dispatch(new mapActions.SetViewState(true));
}
this.label = this.enable?"2D":"3D";