gemma: client/src/store/map.js comparison

comparison 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

comparison

equal deleted inserted replaced

-:22bbd0d0500e
+:55bedb39295a
 import { getCenter } from "ol/extent";
 import { transformExtent } from "ol/proj.js";
 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 {
 openLayersMap: null,
 extent: {
 polygonTool: null, // open layers interaction object (Draw)
 cutTool: null, // open layers interaction object (Draw)
 isolinesLegendImgDataURL: "",
 layers: [
 {
-name: "Open Streetmap",
+name: LAYERS.OPENSTREETMAP,
 data: new TileLayer({
 source: new OSM()
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Inland ECDIS chart Danube",
+name: LAYERS.INLANDECDIS,
 data: new TileLayer({
 source: new TileWMS({
 preload: 1,
 url: "https://service.d4d-portal.info/wms/",
 crossOrigin: "anonymous",
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Waterway Area",
+name: LAYERS.WATERWAYAREA,
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 }),
 style: new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Stretches",
+name: LAYERS.STRETCHES,
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 }),
 style: new Style({
 }),
 isVisible: false,
 showInLegend: true
 },
 {
-name: "Fairway Dimensions LOS 1",
+name: LAYERS.FAIRWAYDIMENSIONSLOS1,
 data: new VectorLayer({
 source: new VectorSource(),
 style: function() {
 return [
 new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Fairway Dimensions LOS 2",
+name: LAYERS.FAIRWAYDIMENSIONSLOS2,
 data: new VectorLayer({
 source: new VectorSource(),
 style: function() {
 return [
 new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Fairway Dimensions LOS 3",
+name: LAYERS.FAIRWAYDIMENSIONSLOS3,
 data: new VectorLayer({
 source: new VectorSource(),
 style: function() {
 return [
 new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Waterway Axis",
+name: LAYERS.WATERWAYAXIS,
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 }),
 style: new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Bottlenecks",
+name: LAYERS.BOTTLENECKS,
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 }),
 style: new Style({
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Bottleneck isolines",
+name: LAYERS.BOTTLENECKISOLINE,
 data: new TileLayer({
 source: new TileWMS({
 preload: 0,
 projection: "EPSG:3857",
 url: window.location.origin + "/api/internal/wms",
 }),
 isVisible: false,
 showInLegend: true
 },
 {
-name: "Distance marks",
+name: LAYERS.DISTANCEMARKS,
 forLegendStyle: { point: true, resolution: 8 },
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 })
 }),
 isVisible: false,
 showInLegend: true
 },
 {
-name: "Distance marks, Axis",
+name: LAYERS.DISTANCEMARKSAXIS,
 forLegendStyle: { point: true, resolution: 8 },
 data: new VectorLayer({
 source: new VectorSource({
 strategy: bboxStrategy
 }),
 }),
 isVisible: true,
 showInLegend: true
 },
 {
-name: "Draw Tool",
+name: LAYERS.DRAWTOOL,
 data: new VectorLayer({
 source: new VectorSource({ wrapX: false }),
 style: function(feature) {
 // adapted from OpenLayer's LineString Arrow Example
 var geometry = feature.getGeometry();
 }),
 isVisible: true,
 showInLegend: false
 },
 {
-name: "Cut Tool",
+name: LAYERS.CUTTOOL,
 data: new VectorLayer({
 source: new VectorSource({ wrapX: false }),
 style: function(feature) {
 // adapted from OpenLayer's LineString Arrow Example
 var geometry = feature.getGeometry();
 }
 },
 mutations: {
 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);
 },
 );
 }
 }
 }
 };
+export { LAYERS };