filter

src/app/components/homemap/homemap.component.ts

@@ -61,7 +61,7 @@ export class HomemapComponent implements OnInit {
       source: vectorSourceCommunes
     });
 
-    vectorCommunes.setProperties({ name: 'Communes' });
+    vectorCommunes.setProperties({ name: 'Communes', id:'communes' });
 
     const vectorSourceCalques = new VectorSource({
       format: new GeoJSON(),
@@ -73,13 +73,13 @@ export class HomemapComponent implements OnInit {
       style: StyleCalque.styleFunction
     });
 
-    vectorCalque.setProperties({ name: 'Calque Plantabilité' });
+    vectorCalque.setProperties({ name: 'Calque Plantabilité', id:'calque' });
 
     const raster = new TileLayer({
       source: new OSM()
     });
 
-    raster.setProperties({ name: 'Open Street Map' });
+    raster.setProperties({ name: 'Open Street Map', id:'osm' });
 
     this.map = new Map({
       interactions: defaultInteractions().extend([new DragRotateAndZoom()]),

src/app/components/toc/layer-checkbox/layer-checkbox.component.css

-.child {
-    display: inline;
+.tdFilter {
+    text-align: center; 
+    vertical-align: middle;
 }
+.tdFilterSmall {
+    width:7%;
+}
+.tdFilterMedium {
+    width:20%;
+}
+.tdFilterLarge {
+    width:26%;
+}
+

src/app/components/toc/layer-checkbox/layer-checkbox.component.html

     <table>
       <tr>
-        <td>
+        <td >
           <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" value="" id="flexCheck" [checked]="checked" (click)="onClick()" />
           </div>
         </td>
-        <td>
+        <td >
             <label class="example-value-label">Transparence :{{value}}</label>
             <mat-slider (input)="onInputChange($event)"
               class="example-margin"
@@ -23,6 +23,37 @@
         </td>
       </tr>
     </table>
+    <form (ngSubmit)="filter()" [formGroup]="filterForm">
+      <table >
+        <tr *ngIf="filterVisibilty">
+          <td colspan="5">
+            Filtres:
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+        </tr>
+        <tr *ngIf="filterVisibilty">
+          <td class="tdFilterLarge">
+            <label style="white-space:wrap">Indice entre</label>
+          </td>
+          <td class="tdFilter tdFilterMedium">
+            <input type="number" class="form-control" step="0.01" formControlName="min">
+          </td>
+          <td class="tdFilter tdFilterSmall">
+            <label>et</label>
+          </td>
+          <td class="tdFilter tdFilterMedium">
+            <input type="number"  class="form-control" step="0.01" formControlName="max">
+          </td>
+          <td class="tdFilter tdFilterSmall">
+          </td>
+          <td class="tdFilter tdFilterMedium">
+            <button type="button" class="btn btn-success" type="submit">Valider</button>
+          </td>
+        </tr>
+      </table>
+    </form>
 
 
 

src/app/components/toc/layer-checkbox/layer-checkbox.component.ts

 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatSliderChange } from '@angular/material/slider';
 import { Map } from 'ol';
+import { Geometry } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { StyleCalque } from 'src/app/utlis/style';
 
 @Component({
   selector: 'frt-layer-checkbox',
@@ -20,6 +25,11 @@ export class LayerCheckboxComponent implements OnInit {
 
   checked!: boolean;
 
+  filterVisibilty =false;
+  maxCtrl: FormControl;
+  minCtrl: FormControl;
+  filterForm: FormGroup;
+
   autoTicks = false;
   disabled = false;
   invert = false;
@@ -32,11 +42,19 @@ export class LayerCheckboxComponent implements OnInit {
   vertical = false;
   tickInterval = 1;
 
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private changeDetectorRef: ChangeDetectorRef, fb: FormBuilder) {
+    this.maxCtrl= fb.control(''); 
+    this.minCtrl= fb.control(''); 
+    this.filterForm = fb.group({
+      max: this.maxCtrl,
+      min: this.minCtrl
+    });
+  }
 
   ngOnInit(): void {
     this.map.getLayers().forEach(layer => {
       if (layer.getProperties()['name'] === this.name) {
+        this.filterVisibilty = (layer.getProperties()['id'] === 'calque')? true:false;
         this.layer = layer;
         this.checked = layer.getVisible();
         this.value = this.layer.getOpacity() * 100;
@@ -63,4 +81,12 @@ export class LayerCheckboxComponent implements OnInit {
       this.layer.setOpacity(this.value / 100);
     }
   }
+
+  filter(){
+    const vectorLayer = this.layer as VectorLayer<VectorSource<Geometry>>;
+    StyleCalque.minIndice = this.minCtrl.value?Number(this.minCtrl.value):undefined;
+    StyleCalque.maxIndice = this.maxCtrl.value?Number(this.maxCtrl.value):undefined;
+    vectorLayer.setStyle(StyleCalque.styleFunction);
+
+  }
 }

src/environments/environment.ts

@@ -8,7 +8,7 @@ export const environment = {
   communesURL:
     'https://download.data.grandlyon.com/wfs/grandlyon?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=adr_voie_lieu.adrcomgl&outputFormat=application/json; subtype=geojson&SRSNAME=EPSG:4326&startIndex=0',
   calqueURL:
-    'http://plantabilite.datagora.erasme.org/geoserver/M%C3%A9tropole_ERASME/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=M%C3%A9tropole_ERASME%3Atiles_temp&maxFeatures=50&outputFormat=application%2Fjson&SRSNAME=EPSG:4326',
+    'http://plantabilite.datagora.erasme.org/geoserver/M%C3%A9tropole_ERASME/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=M%C3%A9tropole_ERASME%3Atiles_temp&maxFeatures=1000&outputFormat=application%2Fjson&SRSNAME=EPSG:4326',
   centerLatitude: 45.7675,
   centerLongitude: 4.8345,
   backEndUrl:'http://localhost:3000',