Merging of new vector filter capabilities (#2663)

* feat: added possibility to pass flat style style

* chore: added initial vector layer for sawmill data

* feat: implemented initial idea for vector tile feature filtering

* chore: cleanup of component, added category info to filter definition

* fix: made sure colormap is loaded in correct layer for forest disturbance

* chore: added truck supported roads network as layer to fcm2, added sawmill capabilities also to fcm3

* chore: removed adress from tooltip

app/src/components/DataPanel.vue

@@ -45,8 +45,15 @@
             :adminFeature="$store.state.features.adminBorderFeatureSelected"
             :mergedConfigsData="mergedConfigsData[0]"
             :indicatorCode="indicatorObject.indicator"
-          >
-          </filter-controls>
+        >
+        </filter-controls>
+        <feature-filters v-if="indicatorObject.featureFilters"
+            :featureFilters="indicatorObject.featureFilters"
+            :adminLayer="$store.state.features.adminBorderLayerSelected"
+            :adminFeature="$store.state.features.adminBorderFeatureSelected"
+            :mergedConfigsData="mergedConfigsData[0]"
+            :indicatorCode="indicatorObject.indicator"
+        ></feature-filters>
         <template v-if="selectableLayerConfigs.length > 0">
             <SelectionInfoBar class="pb-2"
             :selectableLayerConfigs="selectableLayerConfigs"/>
@@ -300,6 +307,7 @@ import { DateTime } from 'luxon';
 import IndicatorData from '@/components/IndicatorData.vue';
 import IframeButton from '@/components/IframeButton.vue';
 import FilterControls from '@/components/map/FilterControls.vue';
+import FeatureFilters from '@/components/map/FeatureFilters.vue';
 import StyleControls from '@/components/map/StyleControls.vue';
 import DataMockupView from '@/components/DataMockupView.vue';
 import AddToDashboardButton from '@/components/AddToDashboardButton.vue';
@@ -317,6 +325,7 @@ export default {
     IframeButton,
     AddToDashboardButton,
     FilterControls,
+    FeatureFilters,
     StyleControls,
     WmsStyleControls,
     VectorTileStyleControl,

app/src/components/map/FeatureFilters.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-col v-if="filters"
+    :cols="$vuetify.breakpoint.mdAndDown"
+    :style="`height: auto`"
+  >
+  <v-card class="pa-2">
+    <v-card-title class="pa-2">Filters</v-card-title>
+      <template>
+        <v-select
+          v-model="selectedFilters"
+          :items="filters"
+          item-text="description"
+          item-value="id"
+          label="Select"
+          multiple
+          return-object
+          :hint="featureFilters.hint ? featureFilters.hint: 'Select filter'"
+          persistent-hint
+          @change="updateMap"
+        ></v-select>
+      </template>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+import { getMapInstance } from '@/components/map/map';
+
+export default {
+  name: 'FilterControls',
+  props: {
+    featureFilters: Object,
+  },
+  data() {
+    return {
+      selectedFilters: [],
+      filters: this.featureFilters.filters,
+    };
+  },
+  methods: {
+    updateMap() {
+      let resultFilters = [];
+      let style;
+      if (this.selectedFilters.length > 1) {
+        resultFilters.push('all');
+        this.selectedFilters.forEach((f) => {
+          resultFilters.push(['==', ['get', f.id], 1]);
+        });
+      } else if (this.selectedFilters.length === 1) {
+        resultFilters = ['==', ['get', this.selectedFilters[0].id], 1];
+      }
+      if (this.selectedFilters.length === 0) {
+        style = this.featureFilters.baseStyle;
+      } else {
+        style = [{
+          filter: resultFilters,
+          style: this.featureFilters.baseStyle,
+        }];
+      }
+      const { map } = getMapInstance('centerMap');
+      const vectorLayer = map.getAllLayers().find(
+        (l) => l.get('id') === this.featureFilters.sourceLayer,
+      );
+      vectorLayer.setStyle(style);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

app/src/components/map/layers.js

@@ -366,11 +366,16 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer = new TileLayer({});
     createWMTSSourceFromCapabilities(config, layer, options);
   } else if (config.protocol === 'geoserverTileLayer') {
-    const dynamicStyleFunction = createVectorLayerStyle(config, options);
+    let style;
+    if ('flatStyle' in config) {
+      style = config.flatStyle;
+    } else {
+      style = createVectorLayerStyle(config, options);
+    }
     const geoserverUrl = 'https://xcube-geodb.brockmann-consult.de/geoserver/geodb_debd884d-92f9-4979-87b6-eadef1139394/gwc/service/tms/1.0.0/';
     const projString = 'EPSG:3857';
     layer = new VectorTileLayer({
-      style: dynamicStyleFunction,
+      style,
       source: new VectorTileSource({
         projection: projString,
         format: new MVT(),
@@ -638,6 +643,10 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer.getSource().set('updateArea', areaUpdate);
   }
   layer.set('configId', config.name);
-  layer.set('id', config.name);
+  if ('id' in config) {
+    layer.set('id', config.id);
+  } else {
+    layer.set('id', config.name);
+  }
   return layer;
 }