Skip to content

Commit

Permalink
Map viewer - support to add layers from ESRI Rest services (#5931)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
josegar74 committed Nov 8, 2021
1 parent 30f8b35 commit 695c20e
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 24 deletions.
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
Expand Up @@ -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);
};

/**
Expand Down Expand Up @@ -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;
};
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
Expand Up @@ -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);
Expand Down
Expand Up @@ -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
Expand Down
Expand Up @@ -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"
Expand Down
Expand Up @@ -37,6 +37,7 @@
*/
module.directive('gnWmsImport', [
'gnOwsCapabilities',
'gnEsriUtils',
'gnAlertService',
'gnMap',
'$translate',
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 = '';
};
Expand Down Expand Up @@ -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 {
Expand Down
@@ -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>
Expand Up @@ -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>
5 changes: 4 additions & 1 deletion web-ui/src/main/resources/catalog/locales/en-search.json
Expand Up @@ -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."

}

0 comments on commit 695c20e

Please sign in to comment.