✨ add WMS-t image layer

src/app/app.service.ts

@@ -21,6 +21,7 @@ import {
 
 import i18n from './translations.json';
 import {CalculatorService} from './calculator/calculator.service';
+import {imageWmsTLayer} from './calculator/image-wms-t-layer';
 
 proj4.defs(
   'EPSG:3045',
@@ -194,6 +195,7 @@ export class AppService {
           visible: false,
         }),
         /* Thematic layers */
+        imageWmsTLayer,
         new VectorLayer({
           properties: {
             title: 'LPIS (WFS)',

src/app/calculator/calculator.service.ts

@@ -7,6 +7,7 @@ import {HsConfig} from 'hslayers-ng';
 
 import {FieldService} from './field.service';
 import {ZonesService} from './zones.service';
+import {imageWmsTLayer, imageWmsTSource} from './image-wms-t-layer';
 
 export type Index = 'EVI' | 'RVI4S1';
 
@@ -121,6 +122,7 @@ export class CalculatorService {
       console.log(data);
       this._zonesLoading = false;
       this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
+      this.updateImageBackground(this.selectedDate);
     } catch (err) {
       this._zonesLoading = false;
       console.error('Somethin fucked up!');
@@ -128,6 +130,16 @@ export class CalculatorService {
     }
   }
 
+  /**
+   * Updates WMS-t layer with the source image
+   * @param date - ISO date
+   */
+  updateImageBackground(date: string) {
+    const isoTime = date.split('T')[0].replace(/-/g, '');
+    imageWmsTSource.updateParams({time: isoTime});
+    imageWmsTLayer.setVisible(true);
+  }
+
   private proxyEnabled(): boolean {
     return this.hsConfig.useProxy === undefined || this.hsConfig.useProxy;
   }

src/app/calculator/image-wms-t-layer.ts

@@ -0,0 +1,21 @@
+import {Tile} from 'ol/layer';
+import {TileWMS} from 'ol/source';
+
+export const imageWmsTSource = new TileWMS({
+  url: 'http://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/veg_indexy.map&SERVICE=WMS',
+  params: {
+    LAYERS: 'evi',
+    time: '20200111',
+  },
+});
+
+export const imageWmsTLayer = new Tile({
+  properties: {
+    title: 'Vegetation Satellite Image',
+    base: false,
+    removable: false,
+    dimensions: {time: false},
+  },
+  source: imageWmsTSource,
+  visible: false,
+});