Mercurial > gemma

changeset 967:2025074ad835

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: extracted layer configuration to layers
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 17 Oct 2018 15:51:48 +0200
parents 6114c512508b
children a4fe07a21ba7
files client/src/layers/layers.js client/src/map/store.js
diffstat 2 files changed, 197 insertions(+), 192 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/layers/layers.js	Wed Oct 17 15:51:48 2018 +0200
@@ -0,0 +1,195 @@
+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 VectorSource from "ol/source/Vector.js";
+import { bbox as bboxStrategy } from "ol/loadingstrategy";
+import { HTTP } from "../application/lib/http";
+
+const layers = [
+  {
+    name: "Open Streetmap",
+    data: new TileLayer({
+      source: new OSM()
+    }),
+    isVisible: true
+  },
+  {
+    name: "Inland ECDIS chart Danube",
+    data: new TileLayer({
+      source: new TileWMS({
+        preload: 1,
+        url: "https://demo.d4d-portal.info/wms",
+        params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
+      })
+    }),
+    isVisible: true
+  },
+  {
+    name: "Fairway Dimensions",
+    data: new VectorLayer({
+      source: new VectorSource(),
+      style: function(feature) {
+        return [
+          new Style({
+            stroke: new Stroke({
+              color: "rgba(0, 0, 255, 1.0)",
+              width: 2
+            })
+          }),
+          new Style({
+            text: new Text({
+              font: 'bold 12px "Open Sans", "sans-serif"',
+              placement: "line",
+              fill: new Fill({
+                color: "black"
+              }),
+              text: "LOS: " + feature.get("level_of_service").toString()
+              //, zIndex: 10
+            })
+          })
+        ];
+      }
+    }),
+    isVisible: true
+  },
+  {
+    name: "Waterway Area, named",
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: "rgba(0, 132, 0, 1)",
+          width: 2
+        })
+      })
+    }),
+    isVisible: false
+  },
+  {
+    name: "Waterway Area",
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: "rgba(0, 102, 0, 1)",
+          width: 2
+        })
+      })
+    }),
+    isVisible: true
+  },
+  {
+    name: "Waterway Axis",
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: "rgba(0, 0, 255, .5)",
+          lineDash: [5, 5],
+          width: 2
+        })
+      })
+    }),
+    isVisible: true
+  },
+  {
+    name: "Distance marks",
+    forLegendStyle: { point: true, resolution: 8 },
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      })
+    }),
+    isVisible: false
+  },
+  {
+    name: "Bottlenecks",
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: "rgba(230, 230, 10, .8)",
+          width: 4
+        }),
+        fill: new Fill({
+          color: "rgba(230, 230, 10, .3)"
+        })
+      })
+    }),
+    isVisible: true
+  },
+  {
+    name: "Bottleneck isolines",
+    data: new TileLayer({
+      source: new TileWMS({
+        preload: 0,
+        projection: "EPSG:3857",
+        url: window.location.origin + "/api/internal/wms",
+        params: {
+          LAYERS: "sounding_results_contour_lines_geoserver",
+          VERSION: "1.1.1",
+          TILED: true
+        },
+        tileLoadFunction: function(tile, src) {
+          // console.log("calling for", tile, src);
+          HTTP.get(src, {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token")
+            },
+            responseType: "blob"
+          }).then(response => {
+            tile.getImage().src = URL.createObjectURL(response.data);
+          });
+        } // TODO  tile.setState(TileState.ERROR);
+      })
+    }),
+    isVisible: false
+  },
+  {
+    name: "Distance marks, Axis",
+    forLegendStyle: { point: true, resolution: 8 },
+    data: new VectorLayer({
+      source: new VectorSource({
+        strategy: bboxStrategy
+      }),
+      style: function(feature, resolution) {
+        if (resolution < 10) {
+          var s = new Style({
+            image: new CircleStyle({
+              radius: 5,
+              fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
+              stroke: new Stroke({ color: "blue", width: 1 })
+            })
+          });
+          if (resolution < 6) {
+            s.setText(
+              new Text({
+                offsetY: 12,
+                font: '10px "Open Sans", "sans-serif"',
+                fill: new Fill({
+                  color: "black"
+                }),
+                text: (feature.get("hectometre") / 10).toString()
+              })
+            );
+          }
+          return s;
+        } else {
+          return [];
+        }
+      }
+    }),
+    isVisible: true
+  }
+];
+
+export { layers };
--- a/client/src/map/store.js	Wed Oct 17 15:47:38 2018 +0200
+++ b/client/src/map/store.js	Wed Oct 17 15:51:48 2018 +0200
@@ -1,202 +1,12 @@
 //import { HTTP } from "../lib/http";
 
-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 VectorSource from "ol/source/Vector.js";
-import { bbox as bboxStrategy } from "ol/loadingstrategy";
-import { HTTP } from "../application/lib/http";
+import { layers } from "../layers/layers";
 
 const MapStore = {
   namespaced: true,
   state: {
     openLayersMap: null,
-    layers: [
-      {
-        name: "Open Streetmap",
-        data: new TileLayer({
-          source: new OSM()
-        }),
-        isVisible: true
-      },
-      {
-        name: "Inland ECDIS chart Danube",
-        data: new TileLayer({
-          source: new TileWMS({
-            preload: 1,
-            url: "https://demo.d4d-portal.info/wms",
-            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
-          })
-        }),
-        isVisible: true
-      },
-      {
-        name: "Fairway Dimensions",
-        data: new VectorLayer({
-          source: new VectorSource(),
-          style: function(feature) {
-            return [
-              new Style({
-                stroke: new Stroke({
-                  color: "rgba(0, 0, 255, 1.0)",
-                  width: 2
-                })
-              }),
-              new Style({
-                text: new Text({
-                  font: 'bold 12px "Open Sans", "sans-serif"',
-                  placement: "line",
-                  fill: new Fill({
-                    color: "black"
-                  }),
-                  text: "LOS: " + feature.get("level_of_service").toString()
-                  //, zIndex: 10
-                })
-              })
-            ];
-          }
-        }),
-        isVisible: true
-      },
-      {
-        name: "Waterway Area, named",
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(0, 132, 0, 1)",
-              width: 2
-            })
-          })
-        }),
-        isVisible: false
-      },
-      {
-        name: "Waterway Area",
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(0, 102, 0, 1)",
-              width: 2
-            })
-          })
-        }),
-        isVisible: true
-      },
-      {
-        name: "Waterway Axis",
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(0, 0, 255, .5)",
-              lineDash: [5, 5],
-              width: 2
-            })
-          })
-        }),
-        isVisible: true
-      },
-      {
-        name: "Distance marks",
-        forLegendStyle: { point: true, resolution: 8 },
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          })
-        }),
-        isVisible: false
-      },
-      {
-        name: "Bottlenecks",
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(230, 230, 10, .8)",
-              width: 4
-            }),
-            fill: new Fill({
-              color: "rgba(230, 230, 10, .3)"
-            })
-          })
-        }),
-        isVisible: true
-      },
-      {
-        name: "Bottleneck isolines",
-        data: new TileLayer({
-          source: new TileWMS({
-            preload: 0,
-            projection: "EPSG:3857",
-            url: window.location.origin + "/api/internal/wms",
-            params: {
-              LAYERS: "sounding_results_contour_lines_geoserver",
-              VERSION: "1.1.1",
-              TILED: true
-            },
-            tileLoadFunction: function(tile, src) {
-              // console.log("calling for", tile, src);
-              HTTP.get(src, {
-                headers: {
-                  "X-Gemma-Auth": localStorage.getItem("token")
-                },
-                responseType: "blob"
-              }).then(response => {
-                tile.getImage().src = URL.createObjectURL(response.data);
-              });
-            } // TODO  tile.setState(TileState.ERROR);
-          })
-        }),
-        isVisible: false
-      },
-      {
-        name: "Distance marks, Axis",
-        forLegendStyle: { point: true, resolution: 8 },
-        data: new VectorLayer({
-          source: new VectorSource({
-            strategy: bboxStrategy
-          }),
-          style: function(feature, resolution) {
-            if (resolution < 10) {
-              var s = new Style({
-                image: new CircleStyle({
-                  radius: 5,
-                  fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
-                  stroke: new Stroke({ color: "blue", width: 1 })
-                })
-              });
-              if (resolution < 6) {
-                s.setText(
-                  new Text({
-                    offsetY: 12,
-                    font: '10px "Open Sans", "sans-serif"',
-                    fill: new Fill({
-                      color: "black"
-                    }),
-                    text: (feature.get("hectometre") / 10).toString()
-                  })
-                );
-              }
-              return s;
-            } else {
-              return [];
-            }
-          }
-        }),
-        isVisible: true
-      }
-    ],
+    layers: layers,
     // note that some identified features may not have an id
     // especially related to drawing in our own vector layer
     identifiedFeatures: [],