Do not handle map event in 3D mode

custom-webpack.config.js

@@ -4,9 +4,12 @@ module.exports = {
       // Resolve node module use of fs
       fs: "empty",
       Buffer: false,
-      http: "empty",
-      https: "empty",
-      zlib: "empty"
+      http: require.resolve("stream-http"),
+      https: require.resolve("https-browserify"),
+      url: require.resolve("url/"),
+      zlib: require.resolve('browserify-zlib'),
+      assert: require.resolve("assert/"),
+      util: require.resolve("util/")
     }
   }
 };

package.json

@@ -29,9 +29,12 @@
     "@ngrx/store": "^14",
     "@popperjs/core": "^2.11.6",
     "angular-oauth2-oidc": "^13",
+    "assert": "^2.0.0",
     "bootstrap": "^4.6.0",
-    "cesium": "^1.82.1",
+    "browserify-zlib": "^0.2.0",
+    "cesium": "^1.97.0",
     "core-js": "^2.6.12",
+    "https-browserify": "^1.0.0",
     "moment": "^2.29.4",
     "ngrx-store-localstorage": "^14",
     "ngx-avatar": "^4.1.0",
@@ -40,11 +43,15 @@
     "ngx-openlayers": "1.0.0-next.19",
     "ngx-uploadx": "^5.2.0",
     "ol": "6.14.1",
-    "ol-cesium": "^2.13.1",
+    "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
     "rxjs": "^6.6.7",
+    "stream": "^0.0.2",
+    "stream-http": "^3.2.0",
     "tassign": "^1.0.0",
     "tslib": "^2.4.0",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -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;
 

projects/common-map/src/fm-map/components/map/map.component.html

@@ -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>

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

@@ -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;

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -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);
 
 

projects/common-map3d/src/fm-map3d/common-map3d.module.ts

@@ -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]
 })

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit,Input,Host  } from '@angular/core';
+import { Interaction} from 'ol/interaction';
 import { MapComponent } from 'ngx-openlayers';
-import OLCesium from 'ol-cesium';
-
-declare var olcs: any;
+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',
@@ -16,9 +19,10 @@ export class Switch2D3DComponent {
   private ol3d: OLCesium;
   private synchronizers:any[];
   public loading:boolean = true;
+  private interactions:Interaction[] = [];
 
 
-  constructor(private map: MapComponent) {
+  constructor(private map: MapComponent,private store: Store<mapReducers.State>) {
     
   }
 
@@ -26,8 +30,8 @@ export class Switch2D3DComponent {
    
     this.ol3d = new OLCesium({ map: this.map.instance, createSynchronizers: (map,scene) => {
         this.synchronizers = [
-            new olcs.RasterSynchronizer(map,scene),
-            new olcs.VectorSynchronizer(map,scene)
+            new RasterSynchronizer(map,scene),
+            new VectorSynchronizer(map,scene)
         ];
         this.loading=false;
         return this.synchronizers;
@@ -41,12 +45,35 @@ export class Switch2D3DComponent {
       });
   }
 
+  disableInteractions() {
+      this.interactions=[];
+      this.map.instance.getInteractions().forEach((i) => {
+        if(i.getActive()) {
+          this.interactions.push(i);
+          i.setActive(false);
+        }
+      });
+  }
+
+  enableInteractions() {
+    this.interactions.forEach((i) => {
+      i.setActive(true);
+    });
+  }
+
   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.ol3d.setEnabled(this.enable);
+    
     this.label = this.enable?"2D":"3D";    
   }
 }