changeset 3641:32d7bb1afdc9 configuration

client: configuration: support wms services with nested layers
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 16:10:25 +0200
parents 158d55ec2042
children 6bb8def12f20
files client/src/components/map/layers.js client/src/components/systemconfiguration/MapLayers.vue schema/default_sysconfig.sql
diffstat 3 files changed, 38 insertions(+), 20 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/layers.js	Wed Jun 12 12:16:52 2019 +0200
+++ b/client/src/components/map/layers.js	Wed Jun 12 16:10:25 2019 +0200
@@ -230,9 +230,9 @@
         visible: true,
         source: new ImageSource({
           preload: 1,
-          url: "https://service.d4d-portal.info/wms/",
+          url: store.state.application.config.ecdis_wms_url,
           crossOrigin: "anonymous",
-          params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
+          params: JSON.parse(store.state.application.config.ecdis_wms_params)
         })
       }),
       new ImageLayer({
--- a/client/src/components/systemconfiguration/MapLayers.vue	Wed Jun 12 12:16:52 2019 +0200
+++ b/client/src/components/systemconfiguration/MapLayers.vue	Wed Jun 12 16:10:25 2019 +0200
@@ -13,7 +13,7 @@
               class="form-control"
               placeholder="https://..."
               @input="lookupWMSCapabilities()"
-              v-model="config.ecdis_url"
+              v-model="config.ecdis_wms_url"
             />
           </div>
           <label for="ecdis-layers">
@@ -29,7 +29,7 @@
           <div class="container-fluid">
             <div class="row">
               <div
-                class="custom-control custom-checkbox col-sm-3"
+                class="custom-control custom-checkbox col-sm-4"
                 v-for="layer in availableWMSLayers"
                 :key="'layer-' + layer"
               >
@@ -40,7 +40,10 @@
                   :id="'layer-' + layer"
                   :value="layer"
                 />
-                <label class="custom-control-label" :for="'layer-' + layer">
+                <label
+                  class="custom-control-label text-break"
+                  :for="'layer-' + layer"
+                >
                   {{ layer }}
                 </label>
               </div>
@@ -83,7 +86,8 @@
       selectedWMSLayers: [],
       availableWMSLayers: [],
       availableWMSLayersLoading: false,
-      lookupWMSCapabilitiesTimeout: null
+      lookupWMSCapabilitiesTimeout: null,
+      wmsVersion: ""
     };
   },
   computed: {
@@ -97,7 +101,7 @@
       this.lookupWMSCapabilitiesTimeout = setTimeout(() => {
         let url;
         try {
-          let urlParts = new URL(this.config.ecdis_url);
+          let urlParts = new URL(this.config.ecdis_wms_url);
           url =
             urlParts.protocol +
             "//" +
@@ -105,17 +109,15 @@
             urlParts.pathname.trim("/") +
             "/";
         } catch (e) {
-          url = this.config.ecdis_url;
+          url = this.config.ecdis_wms_url;
         }
         this.availableWMSLayersLoading = true;
         HTTP.get(url + "?request=GetCapabilities&service=WMS")
           .then(response => {
             let capabilities = WMSCapabilitiesParser.read(response.data);
-            let layers = [];
-            capabilities.Capability.Layer.Layer.forEach(l =>
-              layers.push(l.Name)
-            );
-            this.availableWMSLayers = layers;
+            this.wmsVersion = capabilities.version;
+            this.availableWMSLayers = [];
+            this.getLayersRecursive(capabilities.Capability.Layer.Layer);
           })
           .catch(() => {
             this.availableWMSLayers = [];
@@ -123,17 +125,33 @@
           .finally(() => (this.availableWMSLayersLoading = false));
       }, 500);
     },
+    getLayersRecursive(layers) {
+      layers.forEach(l => {
+        if (l.hasOwnProperty("Layer")) {
+          this.getLayersRecursive(l.Layer);
+        } else {
+          this.availableWMSLayers.push(l.Name);
+        }
+      });
+    },
     submit() {
       this.$store.dispatch("application/saveConfig", {
-        ecdis_url: this.config.ecdis_url,
-        ecdis_layers: this.selectedWMSLayers
-          .filter(l => this.availableWMSLayers.includes(l))
-          .join(",")
+        ecdis_wms_url: this.config.ecdis_wms_url,
+        ecdis_wms_params: JSON.stringify({
+          LAYERS: this.selectedWMSLayers
+            .filter(l => this.availableWMSLayers.find(al => al === l))
+            .join(","),
+          VERSION: this.wmsVersion,
+          TILED: true
+        })
       });
     }
   },
   mounted() {
-    this.selectedWMSLayers = this.config.ecdis_layers.split(",");
+    let ecdisWmsParams = JSON.parse(this.config.ecdis_wms_params);
+    if (ecdisWmsParams.LAYERS) {
+      this.selectedWMSLayers = ecdisWmsParams.LAYERS.split(",");
+    }
     this.lookupWMSCapabilities();
   }
 };
--- a/schema/default_sysconfig.sql	Wed Jun 12 12:16:52 2019 +0200
+++ b/schema/default_sysconfig.sql	Wed Jun 12 16:10:25 2019 +0200
@@ -26,8 +26,8 @@
 --
 -- Settings
 --
-INSERT INTO sys_admin.system_config VALUES ('ecdis_url', 'https://service.d4d-portal.info/wms/');
-INSERT INTO sys_admin.system_config VALUES ('ecdis_layers', 'd4d');
+INSERT INTO sys_admin.system_config VALUES ('ecdis_wms_url', 'https://service.d4d-portal.info/wms/');
+INSERT INTO sys_admin.system_config VALUES ('ecdis_wms_params', '{"LAYERS": "d4d", "VERSION": "1.1.1", "TILED": true}');
 INSERT INTO sys_admin.system_config VALUES ('bn_revtime_multiplier', 1.5);
 INSERT INTO sys_admin.system_config VALUES ('gm_min_values_14d', 1224);
 INSERT INTO sys_admin.system_config VALUES ('gm_latest_hours', 24);