# HG changeset patch # User Markus Kottlaender # Date 1541494813 -3600 # Node ID 035dc35e1dfcbb986ebb5ef7dceefffceb29bfbb # Parent 6d4cc4389c8fbd222c6502801e44fcf367f105e4 moved draw layer in map store's layers property and added a flag for layers to show in legend or not diff -r 6d4cc4389c8f -r 035dc35e1dfc client/src/layers/Layers.vue --- 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 @@
- +
@@ -80,7 +80,7 @@ Layerselect }, computed: { - ...mapGetters("map", ["layers"]), + ...mapGetters("map", ["layersForLegend"]), layerSelectStyle() { return { "ui-element": true, diff -r 6d4cc4389c8f -r 035dc35e1dfc client/src/map/Maplayer.vue --- 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({ diff -r 6d4cc4389c8f -r 035dc35e1dfc client/src/store/map.js --- 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); }