🤡 add static WFS request

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 
-import {GeoJSON} from 'ol/format';
 import {OSM, TileWMS, Vector as VectorSource} from 'ol/source';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
 import {View} from 'ol';
@@ -16,6 +15,7 @@ import {
 } from 'hslayers-ng';
 
 import {IrrigationForecastPanelComponent} from './irrigation/irrigation-forecast-panel.component';
+import {IrrigationHistoryService} from './irrigation/irrigation-history.service';
 import {ReservoirHistoryPanelComponent} from './irrigation/reservoir-history-panel.component';
 
 @Component({
@@ -34,7 +34,8 @@ export class HslayersAppComponent {
     private hsLayoutService: HsLayoutService,
     private hsPanelContainerService: HsPanelContainerService,
     private hsSidebarService: HsSidebarService,
-    private hsToastService: HsToastService
+    private hsToastService: HsToastService,
+    private irrigationHistoryService: IrrigationHistoryService
   ) {
     /* Create new button in the sidebar */
     this.hsSidebarService.buttons.push(
@@ -77,6 +78,15 @@ export class HslayersAppComponent {
       }),
       visible: true,
     });
+    const reservoirWfsLayer = new VectorLayer({
+      properties: {
+        title: `Water level at ${this.irrigationHistoryService.timeStamp}`,
+        base: false,
+        removable: false,
+        inlineLegend: true,
+      },
+      source: this.irrigationHistoryService.reservoirWfsSource,
+    });
     /* Define the polygon's style using SLD */
     const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
       <StyledLayerDescriptor version="1.0.0" 
@@ -160,8 +170,9 @@ export class HslayersAppComponent {
             removable: false,
           },
         }),
-        /* One thematic layer */
+        /* Two thematic layers */
         reservoirWmsLayer,
+        reservoirWfsLayer,
       ],
       default_view: new View({
         center: transform([18.308, 48.147], 'EPSG:4326', 'EPSG:3857'),

src/app/irrigation/irrigation-history.service.ts

@@ -0,0 +1,74 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+import {GML} from 'ol/format';
+import {Vector as VectorSource} from 'ol/source';
+import {bbox as bboxStrategy} from 'ol/loadingstrategy';
+
+@Injectable({providedIn: 'root'})
+export class IrrigationHistoryService {
+  reservoirWfsSource;
+  epsgCode: string;
+  timeStamp: string;
+
+  constructor(private httpClient: HttpClient) {
+    this.epsgCode = '3857';
+    this.timeStamp = '2022-05-20T03:00:00Z';
+    this.reservoirWfsSource = this.createReservoirWfsSource();
+  }
+
+  getForecast() {
+    const crossOrigin = !window.location.hostname.includes('gis.atapex.sk');
+    const proxyPath = window.location.hostname.includes('localhost')
+      ? 'http://localhost:8085/'
+      : '/proxy/';
+    return this.httpClient.get(
+      (crossOrigin ? proxyPath : '') +
+        'https://www.gis.atapex.sk/agrihub_forecast/'
+    );
+  }
+
+  private createReservoirWfsSource() {
+    return new VectorSource({
+      format: new GML(/*{
+        dataProjection: 'EPSG:3857',
+      }*/),
+      url: (extent) => {
+        const timeStampEnd = '2022-05-20T04:00:05.603Z';
+        const crossOrigin = !window.location.hostname.includes('gis.atapex.sk');
+        const proxyPath = window.location.hostname.includes('localhost')
+          ? 'http://localhost:8085/'
+          : '/proxy/';
+        return (
+          (crossOrigin ? proxyPath : '') +
+          'https://www.gis.atapex.sk/geoserver/agrihub/wfs' +
+          '?service=WFS' +
+          '&VERSION=1.1.0' +
+          '&REQUEST=GetFeature' +
+          '&TYPENAME=agrihub:water_surface' +
+          '&COUNT=100' +
+          //'&outputformat=geojson' +
+          `&SRSNAME=EPSG:${this.epsgCode}` +
+          //`&BBOX=${extent.join(',')},EPSG:${epsgCode}` +
+          `&FILTER=
+  <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+  <ogc:And>
+  <ogc:PropertyIsGreaterThan>
+    <ogc:PropertyName>agrihub:datetime</ogc:PropertyName>
+    <ogc:Literal>${this.timeStamp}</ogc:Literal>
+  </ogc:PropertyIsGreaterThan>
+  <ogc:PropertyIsLessThan>
+    <ogc:PropertyName>agrihub:datetime</ogc:PropertyName>
+    <ogc:Literal>${timeStampEnd}</ogc:Literal>
+  </ogc:PropertyIsLessThan>
+  </ogc:And>
+  </ogc:Filter>`
+        );
+        //%3Cgml:Box%3E%3Cgml:coordinates%3E${
+        //extent.join(',')
+        //}%3C/gml:coordinates%3E%3C/gml:Box%3E%3C/ogc:Filter%3E`;
+      },
+      strategy: bboxStrategy,
+    });
+  }
+}