Map viewer - support to add layers from ESRI Rest services (#5931)

* Map viewer - support to add layers from ESRI Rest services * Map viewer - support to add layers from ESRI Rest services - code improvements * Map viewer - support to add layers from ESRI Rest services - rename gnMap.addEsriRestFromScratch method
geonetwork · Nov 8, 2021 · 695c20e · 695c20e
1 parent 30f8b35
commit 695c20e
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 24 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/common/map/esriService.js b/web-ui/src/main/resources/catalog/components/common/map/esriService.js
@@ -33,8 +33,8 @@
   var TITLE_FONT = 'bold ' + FONT_SIZE + 'px sans-serif';
   var LABEL_FONT = FONT_SIZE + 'px sans-serif';
 
-  module.service('gnEsriUtils', ['$q',
-    function($q) {
+  module.service('gnEsriUtils', ['$q', '$http', '$translate', 'gnUrlUtils',
+    function($q, $http, $translate, gnUrlUtils) {
       return {
         /**
          * Renders a JSON legend asynchronously to an image
@@ -160,6 +160,40 @@
             }
           }
           return [width, height];
+        },
+
+        /**
+         * Returns a promise resolving to the capabilities document of an ESRI Rest service.
+         * @param {String} url
+         * @return {Promise<String>} capabilities document
+         */
+        getCapabilities: function(url) {
+          var timeout = 60 * 1000;
+          var defer = $q.defer();
+
+          url = gnUrlUtils.append(url,
+            gnUrlUtils.toKeyValue({
+              f: 'json'
+            }));
+
+          $http.get(url, {
+            cache: true,
+            timeout: timeout
+          })
+            .success(function(data, status, headers, config) {
+              // Check if the response contains a mapName property,
+              // to verify it's an ESRI Rest Capabilities document.
+              if (!!data.mapName) {
+                defer.resolve(data);
+              } else {
+                defer.reject($translate.instant('esriCapabilitiesNoValid'));
+              }
+            })
+            .error(function(data, status, headers, config) {
+              defer.reject($translate.instant('esriCapabilitiesFailed'));
+            });
+
+          return defer.promise;
         }
       }
     }

diff --git a/web-ui/src/main/resources/catalog/components/common/map/mapService.js b/web-ui/src/main/resources/catalog/components/common/map/mapService.js
@@ -86,13 +86,10 @@
         };
         var getLayerInMap = function(map, name, url, style) {
           if (gnWmsQueue.isPending(url, name, style)) {
-            return true;
+            return null;
           }
 
-          if(getTheLayerFromMap(map, name, url, style) != null) {
-            return true;
-          }
-          return null;
+          return getTheLayerFromMap(map, name, url, style);
         };
 
         /**
@@ -121,6 +118,19 @@
                 return l;
               }
             }
+            else if (source instanceof ol.source.ImageArcGISRest) {
+              if (!!name) {
+                if ((url.indexOf(source.getUrl()) == 0) &&
+                  source.getParams().LAYERS == "show:" + name) {
+                  return l;
+                }
+              } else {
+                if (source.getUrl() == url) {
+                  return l;
+                }
+              }
+
+            }
           }
           return null;
         };
@@ -1432,19 +1442,41 @@
             return defer.promise;
           },
 
-          addEsriRestFromScratch: function(map, url, name, createOnly, md) {
+          /**
+           * @ngdoc method
+           * @methodOf gn_map.addEsriRestLayer:gnMap
+           * @name gnMap#addEsriRestLayer
+           *
+           * @description
+           * Here is the method to use when you want to add a ESRIREst layer from
+           * a url and a name (layer identifier).
+           *
+           * Return a promise with ol.Layer as data is succeed, and url/name
+           * if failure.
+           * If createOnly, we don't add the layer to the map.
+           * If the md object is given, we add it to the layer, or we try
+           * to retrieve it in the catalog
+           *
+           * @param {ol.Map} map to add the layer
+           * @param {string} url of the service
+           * @param {string} name of the layer (identifier)
+           * @param {boolean} createOnly or add it to the map
+           * @param {!Object} md object
+           */
+          addEsriRestLayer: function(map, url, name, createOnly, md) {
             if (url === '') {
               var error = "Trying to add an ESRI layer with no service URL. Layer name is " + name + ". Check the metadata or the map.";
               console.warn(error);
               return $q.reject(error);
             }
             var serviceUrl = url.replace(/(.*\/MapServer).*/, '$1');
-            var layer = !!name && parseInt(name).toString() === name
+            var layer = angular.isNumber(name)
               ? name
               : url.replace(/.*\/([^\/]*)\/MapServer\/?(.*)/, '$2');
             name = url.replace(/.*\/([^\/]*)\/MapServer\/?(.*)/, '$1 $2');
 
-            var olLayer = getTheLayerFromMap(map, name, url);
+            // Use the url and the layer identifier to check if the layer exists
+            var olLayer = getTheLayerFromMap(map, layer, url);
             if (olLayer !== null) {
               if(md) {
                 olLayer.set('md', md);
@@ -2021,7 +2053,7 @@
                       opt);
                   break;
                 }
-                this.addEsriRestFromScratch(map, opt.url, opt.name)
+                this.addEsriRestLayer(map, opt.url, opt.name)
                     .then(function(layer) {
                       if (title) {
                         layer.set('title', title);

diff --git a/web-ui/src/main/resources/catalog/components/viewer/ViewerDirective.js b/web-ui/src/main/resources/catalog/components/viewer/ViewerDirective.js
@@ -183,7 +183,7 @@
 
                   var loadLayerPromise = gnMap[
                       config.type === 'wmts' ? 'addWmtsFromScratch' :
-                        (config.type === 'esrirest' ? 'addEsriRestFromScratch' : 'addWmsFromScratch')
+                        (config.type === 'esrirest' ? 'addEsriRestLayer' : 'addWmsFromScratch')
                       ](
                       scope.map, config.url,
                       config.name, undefined, config.md);

diff --git a/web-ui/src/main/resources/catalog/components/viewer/owscontext/OwsContextService.js b/web-ui/src/main/resources/catalog/components/viewer/owscontext/OwsContextService.js
@@ -649,7 +649,7 @@
           if (type === 'wmts') {
             promise = gnMap.addWmtsFromScratch(map, res.href, name, createOnly);
           } else if (type === 'arcgis') {
-            promise = gnMap.addEsriRestFromScratch(map, res.href, name, createOnly);
+            promise = gnMap.addEsriRestLayer(map, res.href, name, createOnly);
           }
 
           // if it's not WMTS, let's assume it is wms

diff --git a/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html b/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html
@@ -178,6 +178,11 @@ <h3>{{'AddALayer' | translate}}
                gn-wms-import-map="map"
                gn-wms-import-url="addLayerUrl.wfs"
                services-list-from-catalog="true"></div>
+
+          <div gn-wms-import="esrirest"
+               gn-wms-import-map="map"
+               gn-wms-import-url="addLayerUrl.esrirest"
+               services-list-from-catalog="true"></div>
         </tab>
         <tab heading="{{'addLayerFromFiles' | translate}}"
              active="addLayerTabs.kml"

diff --git a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js
@@ -37,6 +37,7 @@
    */
   module.directive('gnWmsImport', [
     'gnOwsCapabilities',
+    'gnEsriUtils',
     'gnAlertService',
     'gnMap',
     '$translate',
@@ -46,7 +47,7 @@
     'gnViewerSettings',
     'gnGlobalSettings',
     'gnSearchSettings',
-    function(gnOwsCapabilities, gnAlertService, gnMap, $translate, $timeout,
+    function(gnOwsCapabilities, gnEsriUtils, gnAlertService, gnMap, $translate, $timeout,
              gnESClient, Metadata, gnViewerSettings,
              gnGlobalSettings, gnSearchSettings) {
       return {
@@ -101,10 +102,14 @@
               console.log($scope.format+ ' not supported');
             }
           };
+
+          this.addEsriRestLayer = function(getCapLayer) {
+            return gnMap.addEsriRestLayer($scope.map, $scope.url + '/' + getCapLayer.id , null, null, null);
+          };
         }],
         link: function(scope, element, attrs) {
           scope.loading = false;
-          scope.error = {wms: null, wmts: null, wfs: null};
+          scope.error = {wms: null, wmts: null, wfs: null, esrirest: null};
           scope.format = attrs['gnWmsImport'] != '' ?
               attrs['gnWmsImport'] : 'all';
           scope.serviceDesc = null;
@@ -177,21 +182,33 @@
               scope.loading = true;
               scope.error[type] = null;
               scope.capability = null;
-              gnOwsCapabilities['get' + type.toUpperCase() +
-                  'Capabilities'](scope.url).then(function(capability) {
-                scope.loading = false;
-                scope.capability = capability;
-              }, function(error) {
-                scope.loading = false;
-                scope.error[type] = error;
-              });
+              scope.capabilityEsriRest = null;
+              if (type.toLowerCase() === 'esrirest') {
+                gnEsriUtils.getCapabilities(scope.url).then(function(capability) {
+                  scope.loading = false;
+                  scope.capabilityEsriRest = capability;
+                }, function(error) {
+                  scope.loading = false;
+                  scope.error[type] = error;
+                });
+              } else {
+                gnOwsCapabilities['get' + type.toUpperCase() +
+                'Capabilities'](scope.url).then(function(capability) {
+                  scope.loading = false;
+                  scope.capability = capability;
+                }, function(error) {
+                  scope.loading = false;
+                  scope.error[type] = error;
+                });
+              }
             }
           };
 
           // reset a service URL and clear the result list
           scope.reset = function() {
             scope.loading = false;
             scope.capability = null;
+            scope.capabilityEsriRest = null;
             scope.serviceDesc = null;
             scope.url = '';
           };
@@ -493,6 +510,74 @@
         }
       };
     }]);
+
+
+  /**
+   * @ngdoc directive
+   * @name gn_wmsimport.directive:gnEsriRestCapTreeCol
+   *
+   * @description
+   * Directive to manage a collection of nested layers from
+   * the ESRI REST capabilities document. This directive works with
+   * gnEsriCapTreeElt directive.
+   */
+  module.directive('gnEsriRestCapTreeCol', [
+    function() {
+      return {
+        restrict: 'E',
+        replace: true,
+        scope: {
+          collection: '=',
+          filterLabel: '@'
+        },
+        template: "<ul class='gn-layer-tree'><li data-ng-show='collection.length > 10' >" +
+          "<div class='input-group input-group-sm'><span class='input-group-addon'><i class='fa fa-filter'></i></span>" +
+          "<input class='form-control' aria-label='{{ ::filterLabel }}' data-ng-model-options='{debounce: 200}' data-ng-model='layerSearchText'/></div>" +
+          "</li>" +
+          '<gn-esri-rest-cap-tree-elt ng-repeat="member in collection | filter:layerSearchText | orderBy: \'name\'" member="member">' +
+          '</gn-esri-rest-cap-tree-elt></ul>'
+      };
+    }]);
+
+  /**
+   * @ngdoc directive
+   * @name gn_wmsimport.directive:gnEsriCapTreeElt
+   *
+   * @description
+   * Directive to manage layers from an ESRI REST capabilities
+   * document. Will call its own template to display the layer.
+   */
+  module.directive('gnEsriRestCapTreeElt', [
+    '$compile',
+    '$translate',
+    'gnAlertService',
+    function($compile, $translate, gnAlertService) {
+      return {
+        restrict: 'E',
+        require: '^gnWmsImport',
+        replace: true,
+        scope: {
+          member: '='
+        },
+        templateUrl: '../../catalog/components/viewer/wmsimport/' +
+          'partials/esrilayer.html',
+        link: function(scope, element, attrs, controller) {
+          var el = element;
+
+          scope.toggleNode = function(evt) {
+            el.find('.fa').first().toggleClass('fa-folder-open-o')
+              .toggleClass('fa-folder-o');
+            el.children('ul').toggle();
+            evt.stopPropagation();
+          };
+
+          scope.addLayer = function() {
+            controller.addEsriRestLayer(scope.member);
+          };
+        }
+      };
+    }]);
+
   module.directive('gnLayerStyles', [
     function() {
       return {

diff --git a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/esrilayer.html b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/esrilayer.html
@@ -0,0 +1,25 @@
+<li class="leaf">
+  <div class="flex-col">
+    <div class="flex-row width-100 flex-align-stretch">
+      <div class="flex-col flex-grow">
+        <a href=""
+           class="truncate"
+           data-ng-click="addLayer()"
+           title="{{member.name}}">
+          <i class='fa fa-fw'
+             data-ng-class='"fa-map-o"'></i>
+          {{member.name}}
+        </a>
+      </div>
+      <div class="gn-layer-toolbar btn-group btn-group-xs">
+        <a href=""
+          class="btn btn-link btn-xs"
+          data-ng-click="addLayer()"
+          class="btn btn-default btn-xs"
+          title="{{'addToMap' | translate}}">
+          <i class="fa fa-fw fa-plus"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</li>
diff --git a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html
@@ -57,4 +57,5 @@
 
   <gn-cap-tree-col collection='capability.Layer' selection="selection"></gn-cap-tree-col>
   <gn-cap-tree-col collection='capability.featureTypeList.featureType' selection="selection"></gn-cap-tree-col>
+  <gn-esri-rest-cap-tree-col collection='capabilityEsriRest.layers' selection="selection" filter-label="{{ 'filter' | translate }}"></gn-esri-rest-cap-tree-col>
 </div>
diff --git a/web-ui/src/main/resources/catalog/locales/en-search.json b/web-ui/src/main/resources/catalog/locales/en-search.json
@@ -532,5 +532,8 @@
   "displayMousePosition": "Display mouse position (Use 'c' shortcut to copy position to clipboard).",
   "copyMousePosition": "Copy mouse position to clipboard",
   "printUnsupportedLayerTypes": "The following layer types are present but cannot be printed",
-  "rssFeed": "RSS feed"
+  "rssFeed": "RSS feed",
+  "esriCapabilitiesFailed": "Error retrieving the ESRI Rest capabilities document.",
+  "esriCapabilitiesNoValid": "The response is not a valid ESRI Rest capabilities document."
+
 }