Add ArcGIS Rest Service Layer UI

src/util/ArcGISRest.js

@@ -85,7 +85,29 @@ Ext.define('BasiGX.util.ArcGISRest', {
             }
 
             return url;
+        },
+
+        createMapServerUrl: function(serviceUrl, serverName, format) {
+            // TODO refactor with createFeatureServerUrl if code works
+            if (!BasiGX.util.ArcGISRest.isArcGISRestUrl(serviceUrl)) {
+                return;
+            }
+            var urlObj = new URL(serviceUrl);
+            var parts = urlObj.pathname.split('/');
+            if (parts[parts.length - 1] === '') {
+                parts.pop();
+            }
+            parts.pop();
+            parts.push(serverName);
+            parts.push('MapServer');
+            var path = parts.join('/');
+
+            var url = urlObj.origin + path;
+            if (format) {
+                url = BasiGX.util.Url.setQueryParam(url, 'f', format);
+            }
 
+            return url;
         },
 
         /**

src/view/form/AddArcGISRest.js

@@ -29,11 +29,16 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         'Ext.form.FieldSet',
         'Ext.form.field.ComboBox',
         'Ext.form.CheckboxGroup',
+        'Ext.tree.Panel',
         'Ext.Promise',
+        'Ext.data.TreeStore',
+        'Ext.data.Model',
+        'Ext.data.proxy.Ajax',
         'BasiGX.util.Map',
         'BasiGX.util.MsgBox',
         'BasiGX.util.Url',
-        'BasiGX.util.ArcGISRest'
+        'BasiGX.util.ArcGISRest',
+        'BasiGX.view.tree.ArcGISRestServiceTree'
     ],
 
     viewModel: {
@@ -67,7 +72,8 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
             msgInvalidUrl: 'Die angegebene URL ist keine valide ArcGISRest URL',
             documentation: '<h2>ArcGISRest Layer hinzufügen</h2>• In ' +
                 'diesem Dialog können Sie mit Hilfe einer ArcGISRest-URL ' +
-                'einen beliebigen Kartendienst der Karte hinzufügen.'
+                'einen beliebigen Kartendienst der Karte hinzufügen.',
+            serviceLayersVisibility: {}
         }
     },
 
@@ -360,16 +366,16 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
                 return layerConfig.service.type === 'FeatureServer';
             }
         );
+        var nonFeatureServers = Ext.Array.filter(
+            layerConfigs, function(layerConfig) {
+                return layerConfig.service.type !== 'FeatureServer';
+            }
+        );
         this.loadLayersOfFeatureServers(featureServers)
             .then(function(featureServerConfigs) {
-                layerConfigs = Ext.Array.filter(
-                    layerConfigs, function(layerConfig) {
-                        return layerConfig.service.type !== 'FeatureServer';
-                    }
-                );
-                layerConfigs = Ext.Array.merge(
-                    layerConfigs, featureServerConfigs);
-                this.fillAvailableLayersFieldset(layerConfigs);
+                var mergedConfigs = Ext.Array.merge(
+                    nonFeatureServers, featureServerConfigs);
+                this.fillAvailableLayersFieldset(mergedConfigs);
                 this.updateControlToolbarState();
                 this.setLoading(false);
             }.bind(this));
@@ -609,16 +615,23 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         var checkBoxes = [];
         var candidatesInitiallyChecked = me.getCandidatesInitiallyChecked();
         Ext.each(layers, function(layer) {
-            var boxLabel = layer.service.name;
-            if (layer.service.type === 'FeatureServer') {
-                boxLabel += '/' + layer.layer.name;
-            }
+            // var boxLabel = layer.service.name;
+            // if (layer.service.type === 'FeatureServer') {
+            //     boxLabel += '/' + layer.layer.name;
+            // }
+
             checkBoxes.push({
-                xtype: 'checkbox',
-                boxLabel: boxLabel,
-                checked: candidatesInitiallyChecked,
-                arcGISLayerConfig: layer
+                xtype: 'basigx-tree-arcgisrestservicetree',
+                arcGISLayerConfig: layer,
+                checked: candidatesInitiallyChecked
             });
+
+            // checkBoxes.push({
+            //     xtype: 'checkbox',
+            //     boxLabel: boxLabel,
+            //     checked: candidatesInitiallyChecked,
+            //     arcGISLayerConfig: layer
+            // });
         });
         cbGroup.add(checkBoxes);
 

src/view/tree/ArcGISRestServiceTree.js

@@ -0,0 +1,149 @@
+/* Copyright (c) 2022-present terrestris GmbH & Co. KG
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/**
+ * Used to add an ArcGIS REST layer to the map
+ *
+ * @class BasiGX.view.tree.ArcGISRestServiceTree
+ */
+Ext.define('BasiGX.view.tree.ArcGISRestServiceTree', {
+    extend: 'Ext.tree.Panel',
+    xtype: 'basigx-tree-arcgisrestservicetree',
+
+    requires: [
+        'GeoExt.data.model.ArcGISRestServiceLayer',
+        'BasiGX.util.ArcGISRest',
+        'Ext.tree.Column'
+    ],
+
+    config: {
+        /**
+         * Whether we will send the `X-Requested-With` header when fetching the
+         * document from the URL. The `X-Requested-With` header is
+         * usually added for XHR, but adding it should lead to a preflight
+         * request (see https://goo.gl/6JzdUI), which some servers fail.
+         *
+         * @type {Boolean}
+         */
+        useDefaultXhrHeader: false
+    },
+
+    arcGISLayerConfig: null,
+
+    checked: null,
+
+    columns: {
+        header: false,
+        items: [{
+            xtype: 'treecolumn',
+            renderer: function(v, metaData, record) {
+                if (!record.isRoot()) {
+                    var eyeGlyph = 'xf06e@FontAwesome';
+                    var eyeSlashGlyph = 'xf070@FontAwesome';
+                    if (record.get('visibility')) {
+                        metaData.glyph = eyeGlyph;
+                    } else {
+                        metaData.glyph = eyeSlashGlyph;
+                    }
+                }
+                return record.get('name');
+            }
+        }],
+        defaults: {
+            flex: 1
+        }
+    },
+
+    initComponent: function() {
+        var me = this;
+        me.callParent();
+
+        var rootLabel = me.arcGISLayerConfig.service.name;
+        if (me.arcGISLayerConfig.service.type === 'FeatureServer') {
+            rootLabel += '/' + me.arcGISLayerConfig.layer.name;
+        }
+
+        me.setStore({
+            model: 'GeoExt.data.model.ArcGISRestServiceLayer',
+            root: {
+                name: rootLabel,
+                children: []
+            },
+            listeners: {
+                'nodeexpand': me.onNodeExpand.bind(me)
+            }
+        });
+    },
+
+    onNodeExpand: function(expandedNode) {
+        var me = this;
+        if (expandedNode.hasChildNodes()) {
+            return;
+        }
+        var serviceUrl = BasiGX.util.ArcGISRest.createMapServerUrl(
+            this.arcGISLayerConfig.url,
+            this.arcGISLayerConfig.service.name,
+            'json'
+        );
+        // TODO requesting service and populating store should
+        // be done by parent component. We should only fire an event
+        this.requestService(serviceUrl)
+            .then(
+                function(response) {
+                    return me.onRequestServiceSuccess(response, expandedNode);
+                },
+                this.onRequestServiceFailure.bind(this)
+            );
+    },
+
+    requestService: function(serviceUrl) {
+        var me = this;
+        return new Ext.Promise(function (resolve, reject) {
+            Ext.Ajax.request({
+                url: serviceUrl,
+                method: 'GET',
+                useDefaultXhrHeader: me.getUseDefaultXhrHeader(),
+                success: function (response) {
+                    var respJson = Ext.decode(response.responseText);
+                    resolve(respJson);
+                },
+                failure: function (response) {
+                    reject(response.status);
+                }
+            });
+        });
+    },
+
+    onRequestServiceSuccess: function(response, expandedNode) {
+        var layers = Ext.Array.map(response.layers, function(layer) {
+            return Ext.create('GeoExt.data.model.ArcGISRestServiceLayer',{
+                layerId: layer.id,
+                name: layer.name,
+                // TODO remove this line as soon as we use our custom leaf item
+                text: layer.name + layer.defaultVisibility,
+                defaultVisibility: layer.defaultVisibility,
+                visibility: layer.defaultVisibility,
+                leaf: true
+            });
+        });
+        expandedNode.appendChild(layers);
+    },
+
+    onRequestServiceFailure: function(status) {
+        // TODO give feedback
+        console.log('failed to request service');
+    }
+
+});