feat(map): add a directive that change url to path depending on the n…

…etwork status (#384) * feat(network): new network service that return the network status * feat(map): * new feature that change the url to a path depending on the network status. * the query can now select features from layers. * feat(map): add a directive that change url to path depending on the network status * fix(datasource): remove useless attributes * Delete mapOffline.directive.spec.ts * Update datasource.ts * Update datasource.ts
infra-geo-ouverte · Aug 12, 2019 · ad5b5de · ad5b5de
1 parent 712074f
commit ad5b5de
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 4 deletions.
diff --git a/packages/geo/src/lib/datasource/shared/datasources/datasource.ts b/packages/geo/src/lib/datasource/shared/datasources/datasource.ts
@@ -9,6 +9,7 @@ import { DataService } from './data.service';
 import { generateIdFromSourceOptions } from '../../utils/id-generator';
 
 export abstract class DataSource {
+
   public id: string;
   public ol: olSource;
 

diff --git a/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts
@@ -12,6 +12,7 @@ export interface FeatureDataSourceOptions extends DataSourceOptions {
   features?: olFeature[];
   format?: olFormatFeature;
   url?: string;
+  pathOffline?: string;
 
   ol?: olSourceVector;
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts
@@ -8,6 +8,7 @@ export interface MVTDataSourceOptions extends DataSourceOptions {
   projection?: string;
   attributions?: olAttribution;
   format?: any;
-  url?: string;
   ol?: olSourceVectorTile;
+  url?: string;
+  pathOffline?: string;
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts
@@ -4,7 +4,8 @@ import { DataSourceOptions } from './datasource.interface';
 export interface XYZDataSourceOptions extends DataSourceOptions {
   // type?: 'xyz';
   projection?: string;
+  ol?: olSourceXYZ;
   url?: string;
   urls?: string[];
-  ol?: olSourceXYZ;
+  pathOffline?: string;
 }
diff --git a/packages/geo/src/lib/map/map.module.ts b/packages/geo/src/lib/map/map.module.ts
@@ -16,6 +16,7 @@ import { GeolocateButtonComponent } from './geolocate-button/geolocate-button.co
 import { RotationButtonComponent } from './rotation-button/rotation-button.component';
 import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-switcher.component';
 import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
+import { MapOfflineDirective } from './shared/mapOffline.directive';
 
 @NgModule({
   imports: [
@@ -32,15 +33,17 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
     GeolocateButtonComponent,
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
-    MiniBaseMapComponent
+    MiniBaseMapComponent,
+    MapOfflineDirective
   ],
   declarations: [
     MapBrowserComponent,
     ZoomButtonComponent,
     GeolocateButtonComponent,
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
-    MiniBaseMapComponent
+    MiniBaseMapComponent,
+    MapOfflineDirective
   ]
 })
 export class IgoMapModule {}
diff --git a/packages/geo/src/lib/map/shared/index.ts b/packages/geo/src/lib/map/shared/index.ts
@@ -3,6 +3,7 @@ export * from './map.enums';
 export * from './map.interface';
 export * from './map.service';
 export * from './map.utils';
+export * from './mapOffline.directive';
 export * from './projection.interfaces';
 export * from './projection.service';
 export * from './controllers';
diff --git a/packages/geo/src/lib/map/shared/mapOffline.directive.ts b/packages/geo/src/lib/map/shared/mapOffline.directive.ts
@@ -0,0 +1,72 @@
+import { Directive, AfterViewInit } from '@angular/core';
+import { IgoMap } from './map';
+import { MapBrowserComponent } from '../map-browser/map-browser.component';
+import { NetworkService, ConnectionState } from '@igo2/core';
+import { Subscription } from 'rxjs';
+import { Layer } from '../../layer/shared/layers/layer';
+import { MVTDataSourceOptions, XYZDataSourceOptions, FeatureDataSourceOptions } from '../../datasource';
+
+@Directive({
+    selector: '[igoMapOffline]'
+  })
+export class MapOfflineDirective implements AfterViewInit {
+
+  private context$$: Subscription;
+  private state: ConnectionState;
+  private component: MapBrowserComponent;
+
+  get map(): IgoMap {
+    return this.component.map;
+  }
+
+  constructor(
+    component: MapBrowserComponent,
+    private networkService: NetworkService
+    ) {
+      this.component = component;
+    }
+
+  ngAfterViewInit() {
+    this.networkService.currentState().subscribe((state: ConnectionState) => {
+      console.log(state);
+      this.state = state;
+      this.changeLayer();
+    });
+
+    this.map.layers$.subscribe((layers: Layer[]) => {
+      this.changeLayer();
+    });
+  }
+
+  private changeLayer() {
+    let sourceOptions;
+    const layerList = this.map.layers$.value;
+    layerList.forEach(layer => {
+      if (layer.options.sourceOptions.type === 'mvt') {
+        sourceOptions = (layer.options.sourceOptions as MVTDataSourceOptions);
+      } else if (layer.options.sourceOptions.type === 'xyz') {
+        sourceOptions = (layer.options.sourceOptions as XYZDataSourceOptions);
+      } else if (layer.options.sourceOptions.type === 'vector') {
+        sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions);
+      } else {
+        return;
+      }
+      if (sourceOptions.pathOffline  &&
+        this.state.connection === false) {
+          if (sourceOptions.excludeAttributeOffline) {
+            sourceOptions.excludeAttributeBackUp = sourceOptions.excludeAttribute;
+            sourceOptions.excludeAttribute = sourceOptions.excludeAttributeOffline;
+          }
+          layer.ol.getSource().clear();
+          layer.ol.getSource().setUrl(sourceOptions.pathOffline);
+      } else if (sourceOptions.pathOffline &&
+        this.state.connection === true) {
+          if (sourceOptions.excludeAttributeBackUp) {
+            sourceOptions.excludeAttribute = sourceOptions.excludeAttributeBackUp;
+          }
+          layer.ol.getSource().clear();
+          layer.ol.getSource().setUrl(sourceOptions.url);
+      }
+    });
+  }
+}