Mercurial > gemma
diff client/src/store/map.js @ 2140:55bedb39295a
feat: clicking on stretches activates according layer
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 07 Feb 2019 10:30:44 +0100 |
parents | 602c2096c078 |
children | 8be0fbac2297 82867a69e10e |
line wrap: on
line diff
--- a/client/src/store/map.js Thu Feb 07 09:15:39 2019 +0100 +++ b/client/src/store/map.js Thu Feb 07 10:30:44 2019 +0100 @@ -33,6 +33,23 @@ import bbox from "@turf/bbox"; import app from "../main"; +const LAYERS = { + OPENSTREETMAP: "Open Streetmap", + INLANDECDIS: "Inland ECDIS chart Danube", + WATERWAYAREA: "Waterway Area", + STRETCHES: "Stretches", + FAIRWAYDIMENSIONSLOS1: "Fairway Dimensions LOS 1", + FAIRWAYDIMENSIONSLOS2: "Fairway Dimensions LOS 2", + FAIRWAYDIMENSIONSLOS3: "Fairway Dimensions LOS 3", + WATERWAYAXIS: "Waterway Axis", + BOTTLENECKS: "Bottlenecks", + BOTTLENECKISOLINE: "Bottleneck isolines", + DISTANCEMARKS: "Distance marks", + DISTANCEMARKSAXIS: "Distance marks, Axis", + DRAWTOOL: "Draw Tool", + CUTTOOL: "Cut Tool" +}; + // initial state const init = () => { return { @@ -51,7 +68,7 @@ isolinesLegendImgDataURL: "", layers: [ { - name: "Open Streetmap", + name: LAYERS.OPENSTREETMAP, data: new TileLayer({ source: new OSM() }), @@ -59,7 +76,7 @@ showInLegend: true }, { - name: "Inland ECDIS chart Danube", + name: LAYERS.INLANDECDIS, data: new TileLayer({ source: new TileWMS({ preload: 1, @@ -72,7 +89,7 @@ showInLegend: true }, { - name: "Waterway Area", + name: LAYERS.WATERWAYAREA, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy @@ -88,7 +105,7 @@ showInLegend: true }, { - name: "Stretches", + name: LAYERS.STRETCHES, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy @@ -107,7 +124,7 @@ showInLegend: true }, { - name: "Fairway Dimensions LOS 1", + name: LAYERS.FAIRWAYDIMENSIONSLOS1, data: new VectorLayer({ source: new VectorSource(), style: function() { @@ -136,7 +153,7 @@ showInLegend: true }, { - name: "Fairway Dimensions LOS 2", + name: LAYERS.FAIRWAYDIMENSIONSLOS2, data: new VectorLayer({ source: new VectorSource(), style: function() { @@ -165,7 +182,7 @@ showInLegend: true }, { - name: "Fairway Dimensions LOS 3", + name: LAYERS.FAIRWAYDIMENSIONSLOS3, data: new VectorLayer({ source: new VectorSource(), style: function() { @@ -194,7 +211,7 @@ showInLegend: true }, { - name: "Waterway Axis", + name: LAYERS.WATERWAYAXIS, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy @@ -211,7 +228,7 @@ showInLegend: true }, { - name: "Bottlenecks", + name: LAYERS.BOTTLENECKS, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy @@ -230,7 +247,7 @@ showInLegend: true }, { - name: "Bottleneck isolines", + name: LAYERS.BOTTLENECKISOLINE, data: new TileLayer({ source: new TileWMS({ preload: 0, @@ -258,7 +275,7 @@ showInLegend: true }, { - name: "Distance marks", + name: LAYERS.DISTANCEMARKS, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ source: new VectorSource({ @@ -269,7 +286,7 @@ showInLegend: true }, { - name: "Distance marks, Axis", + name: LAYERS.DISTANCEMARKSAXIS, forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ source: new VectorSource({ @@ -306,7 +323,7 @@ showInLegend: true }, { - name: "Draw Tool", + name: LAYERS.DRAWTOOL, data: new VectorLayer({ source: new VectorSource({ wrapX: false }), style: function(feature) { @@ -354,7 +371,7 @@ showInLegend: false }, { - name: "Cut Tool", + name: LAYERS.CUTTOOL, data: new VectorLayer({ source: new VectorSource({ wrapX: false }), style: function(feature) { @@ -425,6 +442,21 @@ extent: (state, extent) => { state.extent = extent; }, + setLayerVisible: (state, name) => { + const layer = state.layers.findIndex(l => l.name === name); + state.layers[layer].isVisible = true; + state.layers[layer].data.setVisible(true); + }, + setLayerInvisible: (state, name) => { + const layer = state.layers.findIndex(l => l.name === name); + state.layers[layer].isVisible = false; + state.layers[layer].data.setVisible(false); + }, + toggleVisibilityByName: (state, name) => { + const layer = state.layers.findIndex(l => l.name === name); + state.layers[layer].isVisible = !state.layers[layer].isVisible; + state.layers[layer].data.setVisible(state.layers[layer].isVisible); + }, toggleVisibility: (state, layer) => { state.layers[layer].isVisible = !state.layers[layer].isVisible; state.layers[layer].data.setVisible(state.layers[layer].isVisible); @@ -645,3 +677,5 @@ } } }; + +export { LAYERS };