feat(map): handle context layer in a way that doesn't interfere with … (

#275) * feat(map): handle context layer in a way that doesn't interfere with the layers added programatically * feat(layers): add optiosn to not show a layer in the layer list and to make it unremovable or unbrowsable * fix(context): fix context layers issue * fix(export): fix self referencing features issue
infra-geo-ouverte · Mar 15, 2019 · feeeb2a · feeeb2a
1 parent e7e131f
commit feeeb2a
Show file tree

Hide file tree

Showing 22 changed files with 306 additions and 233 deletions.
diff --git a/packages/context/src/lib/context-manager/shared/layer-context.directive.ts b/packages/context/src/lib/context-manager/shared/layer-context.directive.ts
@@ -7,6 +7,7 @@ import { RouteService } from '@igo2/core';
 import {
   IgoMap,
   MapBrowserComponent,
+  Layer,
   LayerService,
   LayerOptions
 } from '@igo2/geo';
@@ -18,9 +19,12 @@ import { DetailedContext } from './context.interface';
   selector: '[igoLayerContext]'
 })
 export class LayerContextDirective implements OnInit, OnDestroy {
+
   private context$$: Subscription;
   private queryParams: any;
 
+  private contextLayers: Layer[] = [];
+
   get map(): IgoMap {
     return this.component.map;
   }
@@ -57,14 +61,13 @@ export class LayerContextDirective implements OnInit, OnDestroy {
   }
 
   private handleContextChange(context: DetailedContext) {
-    if (context.layers === undefined) {
-      return;
-    }
+    if (context.layers === undefined) { return; }
 
-    this.map.removeLayers();
+    this.map.removeLayers(this.contextLayers);
+    this.contextLayers = [];
 
-    context.layers.forEach(contextLayer => {
-      this.addLayerToMap(contextLayer);
+    context.layers.forEach((layerOptions: LayerOptions) => {
+      this.addLayerToMap(layerOptions);
     });
   }
 
@@ -87,7 +90,7 @@ export class LayerContextDirective implements OnInit, OnDestroy {
           layer.id,
           layer
         );
-
+        this.contextLayers.push(layer);
         this.map.addLayer(layer);
       });
   }

diff --git a/packages/geo/src/lib/feature/shared/strategies/selection.ts b/packages/geo/src/lib/feature/shared/strategies/selection.ts
@@ -261,7 +261,8 @@ export class FeatureStoreSelectionStrategy extends FeatureStoreStrategy {
     const overlayLayer = new VectorLayer({
       zIndex: 200,
       source: new FeatureDataSource(),
-      style: this.options ? this.options.style : undefined
+      style: this.options ? this.options.style : undefined,
+      showInLayerList: false
     });
 
     return new FeatureStore([], {map: this.map}).bindLayer(overlayLayer);
@@ -272,17 +273,14 @@ export class FeatureStoreSelectionStrategy extends FeatureStoreStrategy {
    * features.
    */
   private addOverlayLayer() {
-    // TODO: why do we need to cast as any?
-    this.map.addLayer(this.overlayStore.layer as any, false);
+    this.map.ol.addLayer(this.overlayStore.layer.ol);
   }
 
   /**
    * Remove the overlay layer from the map
    */
   private removeOverlayLayer() {
     this.overlayStore.source.ol.clear();
-    // Remove directly from the olMap because, for some reason,
-    // removing from the IgoMap doesn't remove the layer
     this.map.ol.removeLayer(this.overlayStore.layer.ol);
   }
 }
diff --git a/packages/geo/src/lib/import-export/shared/import-export.service.ts b/packages/geo/src/lib/import-export/shared/import-export.service.ts
@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import * as olformat from 'ol/format';
 import * as olstyle from 'ol/style';
+import OlFeature from 'ol/Feature';
 
 import { ConfigService, MessageService, LanguageService } from '@igo2/core';
 import { MapService } from '../../map/shared/map.service';
@@ -73,15 +74,24 @@ export class ImportExportService {
   public export(data: ExportOptions) {
     const map = this.mapService.getMap();
     const layer = map.getLayerById(data.layer);
-    const source: any = layer.ol.getSource();
+    const olSource = layer.ol.getSource();
 
-    const formatStr: any = data.format;
+    const formatStr = data.format;
     const format =
       data.format === 'shapefile'
         ? new olformat.GeoJSON()
         : new olformat[formatStr]();
 
-    const featuresText = format.writeFeatures(source.getFeatures(), {
+    const olFeatures = olSource.getFeatures().map((olFeature: OlFeature) => {
+      const keys = olFeature.getKeys().filter((key: string) => !key.startsWith('_'));
+      const properties = keys.reduce((acc: object, key: string) => {
+        acc[key] = olFeature.get(key);
+        return acc;
+      }, {geometry: olFeature.getGeometry()});
+      return new OlFeature(properties);
+    });
+
+    const featuresText = format.writeFeatures(olFeatures, {
       dataProjection: 'EPSG:4326',
       featureProjection: map.projection,
       featureType: 'feature',

diff --git a/packages/geo/src/lib/layer/layer-item/layer-item.component.html b/packages/geo/src/lib/layer/layer-item/layer-item.component.html
@@ -57,9 +57,9 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
   </div>
 
   <div class="igo-col igo-col-100 igo-col-100-m">
-      <div class="igo-layer-button-group">
+    <div class="igo-layer-button-group">
       <button
-        *ngIf="isVectorLayer(layer)"
+        *ngIf="isVectorLayer(layer) && browsable === true"
         mat-icon-button
         tooltip-position="below"
         matTooltipShowDelay="500"
@@ -92,6 +92,7 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
       </button>
 
       <button
+        *ngIf="removable === true"
         mat-icon-button
         tooltip-position="below"
         matTooltipShowDelay="500"

diff --git a/packages/geo/src/lib/layer/layer-item/layer-item.component.ts b/packages/geo/src/lib/layer/layer-item/layer-item.component.ts
@@ -11,7 +11,7 @@ import olFormatGeoJSON from 'ol/format/GeoJSON';
 
 import { MapService } from '../../map/shared/map.service';
 // import { FeatureService } from '../../feature/shared/feature.service';
-import { Layer, VectorLayer } from '../shared/layers';
+import { Layer, VectorLayer, VectorLayerOptions } from '../shared/layers';
 
 @Component({
   selector: 'igo-layer-item',
@@ -20,10 +20,12 @@ import { Layer, VectorLayer } from '../shared/layers';
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class LayerItemComponent implements OnDestroy {
+
+  legendCollapsed = true;
+
+  private resolution$$: Subscription;
+
   @Input()
-  get layer(): Layer {
-    return this._layer;
-  }
   set layer(value: Layer) {
     this._layer = value;
     this.subscribeResolutionObserver();
@@ -32,60 +34,31 @@ export class LayerItemComponent implements OnDestroy {
       this.legendCollapsed = legend.collapsed;
     }
   }
+  get layer(): Layer { return this._layer; }
   private _layer: Layer;
 
-  @Input()
-  get edition() {
-    return this._edition;
-  }
-  set edition(value: boolean) {
-    this._edition = value;
-  }
-  private _edition = false;
+  @Input() edition: boolean = false;
 
-  @Input()
-  get color() {
-    return this._color;
-  }
-  set color(value: string) {
-    this._color = value;
-  }
-  private _color = 'primary';
+  @Input() color: string = 'primary';
 
-  @Input()
-  get toggleLegendOnVisibilityChange() {
-    return this._toggleLegendOnVisibilityChange;
-  }
-  set toggleLegendOnVisibilityChange(value: boolean) {
-    this._toggleLegendOnVisibilityChange = value;
-  }
-  private _toggleLegendOnVisibilityChange = false;
+  @Input() toggleLegendOnVisibilityChange: boolean = false;
 
-  @Input()
-  get disableReorderLayers() {
-    return this._disableReorderLayers;
-  }
-  set disableReorderLayers(value: boolean) {
-    this._disableReorderLayers = value;
-  }
-  private _disableReorderLayers = false;
+  @Input() disableReorderLayers: boolean = false;
 
-  get opacity() {
-    return this.layer.opacity * 100;
+  get id(): string {
+    const dataSourceOptions = this.layer.dataSource.options as any;
+    return dataSourceOptions.id ? dataSourceOptions.id : this.layer.id;
   }
 
-  set opacity(opacity: number) {
-    this.layer.opacity = opacity / 100;
-  }
+  get removable(): boolean { return this.layer.options.removable !== false; }
 
-  get id(): string {
-    return (this.layer.dataSource.options as any).id
-      ? (this.layer.dataSource.options as any).id
-      : this.layer.id;
+  get browsable(): boolean {
+    const options = this.layer.options as any as VectorLayerOptions;
+    return options.browsable !== false;
   }
 
-  public legendCollapsed = true;
-  private resolution$$: Subscription;
+  get opacity() { return this.layer.opacity * 100; }
+  set opacity(opacity: number) { this.layer.opacity = opacity / 100; }
 
   constructor(
     // private featureService: FeatureService,
@@ -112,6 +85,8 @@ export class LayerItemComponent implements OnDestroy {
   }
 
   showFeaturesList(layer: Layer) {
+    return;
+
     // this.featureService.unfocusFeature();
     // this.featureService.unselectFeature();
 

diff --git a/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts b/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts
@@ -5,6 +5,7 @@ import { RouteService } from '@igo2/core';
 import { MapService } from '../../map/shared/map.service';
 import { LayerListComponent } from './layer-list.component';
 import { LayerListService } from './layer-list.service';
+import { Layer } from '../shared/layers/layer';
 
 @Directive({
   selector: '[igoLayerListBinding]'
@@ -28,7 +29,11 @@ export class LayerListBindingDirective implements OnInit, AfterViewInit, OnDestr
 
     this.layers$$ = this.mapService
       .getMap()
-      .layers$.subscribe(layers => (this.component.layers = layers));
+      .layers$.subscribe((layers: Layer[]) => {
+        this.component.layers = layers.filter((layer: Layer) => {
+          return layer.options.showInLayerList !== false;
+        });
+      });
   }
 
   ngAfterViewInit(): void {

diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.ts b/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
@@ -29,6 +29,7 @@ export class LayerListComponent implements AfterViewInit {
 
   @Input()
   get layers(): Layer[] {
+    // Should all of this be in the getter??
     if (this.excludeBaseLayers) {
       if (this._layers.filter(f => f.visible === false && !f.baseLayer).length >= 1) {
         this.hasLayerNotVisible = true;

diff --git a/packages/geo/src/lib/layer/shared/layers/image-layer.ts b/packages/geo/src/lib/layer/shared/layers/image-layer.ts
@@ -39,14 +39,13 @@ export class ImageLayer extends Layer {
     return image;
   }
 
-  public add(map: IgoMap) {
-    this.watcher.subscribe(() => {});
-    super.add(map);
-  }
-
-  public remove() {
-    this.watcher.unsubscribe();
-    super.remove();
+  public setMap(map: IgoMap | undefined) {
+    if (map === undefined) {
+      this.watcher.unsubscribe();
+    } else {
+      this.watcher.subscribe(() => {});
+    }
+    super.setMap(map);
   }
 
   private customLoader(tile, src, token?) {

diff --git a/packages/geo/src/lib/layer/shared/layers/layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/layer.interface.ts
@@ -15,6 +15,8 @@ export interface LayerOptions {
   zIndex?: number;
   minResolution?: number;
   maxResolution?: number;
+  showInLayerList?: boolean;
+  removable?: boolean;
   ol?: olLayer;
 }
 
@@ -23,3 +25,9 @@ export interface GroupLayers {
   layers?: LayerOptions;
   collapsed?: boolean;
 }
+
+export interface LayerLegend {
+  title: string;
+  url: string;
+  image: string;
+}
diff --git a/packages/geo/src/lib/layer/shared/layers/layer.ts b/packages/geo/src/lib/layer/shared/layers/layer.ts
@@ -92,15 +92,7 @@ export abstract class Layer {
 
   protected abstract createOlLayer(): olLayer;
 
-  add(map: IgoMap) {
+  setMap(map: IgoMap | undefined) {
     this.map = map;
-    map.ol.addLayer(this.ol);
-  }
-
-  remove() {
-    if (this.map) {
-      this.map.ol.removeLayer(this.ol);
-      this.map = undefined;
-    }
   }
 }
diff --git a/packages/geo/src/lib/layer/shared/layers/tile-layer.ts b/packages/geo/src/lib/layer/shared/layers/tile-layer.ts
@@ -40,13 +40,12 @@ export class TileLayer extends Layer {
     return new olLayerTile(olOptions);
   }
 
-  public add(map: IgoMap) {
-    this.watcher.subscribe(() => {});
-    super.add(map);
-  }
-
-  public remove() {
-    this.watcher.unsubscribe();
-    super.remove();
+  public setMap(map: IgoMap | undefined) {
+    if (map === undefined) {
+      this.watcher.unsubscribe();
+    } else {
+      this.watcher.subscribe(() => {});
+    }
+    super.setMap(map);
   }
 }
diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
@@ -18,5 +18,6 @@ export interface VectorLayerOptions extends LayerOptions {
     | WFSDataSourceOptions
     | ArcGISRestDataSourceOptions;
   style?: { [key: string]: any } | olStyle | olStyle[];
+  browsable?: boolean;
   ol?: olLayerVector;
 }
diff --git a/packages/geo/src/lib/layer/utils/index.ts b/packages/geo/src/lib/layer/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './image-watcher';
 export * from './tile-watcher';
+export * from './legend';