Geo properties - detect wms properties to add remove layer (#962)

* feat(toast): can now detect geoservice properties (wms...) to add/remove layer from query results * wip
infra-geo-ouverte · Jun 5, 2023 · d485042 · d485042
1 parent b32bcb3
commit d485042
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 3 deletions.
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.html b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -35,6 +35,12 @@
       svgIcon="magnify-plus-outline"></mat-icon>
     </button>
 
+    <button *ngIf="hasGeoService()" mat-icon-button igoStopPropagation panelLeftButton tooltip-position="below"
+      matTooltipShowDelay="500" [color]="(potententialLayerisAdded$ | async) ? 'warn' : ''" (click)="handleLayer()">
+      <mat-icon [svgIcon]="(potententialLayerisAdded$ | async) ? 'delete' : 'plus'">
+      </mat-icon>
+    </button>
+
     <button
       *ngIf="resultSelected$.value"
       [disabled]="results[0].meta.id === resultSelected$.value.meta.id"
@@ -80,6 +86,7 @@
     <div #content class="toast-content">
 
       <igo-feature-details
+        [map]="map"
         *ngIf="resultSelected$.value"
         [feature]="resultSelected$.value.data"
         (htmlDisplayEvent)=setHtmlDisplay($event)>

diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.ts b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -34,7 +34,12 @@ import {
   getCommonVectorStyle,
   getCommonVectorSelectedStyle,
   featuresAreOutOfView,
-  computeOlFeaturesExtent
+  computeOlFeaturesExtent,
+  PropertyTypeDetectorService,
+  generateIdFromSourceOptions,
+  LayerService,
+  Layer,
+  GeoServiceDefinition
 } from '@igo2/geo';
 import {
   Media,
@@ -46,6 +51,11 @@ import {
   ConfigService
 } from '@igo2/core';
 import { QueryState, StorageState } from '@igo2/integration';
+import { ObjectUtils } from '@igo2/utils';
+
+interface ExtendedGeoServiceDefinition extends GeoServiceDefinition {
+  propertyForUrl: string
+}
 
 @Component({
   selector: 'app-toast-panel',
@@ -132,6 +142,9 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
   }
   private _fullExtent = false;
 
+  public potententialLayerToAdd$: BehaviorSubject<any> = new BehaviorSubject(undefined);
+  public potententialLayerisAdded$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
   public fullExtent$: BehaviorSubject<boolean> = new BehaviorSubject(
     this.fullExtent
   );
@@ -279,7 +292,9 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     public languageService: LanguageService,
     private storageState: StorageState,
     private queryState: QueryState,
-    private configService: ConfigService
+    private configService: ConfigService,
+    private propertyTypeDetectorService: PropertyTypeDetectorService,
+    private layerService: LayerService
   ) {
     this.tabsMode = this.configService.getConfig('queryTabs')
       ? this.configService.getConfig('queryTabs')
@@ -450,6 +465,14 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
         }
       }
     ]);
+    this.computeFeatureGeoServiceStatus();
+    combineLatest([
+      this.resultSelected$,
+      this.map.layers$ as BehaviorSubject<Layer[]>
+    ])
+      .subscribe(() => {
+        this.computeFeatureGeoServiceStatus();
+      });
   }
 
   ngOnDestroy(): void {
@@ -650,6 +673,99 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     }
   }
 
+  hasGeoService() {
+    return this.getGeoServices().length;
+  }
+
+  private getGeoServices(): ExtendedGeoServiceDefinition[] {
+    const resultSelected = this.resultSelected$.getValue();
+    if (!resultSelected) {
+      return [];
+    }
+    const hasGeoServiceProperties: ExtendedGeoServiceDefinition[] = [];
+    const keys = Object.keys(resultSelected.data.properties);
+    Object.entries(resultSelected.data.properties).forEach((entry) => {
+      const [key, value] = entry;
+      const geoService = this.propertyTypeDetectorService.getGeoService(value, keys);
+      const extendedGeoService: ExtendedGeoServiceDefinition = Object.assign({},geoService, {propertyForUrl: undefined});
+      if (geoService) {
+        extendedGeoService.propertyForUrl = key;
+        hasGeoServiceProperties.push(extendedGeoService);
+      }
+
+    });
+    return hasGeoServiceProperties;
+  }
+
+  handleLayer() {
+    const layersIds = this.map.layers.map(layer => layer.id);
+    let potententialLayerToAdd = this.potententialLayerToAdd$.getValue();
+    if (!potententialLayerToAdd) {
+      this.computeFeatureGeoServiceStatus();
+    }
+    potententialLayerToAdd = this.potententialLayerToAdd$.getValue();
+
+    if (layersIds.includes(potententialLayerToAdd.id)) {
+      const layerToRemove = this.map.getLayerById(potententialLayerToAdd.id);
+      if (layerToRemove) {
+        this.map.removeLayer(layerToRemove);
+        this.potententialLayerisAdded$.next(false);
+      }
+    } else {
+      this.layerService
+        .createAsyncLayer(potententialLayerToAdd.sourceOptions)
+        .subscribe(layer => {
+          this.map.layersAddedByClick$.next([layer]);
+          this.map.addLayer(layer);
+          this.potententialLayerisAdded$.next(true);
+        }
+        );
+    }
+  }
+
+  private computeFeatureGeoServiceStatus() {
+    const resultSelected = this.resultSelected$.getValue();
+    if (!resultSelected) {
+      return;
+    }
+    const geoServices = this.getGeoServices();
+    if (geoServices.length) {
+      const firstGeoService = geoServices[0];
+      const so = this.computeSourceOptionsFromProperties(resultSelected.data.properties, firstGeoService);
+      const soId = generateIdFromSourceOptions(so.sourceOptions);
+      this.potententialLayerToAdd$.next({ id: soId, sourceOptions: so });
+      const layersIds = this.map.layers.map(l => l.id);
+      this.potententialLayerisAdded$.next(layersIds.includes(soId) ? true : false);
+    }
+  }
+
+  private computeSourceOptionsFromProperties(properties: {}, geoService: ExtendedGeoServiceDefinition) {
+    const keys = Object.keys(properties);
+    const propertiesForLayerName = keys.filter(p => geoService.propertiesForLayerName.includes(p));
+    // providing the the first matching regex;
+    let layerName = properties[propertiesForLayerName[0]];
+    const url = properties[geoService.propertyForUrl];
+    let appliedLayerName = layerName;
+    let arcgisLayerName = undefined;
+    if (['arcgisrest', 'imagearcgisrest', 'tilearcgisrest'].includes(geoService.type)) {
+      arcgisLayerName = layerName;
+      appliedLayerName = undefined;
+    }
+    const so = ObjectUtils.removeUndefined({
+      sourceOptions: {
+        type: geoService.type || 'wms',
+        url,
+        optionsFromCapabilities: true,
+        optionsFromApi: true,
+        params: {
+          LAYERS: appliedLayerName,
+          LAYER: arcgisLayerName
+        }
+      }
+    });
+    return so;
+  }
+
   zoomTo() {
     const localOlFeature = this.format.readFeature(
       this.resultSelected$.getValue().data,

diff --git a/src/config/config.json b/src/config/config.json
@@ -39,5 +39,14 @@
     "url": "/apis/inedit/"
   },
   "wakeLockApiButton": false,
-  "offlineButton": false
+  "offlineButton": false,
+  "regex": {
+    "geoservice": [
+      {
+        "url": "https://servicesmatriciels.mern.qc/erdas-iws/ogc/wms/.*",
+        "type": "wms",
+        "propertiesForLayerName": ["nom_couche_service", "nom_mosaique_wms", "wmsName"]
+      }
+    ]
+  }
 }