Mercurial > gemma

changeset 3081:9107c959bb3b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: Changed distance marks ashore to WMS layer.
author Raimund Renkert <raimund.renkert@intevation.de>
date Thu, 18 Apr 2019 13:26:02 +0200
parents 22857a12ed9e
children a1ae3b734a9f
files client/src/components/identify/formatter.js client/src/components/map/layers.js client/src/store/map.js
diffstat 3 files changed, 53 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/formatter.js	Thu Apr 18 13:22:09 2019 +0200
+++ b/client/src/components/identify/formatter.js	Thu Apr 18 13:26:02 2019 +0200
@@ -38,6 +38,9 @@
   distance_marks_geoserver: {
     label: "Distance Mark"
   },
+  distance_marks_ashore_geoserver: {
+    label: "Distance Mark ashore"
+  },
   waterway_axis: {
     label: "Waterway Axis"
   },
--- a/client/src/components/map/layers.js	Thu Apr 18 13:22:09 2019 +0200
+++ b/client/src/components/map/layers.js	Thu Apr 18 13:26:02 2019 +0200
@@ -332,25 +332,30 @@
           source
         });
       })(),
-      (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["distance_marks_ashore_geoserver"],
-              geometryName: "geom"
-            },
-            source
-          )
-        );
-        return new VectorLayer({
-          id: "DISTANCEMARKS",
-          label: "Distance marks",
-          forLegendStyle: { point: true, resolution: 8 },
-          visible: false,
-          source
-        });
-      })(),
+      new ImageLayer({
+        id: "DISTANCEMARKS",
+        label: "Distance Marks",
+        maxResolution: 10,
+        minResolution: 0,
+        source: new ImageSource({
+          url: window.location.origin + "/api/internal/wms",
+          params: {
+            LAYERS: "distance_marks_ashore_geoserver",
+            VERSION: "1.1.1",
+            TILED: true
+          },
+          imageLoadFunction: function(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);
+        })
+      }),
       new ImageLayer({
         id: "DISTANCEMARKSAXIS",
         label: "Distance Marks, Axis",
--- a/client/src/store/map.js	Thu Apr 18 13:22:09 2019 +0200
+++ b/client/src/store/map.js	Thu Apr 18 13:26:02 2019 +0200
@@ -446,6 +446,32 @@
             commit("addIdentifiedFeatures", features);
           });
         }
+        var dmSource = map.getLayer("DISTANCEMARKS").getSource();
+        var dmUrl = dmSource.getGetFeatureInfoUrl(
+          event.coordinate,
+          100 /* resolution */,
+          "EPSG:3857",
+          // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d
+          { INFO_FORMAT: "application/json" }
+        );
+
+        if (dmUrl) {
+          HTTP.get(dmUrl + "&BUFFER=5", {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token")
+            }
+          }).then(response => {
+            let features = response.data.features.map(f => {
+              let feat = new Feature({
+                geometry: new Point(f.geometry.coordinates)
+              });
+              feat.setId(f.id);
+              feat.setProperties(f.properties);
+              return feat;
+            });
+            commit("addIdentifiedFeatures", features);
+          });
+        }
         var dmaSource = map.getLayer("DISTANCEMARKSAXIS").getSource();
         var dmaUrl = dmaSource.getGetFeatureInfoUrl(
           event.coordinate,