feat (layer-list): ajout d'un bouton permettant de cadrer sur une ou plusieurs couches contenues dans la carte

demo/src/app/geo/layer/layer.component.ts

@@ -28,6 +28,7 @@ export class AppLayerComponent {
 
   public view = {
     center: [-73, 47.2],
+    maxLayerZoomExtent: [-11000000, 4500000, -4500000, 10000000],
     zoom: 7
   };
 

packages/geo/src/lib/datasource/shared/capabilities.service.ts

@@ -36,6 +36,7 @@ import {
   TimeFilterType,
   TimeFilterStyle
 } from '../../filter/shared/time-filter.enum';
+import * as olproj from 'ol/proj';
 
 export enum TypeCapabilities {
   wms = 'wms',
@@ -251,6 +252,9 @@ export class CapabilitiesService {
     const timeFilter = this.getTimeFilter(layer);
     const timeFilterable = timeFilter && Object.keys(timeFilter).length > 0;
     const legendOptions = layer.Style ? this.getStyle(layer.Style) : undefined;
+    const extent = layer.EX_GeographicBoundingBox ?
+        olproj.transformExtent(layer.EX_GeographicBoundingBox, 'EPSG:4326', 'EPSG:3857') :
+        undefined;
 
     let queryFormat: QueryFormat;
     const queryFormatMimeTypePriority = [
@@ -284,6 +288,7 @@ export class CapabilitiesService {
         title: layer.Title,
         maxResolution: getResolutionFromScale(layer.MaxScaleDenominator),
         minResolution: getResolutionFromScale(layer.MinScaleDenominator),
+        extent,
         metadata: {
           url: metadata ? metadata.OnlineResource : undefined,
           extern: metadata ? true : undefined,

packages/geo/src/lib/layer/layer-list/layer-list.component.html

@@ -40,6 +40,18 @@
   </ng-container>
 
   <ng-content select="[igoLayerItemToolbar]"></ng-content>
+    <button
+      *ngIf="activeLayerIsValid(activeLayer)"
+      class="zoomLayer-button"
+      color="primary"
+      mat-icon-button
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [matTooltip]="'igo.geo.layer.zoomLayer' | translate"
+      (click)="zoomLayerExtents(activeLayer)">
+      <mat-icon matBadgeColor="primary" matBadgeSize="medium" svgIcon="magnify-scan"></mat-icon>
+    </button>
+
     <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->
     <button
       class="opacity-button"
@@ -128,6 +140,18 @@
                     ('igo.geo.layer.selectAll' | translate)}}
     </button>
 
+    <button
+      *ngIf="layersChecked.length !== 0 && activeLayersAreValid(layersChecked)"
+      class="zoomLayer-button"
+      color="primary"
+      mat-icon-button
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [matTooltip]="'igo.geo.layer.zoomLayers' | translate"
+      (click)="zoomLayersExtents(layersChecked)">
+      <mat-icon matBadgeColor="primary" matBadgeSize="medium" svgIcon="magnify-scan"></mat-icon>
+    </button>
+
     <button
       class="opacity-button"
       color="primary"

packages/geo/src/lib/layer/layer-list/layer-list.component.ts

@@ -21,7 +21,7 @@ import {
   EMPTY,
   timer
 } from 'rxjs';
-import { debounce } from 'rxjs/operators';
+import { debounce, isEmpty } from 'rxjs/operators';
 import {
   MetadataOptions,
   MetadataLayerOptions
@@ -31,6 +31,7 @@ import { IgoMap } from '../../map/shared/map';
 import { Layer } from '../shared/layers/layer';
 import { LinkedProperties, LayersLink } from '../shared/layers/layer.interface';
 import { MatSliderChange } from '@angular/material/slider';
+import * as olextent from 'ol/extent';
 
 // TODO: This class could use a clean up. Also, some methods could be moved ealsewhere
 @Component({
@@ -285,6 +286,61 @@ export class LayerListComponent implements OnInit, OnDestroy {
     this.layers$$.unsubscribe();
   }
 
+  activeLayerIsValid(layer: Layer): boolean {
+    let valid = false;
+    const layerExtent = layer.options.extent;
+    const maxLayerZoomExtent = this.map.viewController.maxLayerZoomExtent;
+
+    if (layerExtent) {
+      if (maxLayerZoomExtent) {
+        valid = olextent.containsExtent(maxLayerZoomExtent, layerExtent);
+      } else {
+        valid = true;
+      }
+    }
+    return valid;
+  }
+
+  activeLayersAreValid(layers: Layer[]): boolean {
+    let valid = false;
+    const layersExtent = olextent.createEmpty();
+    const maxLayerZoomExtent = this.map.viewController.maxLayerZoomExtent;
+
+    for (const layer of layers) {
+      const layerExtent = layer.options.extent;
+
+      if (layerExtent && !layerExtent.includes(Infinity)) {
+        olextent.extend(layersExtent, layerExtent);
+      }
+    }
+
+    if (!olextent.isEmpty(layersExtent)) {
+      if (maxLayerZoomExtent) {
+        valid = (olextent.containsExtent(maxLayerZoomExtent, layersExtent));
+      } else {
+        valid = true;
+      }
+    }
+    return valid;
+  }
+
+  zoomLayerExtents(layer: Layer) {
+    this.map.viewController.zoomToExtent(layer.options.extent);
+  }
+
+  zoomLayersExtents(layers: Layer[]) {
+    const layersExtent = olextent.createEmpty();
+
+    for (const layer of layers) {
+      const layerExtent = layer.options.extent;
+
+      if (layerExtent) {
+        olextent.extend(layersExtent, layerExtent);
+      }
+    }
+    this.map.viewController.zoomToExtent(layersExtent);
+  }
+
   changeOpacity(event: MatSliderChange ){
     this.opacity = event.value;
   }

packages/geo/src/lib/layer/shared/layers/layer.interface.ts

@@ -2,7 +2,7 @@ import olLayer from 'ol/layer/Layer';
 
 import { DataSource } from '../../../datasource/shared/datasources/datasource';
 import { AnyDataSourceOptions } from '../../../datasource/shared/datasources/any-datasource.interface';
-import { MapViewOptions } from '../../../map/shared/map.interface';
+import { MapExtent, MapViewOptions } from '../../../map/shared/map.interface';
 
 export interface LayerOptions {
   source?: DataSource;
@@ -13,7 +13,7 @@ export interface LayerOptions {
   baseLayer?: boolean;
   opacity?: number;
   visible?: boolean;
-  extent?: [number, number, number, number];
+  extent?: MapExtent;
   zIndex?: number;
   minResolution?: number;
   maxResolution?: number;

packages/geo/src/lib/map/shared/controllers/view.ts

@@ -42,6 +42,11 @@ export class MapViewController extends MapController {
    */
   maxZoomOnExtent = 19;
 
+  /**
+   * Max extent possible when zooming
+   */
+  maxLayerZoomExtent: MapExtent;
+
   /**
    * Extent stream
    */
@@ -340,7 +345,17 @@ export class MapViewController extends MapController {
       size: this.olMap.getSize(),
       maxZoom,
       padding: this.padding,
-      duration: xSize > 4 ? 0 : duration
+      duration: xSize > 4 ? 0 : duration,
+      callback: (isFinished: boolean) => {
+        if (!isFinished) {
+          olView.fit(extent, {
+            size: this.olMap.getSize(),
+            maxZoom,
+            padding: this.padding,
+            duration: xSize > 4 ? 0 : duration
+          });
+        }
+      }
     });
   }
 

packages/geo/src/lib/map/shared/map.interface.ts

@@ -7,10 +7,10 @@ export interface MapViewOptions {
   geolocate?: boolean;
   buffer?: Buffer;
   alwaysTracking?: boolean;
-
   constrainRotation?: boolean | number;
   enableRotation?: boolean;
   extent?: MapExtent;
+  maxLayerZoomExtent?: MapExtent;
   maxResolution?: number;
   minResolution?: number;
   maxZoom?: number;

packages/geo/src/lib/map/shared/map.ts

@@ -161,6 +161,10 @@ export class IgoMap {
 
     this.unsubscribeGeolocate();
     if (options) {
+      if (options.maxLayerZoomExtent) {
+        this.viewController.maxLayerZoomExtent = options.maxLayerZoomExtent;
+      }
+
       if (options.center) {
         const projection = view.getProjection().getCode();
         const center = olproj.fromLonLat(options.center, projection);

packages/geo/src/locale/en.geo.json

@@ -213,6 +213,8 @@
         "tools": "Tools",
         "selectAll": "Select all",
         "deselectAll": "Deselect all",
+        "zoomLayer": "Zoom To Layer Extents",
+        "zoomLayers": "Zoom To Selected Layers Extents",
         "opacity": "Opacity",
         "raiseLayer": "Bring layer forward",
         "filterRaiseLayer": "The forward movement is always done according to the order of the map!",

packages/geo/src/locale/fr.geo.json

@@ -212,6 +212,8 @@
         "tools": "Outils",
         "selectAll": "Tout sélectionner",
         "deselectAll": "Tout désélectionner",
+        "zoomLayer": "Cadrer sur l'étendue de la couche",
+        "zoomLayers": "Cadrer sur l'étendue des couches sélectionnées",
         "opacity": "Opacité",
         "raiseLayer": "Mettre en avant",
         "filterRaiseLayer": "Le déplacement avant se fait toujours selon l'ordre de la carte!",