✨ calculate zones from LPIS

instead of custom made polygons

src/app/app.component.ts

@@ -3,7 +3,6 @@ import {Component} from '@angular/core';
 import proj4 from 'proj4';
 import {GeoJSON} from 'ol/format';
 import {OSM, TileWMS, Vector as VectorSource} from 'ol/source';
-import {Stroke, Style} from 'ol/style';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
 import {View} from 'ol';
 import {bbox as bboxStrategy} from 'ol/loadingstrategy';
@@ -63,9 +62,9 @@ export class AppComponent {
                 <CssParameter name="fill-opacity">0.7</CssParameter>
               </Fill>
               <Stroke>
-                <CssParameter name="stroke">#ff0000</CssParameter>
+                <CssParameter name="stroke">#33cccc</CssParameter>
                 <CssParameter name="stroke-opacity">1</CssParameter>
-                <CssParameter name="stroke-width">3.9</CssParameter>
+                <CssParameter name="stroke-width">2.0</CssParameter>
               </Stroke>
               </PolygonSymbolizer>
               </Rule>
@@ -177,24 +176,6 @@ export class AppComponent {
         /* Thematic layers */
         new VectorLayer({
           properties: {
-            title: 'Farm',
-            synchronize: false,
-            cluster: false,
-            inlineLegend: true,
-            editor: {
-              editable: true,
-              defaultAttributes: {
-                name: 'Moje farma',
-                description: 'none',
-              },
-            },
-            sld: fieldSld,
-            //path: 'User generated',
-          },
-          source: this.fieldService.fields,
-        }),
-        new VectorLayer({
-          properties: {
             title: 'LPIS',
             synchronize: false,
             cluster: false,
@@ -205,13 +186,8 @@ export class AppComponent {
             sld: fieldSld,
             //path: 'User generated',
           },
+          opacity: 0.7,
           source: lpisSource,
-          style: new Style({
-            stroke: new Stroke({
-              color: 'rgba(0, 0, 255, 1.0)',
-              width: 2,
-            }),
-          }),
         }),
       ],
       translationOverrides: i18n,

src/app/calculator/field.service.ts

@@ -1,8 +1,6 @@
 import {Injectable} from '@angular/core';
 
-import {GeoJSON} from 'ol/format';
 import {Geometry, Polygon} from 'ol/geom';
-import {Vector as VectorSource} from 'ol/source';
 import {getCenter} from 'ol/extent';
 import {transform} from 'ol/proj';
 
@@ -10,58 +8,7 @@ import {HsEventBusService, HsMapService} from 'hslayers-ng';
 
 @Injectable({providedIn: 'root'})
 export class FieldService {
-  fields: VectorSource<Geometry>;
-  //TODO: temporarry hard-coded hack
-  field1GeoJSON = {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [17.008032903697003, 49.259378350222214],
-        [17.012346093160815, 49.26055145480218],
-        [17.01341275235608, 49.25661998865008],
-        [17.01578237120672, 49.251834177355896],
-        [17.01243531034079, 49.24966645404407],
-        [17.009126895621744, 49.24897297823598],
-        [17.003117114964958, 49.253454830509305],
-        [17.008032903697003, 49.259378350222214],
-      ],
-    ],
-  };
-  //TODO: temporarry hard-coded hack
-  field2GeoJSON = {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [17.002437217427214, 49.25406053771264],
-        [17.007010834533514, 49.25949599987935],
-        [17.00652649276053, 49.26616621617807],
-        [16.994875655608688, 49.25981844649525],
-        [16.995730316423206, 49.257965703041684],
-        [17.002437217427214, 49.25406053771264],
-      ],
-    ],
-  };
-  //TODO: temporarry hard-coded hack
-  field3GeoJSON = {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [16.993895078820575, 49.259216136348286],
-        [16.994671522235812, 49.257860846173166],
-        [17.00155277758227, 49.25349827686348],
-        [16.99702124804218, 49.246825312276215],
-        [16.993862809154038, 49.243797217302074],
-        [16.97947178114977, 49.24513873718192],
-        [16.980782403841776, 49.246567855409126],
-        [16.980234692917616, 49.251993865297734],
-        [16.982332050970445, 49.25428043019449],
-        [16.98326065796653, 49.25618643740068],
-        [16.99037376067523, 49.25783927642802],
-        [16.993895078820575, 49.259216136348286],
-      ],
-    ],
-  };
-  selectableLayers = ['Farma'];
+  SELECTABLE_LAYERS = ['LPIS'] as const;
   selectedField;
 
   constructor(
@@ -77,27 +24,6 @@ export class FieldService {
       }
       this.selectedField = data.feature.getGeometry() as Polygon;
     });
-    //TODO: temporary hard-coded hack
-    this.fields = new VectorSource({
-      features: [
-        new GeoJSON().readFeature(this.field1GeoJSON, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:5514',
-        }),
-      ],
-    });
-    this.fields.addFeatures([
-      new GeoJSON().readFeature(this.field2GeoJSON, {
-        dataProjection: 'EPSG:4326',
-        featureProjection: 'EPSG:5514',
-      }),
-    ]);
-    this.fields.addFeatures([
-      new GeoJSON().readFeature(this.field3GeoJSON, {
-        dataProjection: 'EPSG:4326',
-        featureProjection: 'EPSG:5514',
-      }),
-    ]);
   }
 
   noFieldSelected(): boolean {
@@ -155,6 +81,6 @@ export class FieldService {
    */
   isValidLayer(feature) {
     const layer = this.hsMapService.getLayerForFeature(feature);
-    return this.selectableLayers.includes(layer.get('title'));
+    return this.SELECTABLE_LAYERS.includes(layer.get('title'));
   }
 }

src/app/calculator/zones.service.ts

@@ -12,13 +12,19 @@ export class ZonesService {
   zonesLayer: VectorLayer<VectorSource<Geometry>>;
   zonesSource: VectorSource<Geometry>;
   zonesStyle: (feature) => Style;
-  quantileColors = ['#0000ff', '#0033cc', '#006666', '#00cc33', '#00ff00'];
+  QUANTILE_COLORS = [
+    '#0000ff',
+    '#0033cc',
+    '#006666',
+    '#00cc33',
+    '#00ff00',
+  ] as const;
 
   constructor(private hsAddDataService: HsAddDataService) {
     this.zonesStyle = (feature) =>
       new Style({
         fill: new Fill({
-          color: this.quantileColors[feature.get('quantile')],
+          color: this.QUANTILE_COLORS[feature.get('quantile')],
         }),
         stroke: new Stroke(),
       });
@@ -30,6 +36,7 @@ export class ZonesService {
       this.zonesLayer = new VectorLayer({
         properties: {
           title: 'Zones',
+          path: 'Results',
         },
         style: this.zonesStyle,
         source: this.zonesSource,