Mercurial > gemma

changeset 4942:c4d84be3a476 fairway-marks-import

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add fairwaymarks layer
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 18 Feb 2020 09:10:05 +0100
parents 9f9d72a1d398
children 4c57d80ad7a7
files client/src/components/layers/Layers.vue client/src/components/map/layers.js
diffstat 2 files changed, 51 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue	Mon Feb 17 14:47:54 2020 +0100
+++ b/client/src/components/layers/Layers.vue	Tue Feb 18 09:10:05 2020 +0100
@@ -37,6 +37,7 @@
         <Layerselect layerId="DISTANCEMARKS" />
         <Layerselect layerId="DISTANCEMARKSAXIS" />
         <Layerselect layerId="GAUGES" />
+        <Layerselect layerId="FAIRWAYMARKS" />
         <Layerselect v-if="reviewActive" layerId="FDREVIEWLAYER" />
       </div>
       <UISpinnerOverlay v-else style="top: 34px;" />
--- a/client/src/components/map/layers.js	Mon Feb 17 14:47:54 2020 +0100
+++ b/client/src/components/map/layers.js	Tue Feb 18 09:10:05 2020 +0100
@@ -1,20 +1,21 @@
-import TileWMS from "ol/source/TileWMS";
+import { GeoJSON, WFS } from "ol/format";
+import { Icon, Stroke, Style } from "ol/style";
 import {
+  Image as ImageLayer,
   Tile as TileLayer,
-  Vector as VectorLayer,
-  Image as ImageLayer
+  Vector as VectorLayer
 } from "ol/layer";
-import { Icon, Stroke, Style } from "ol/style";
-import VectorSource from "ol/source/Vector";
+import { and as andFilter, equalTo } from "ol/format/filter";
+
+import { HTTP } from "@/lib/http";
 import { ImageWMS as ImageSource } from "ol/source";
+import OSM from "ol/source/OSM";
 import Point from "ol/geom/Point";
+import TileWMS from "ol/source/TileWMS";
+import VectorSource from "ol/source/Vector";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
-import { WFS, GeoJSON } from "ol/format";
-import OSM from "ol/source/OSM";
-import { equalTo, and as andFilter } from "ol/format/filter";
-import { HTTP } from "@/lib/http";
+import store from "@/store/index";
 import { styleFactory } from "./styles";
-import store from "@/store/index";
 
 export const buildVectorLoader = (
   featureRequestOptions,
@@ -260,7 +261,11 @@
           minResolution: 0,
           source: new ImageSource({
             url: window.location.origin + "/api/internal/wms",
-            params: { LAYERS: "waterway_area", VERSION: "1.1.1", TILED: true },
+            params: {
+              LAYERS: "waterway_area",
+              VERSION: "1.1.1",
+              TILED: true
+            },
             imageLoadFunction: function(tile, src) {
               HTTP.get(src, {
                 headers: {
@@ -476,7 +481,11 @@
           label: "Waterway Axis",
           source: new ImageSource({
             url: window.location.origin + "/api/internal/wms",
-            params: { LAYERS: "waterway_axis", VERSION: "1.1.1", TILED: true },
+            params: {
+              LAYERS: "waterway_axis",
+              VERSION: "1.1.1",
+              TILED: true
+            },
             imageLoadFunction: function(tile, src) {
               HTTP.get(src, {
                 headers: {
@@ -668,6 +677,35 @@
             source
           });
         })(),
+        new TileLayer({
+          id: "FAIRWAYMARKS",
+          label: "Fairway marks",
+          visible: false,
+          source: new TileWMS({
+            preload: 0,
+            projection: "EPSG:3857",
+            url: window.location.origin + "/api/internal/wms",
+            params: {
+              LAYERS: "fairway_marks",
+              VERSION: "1.1.1",
+              TILED: true
+            },
+            tileLoadFunction: function(tile, src) {
+              HTTP.get(src, {
+                headers: {
+                  "X-Gemma-Auth": localStorage.getItem("token")
+                },
+                responseType: "blob"
+              })
+                .then(response => {
+                  tile.getImage().src = URL.createObjectURL(response.data);
+                })
+                .catch(() => {
+                  store.dispatch("application/reportBackendError");
+                });
+            } // TODO  tile.setState(TileState.ERROR);
+          })
+        }),
         DRAWLAYER,
         CUTLAYER,
         FDREVIEWLAYER