Mercurial > gemma

changeset 1121:035dc35e1dfc store-refactoring

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
moved draw layer in map store's layers property and added a flag for layers to show in legend or not
author Markus Kottlaender <markus@intevation.de>
date Tue, 06 Nov 2018 10:00:13 +0100
parents 6d4cc4389c8f
children a4c74a95c177
files client/src/layers/Layers.vue client/src/map/Maplayer.vue client/src/store/map.js
diffstat 3 files changed, 90 insertions(+), 68 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/layers/Layers.vue	Tue Nov 06 09:12:05 2018 +0100
+++ b/client/src/layers/Layers.vue	Tue Nov 06 10:00:13 2018 +0100
@@ -12,7 +12,7 @@
                 </div>
                 <hr>
                 <div class="d-flex flex-column">
-                    <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+                    <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layersForLegend" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
                 </div>
             </div>
         </div>
@@ -80,7 +80,7 @@
     Layerselect
   },
   computed: {
-    ...mapGetters("map", ["layers"]),
+    ...mapGetters("map", ["layersForLegend"]),
     layerSelectStyle() {
       return {
         "ui-element": true,
--- a/client/src/map/Maplayer.vue	Tue Nov 06 09:12:05 2018 +0100
+++ b/client/src/map/Maplayer.vue	Tue Nov 06 10:00:13 2018 +0100
@@ -45,12 +45,11 @@
 import { Map, View } from "ol";
 import { WFS, GeoJSON } from "ol/format.js";
 import LineString from "ol/geom/LineString.js";
-import Point from "ol/geom/Point.js";
 import Draw from "ol/interaction/Draw.js";
 import { Vector as VectorLayer } from "ol/layer.js";
 import { Vector as VectorSource } from "ol/source.js";
 import { getLength, getArea } from "ol/sphere.js";
-import { Icon, Stroke, Style, Fill } from "ol/style.js";
+import { Stroke, Style, Fill } from "ol/style.js";
 
 import { displayError } from "../application/lib/errors.js";
 import { calculateFairwayCoordinates } from "../application/lib/geo.js";
@@ -65,9 +64,7 @@
   data() {
     return {
       projection: "EPSG:3857",
-      interaction: null,
-      vectorLayer: null,
-      vectorSource: null
+      interaction: null
     };
   },
   computed: {
@@ -82,61 +79,22 @@
     }
   },
   methods: {
-    drawStyleFunction(feature) {
-      // adapted from OpenLayer's LineString Arrow Example
-      var geometry = feature.getGeometry();
-      var styles = [
-        // linestring
-        new Style({
-          stroke: new Stroke({
-            color: "#369aca",
-            width: 2
-          })
-        })
-      ];
-
-      if (geometry.getType() === "LineString") {
-        geometry.forEachSegment(function(start, end) {
-          var dx = end[0] - start[0];
-          var dy = end[1] - start[1];
-          var rotation = Math.atan2(dy, dx);
-          // arrows
-          styles.push(
-            new Style({
-              geometry: new Point(end),
-              image: new Icon({
-                // we need to make sure the image is loaded by Vue Loader
-                src: require("../application/assets/linestring_arrow.png"),
-                // fiddling with the anchor's y value does not help to
-                // position the image more centered on the line ending, as the
-                // default line style seems to be slightly uncentered in the
-                // anti-aliasing, but the image is not placed with subpixel
-                // precision
-                anchor: [0.75, 0.5],
-                rotateWithView: true,
-                rotation: -rotation
-              })
-            })
-          );
-        });
-      }
-      return styles;
-    },
     removeCurrentInteraction() {
       this.$store.commit("map/setCurrentMeasurement", null);
-      this.vectorSource.clear();
+      this.getLayerByName("Draw Tool").data.getSource().clear();
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
     createInteraction(drawMode) {
-      this.vectorSource.clear();
+      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
+      drawVectorSrc.clear();
       var draw = new Draw({
-        source: this.vectorSource,
+        source: drawVectorSrc,
         type: drawMode,
         maxPoints: drawMode === "LineString" ? 2 : 50
       });
       draw.on("drawstart", () => {
-        this.vectorSource.clear();
+        drawVectorSrc.clear();
         this.$store.commit("map/setCurrentMeasurement", null);
         // we are not setting an id here, to avoid the regular identify to
         // pick it up
@@ -406,13 +364,8 @@
     }
   },
   mounted() {
-    this.vectorSource = new VectorSource({ wrapX: false });
-    this.vectorLayer = new VectorLayer({
-      source: this.vectorSource,
-      style: this.drawStyleFunction
-    });
     let map = new Map({
-      layers: [...this.layers.map(x => x.data), this.vectorLayer],
+      layers: [...this.layers.map(x => x.data)],
       target: "map",
       controls: [],
       view: new View({
--- a/client/src/store/map.js	Tue Nov 06 09:12:05 2018 +0100
+++ b/client/src/store/map.js	Tue Nov 06 10:00:13 2018 +0100
@@ -18,8 +18,16 @@
 import TileWMS from "ol/source/TileWMS.js";
 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
 import OSM from "ol/source/OSM";
-import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
+import {
+  Icon,
+  Stroke,
+  Style,
+  Fill,
+  Text,
+  Circle as CircleStyle
+} from "ol/style.js";
 import VectorSource from "ol/source/Vector.js";
+import Point from "ol/geom/Point.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { HTTP } from "../application/lib/http";
 
@@ -37,7 +45,8 @@
         data: new TileLayer({
           source: new OSM()
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Inland ECDIS chart Danube",
@@ -48,7 +57,8 @@
             params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Fairway Dimensions",
@@ -76,7 +86,8 @@
             ];
           }
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Waterway Area, named",
@@ -91,7 +102,8 @@
             })
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Waterway Area",
@@ -106,7 +118,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Waterway Axis",
@@ -122,7 +135,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Distance marks",
@@ -132,7 +146,8 @@
             strategy: bboxStrategy
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Bottlenecks",
@@ -150,7 +165,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Bottleneck isolines",
@@ -177,7 +193,8 @@
             } // TODO  tile.setState(TileState.ERROR);
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Distance marks, Axis",
@@ -213,7 +230,56 @@
             }
           }
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
+      },
+      {
+        name: "Draw Tool",
+        data: new VectorLayer({
+          source: new VectorSource({ wrapX: false }),
+          style: function(feature) {
+            // adapted from OpenLayer's LineString Arrow Example
+            var geometry = feature.getGeometry();
+            var styles = [
+              // linestring
+              new Style({
+                stroke: new Stroke({
+                  color: "#369aca",
+                  width: 2
+                })
+              })
+            ];
+
+            if (geometry.getType() === "LineString") {
+              geometry.forEachSegment(function(start, end) {
+                var dx = end[0] - start[0];
+                var dy = end[1] - start[1];
+                var rotation = Math.atan2(dy, dx);
+                // arrows
+                styles.push(
+                  new Style({
+                    geometry: new Point(end),
+                    image: new Icon({
+                      // we need to make sure the image is loaded by Vue Loader
+                      src: require("../application/assets/linestring_arrow.png"),
+                      // fiddling with the anchor's y value does not help to
+                      // position the image more centered on the line ending, as the
+                      // default line style seems to be slightly uncentered in the
+                      // anti-aliasing, but the image is not placed with subpixel
+                      // precision
+                      anchor: [0.75, 0.5],
+                      rotateWithView: true,
+                      rotation: -rotation
+                    })
+                  })
+                );
+              });
+            }
+            return styles;
+          }
+        }),
+        isVisible: true,
+        showInLegend: false
       }
     ]
   },
@@ -221,6 +287,9 @@
     layers: state => {
       return state.layers;
     },
+    layersForLegend: state => {
+      return state.layers.filter(layer => layer.showInLegend);
+    },
     getLayerByName: state => name => {
       return state.layers.find(layer => layer.name === name);
     }