Skip to content
Permalink
Browse files

Redesign add wms layer panel similar to qGis

fixes #237, #232
  • Loading branch information...
raitisbe committed Jul 22, 2019
1 parent 6190b8b commit 7a16395047bb44050bfb4cdca14d2f2983c8bb39
@@ -34,7 +34,6 @@ export default [function () {
},

getDimensionValues(dimension) {
debugger;
try {
if (moment(dimension.default).isValid())
return me.prepareTimeSteps(dimension.values)
@@ -66,7 +65,6 @@ export default [function () {
}
angular.forEach(layer.Dimension, function (dimension) {
dimension.values = me.getDimensionValues(dimension);
debugger;
})
})
}
@@ -20,6 +20,19 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
tileSize: 512
};

function fillProjections(caps, response){
if (angular.isDefined(caps.Capability.Layer.CRS)) {
me.data.srss = caps.Capability.Layer.CRS;
} else {
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(response, "application/xml");
var doc = oDOM.documentElement;
doc.querySelectorAll('Capability>Layer>CRS').forEach(function (srs) {
me.data.srss.push(srs.innerHTML);
});
}
}

this.capabilitiesReceived = function (response) {
try {
var parser = new WMSCapabilities();
@@ -32,13 +45,8 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
me.data.query_formats = (caps.Capability.Request.GetFeatureInfo ? caps.Capability.Request.GetFeatureInfo.Format : []);
me.data.exceptions = caps.Capability.Exception;
me.data.srss = [];
if (angular.isDefined(caps.Capability.Layer.CRS)) {
me.data.srss = caps.Capability.Layer.CRS;
} else {
$("Capability>Layer>SRS", response).each(function () {
me.data.srss.push(this.innerHTML);
});
}
fillProjections(caps, response);
//TODO: WHY?
if (me.data.srss.indexOf('CRS:84') > -1) me.data.srss.splice(me.data.srss.indexOf('CRS:84'), 1);

if (WmsCapsService.currentProjectionSupported(me.data.srss))
@@ -48,8 +56,11 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
} else
me.data.srs = me.data.srss[0];
me.srsChanged();
me.data.services = caps.Capability.Layer;

if(Array.isArray(caps.Capability.Layer))
me.data.services = caps.Capability.Layer;
else if(typeof caps.Capability.Layer == 'object')
me.data.services = [caps.Capability.Layer];

dimensionService.fillDimensionValues(caps.Capability.Layer);

me.data.getMapUrl = caps.Capability.Request.GetMap.DCPType[0].HTTP.Get.OnlineResource;
@@ -113,7 +124,7 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
recurse(sublayer)
})
}
angular.forEach(me.data.services.Layer, function (layer) {
angular.forEach(me.data.services, function (layer) {
recurse(layer)
});
Core.setMainPanel('layermanager');
@@ -152,7 +163,7 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
var layer_class = Tile;
var source_class = TileWMS;

if (!me.data.use_tiles) {
if (!me.data.useTiles) {
layer_class = ImageLayer;
source_class = ImageWMS;
}
@@ -177,19 +188,24 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
if (layer.Style && layer.Style[0].LegendURL) {
legends.push(layer.Style[0].LegendURL[0].OnlineResource);
}
var styles = undefined;
if(layer.styleSelected)
styles = layer.styleSelected;
else
styles = layer.Style && layer.Style.length > 0 ? layer.Style[0].Name : 'default'
var new_layer = new layer_class({
title: layerName,
source: new source_class({
url: me.data.getMapUrl,
attributions: attributions,
projection: me.data.crs || me.data.srs,
styles: layer.Style && layer.Style.length > 0 ? layer.Style[0].Name : undefined,
params: Object.assign({
LAYERS: layer.Name,
INFO_FORMAT: (layer.queryable ? query_format : undefined),
FORMAT: me.data.image_format,
FROMCRS: me.data.srs,
VERSION: me.data.version
VERSION: me.data.version,
STYLES: styles
}, dimensionService.paramsFromDimensions(layer)),
crossOrigin: 'anonymous'
}),
@@ -204,7 +220,7 @@ export default ['$rootScope', 'hs.map.service', 'hs.wms.getCapabilitiesService',
dimensions: dimensions,
legends: legends
});
OlMap.proxifyLayerLoader(new_layer, me.data.use_tiles);
OlMap.proxifyLayerLoader(new_layer, me.data.useTiles);
OlMap.map.addLayer(new_layer);
}

@@ -8,6 +8,7 @@ import './add-layers-wfs.module';
import './add-layers-vector.module';
import '../../common/history-list/history-list.module';
import addLayersUrlDirective from './add-layers-url.directive';
import nestedLayersTableDirective from './nested-layers-table.directive';

/**
* @namespace hs.addLayers
@@ -30,6 +31,14 @@ export const AddLayersModule = angular.module('hs.addLayers', ['hs.map', 'hs.add
*/
.directive('hs.addLayersUrl', addLayersUrlDirective)


/**
* @memberof hs.addLayers
* @ngdoc directive
* @name hs.addLayersUrl
*/
.directive('hs.nestedLayersTable', nestedLayersTableDirective )

/**
* @memberof hs.addLayers
* @ngdoc component
@@ -0,0 +1,12 @@
export default ['config', function (config) {
return {
template: require('./partials/nested-layers-table.directive.html'),
scope: {
layers: '=layers'
},
controller: ['$scope', function ($scope) {

}]

};
}]
@@ -24,7 +24,7 @@
</div>
</div>

<div class="form-group" ng-show="data.srs.toUpperCase() != data.map_projection">
<div class="form-group" ng-show="data.srs.toUpperCase() != data.mapProjection">
<div class="input-group">
<div class="input-group-prepend" id="type_label">
<span class="input-group-text control-label" translate>SRS</span>
@@ -35,18 +35,18 @@
</div>
</div>

<p class="col-sm-12 alert alert-danger" ng-show="data.resample_warning" translate>Map and layer projection do
<p class="col-sm-12 alert alert-danger" ng-show="data.useResampling" translate>Map and layer projection do
not
match! Resampling will be used. This may lead to unexpectable results.</p>

<div class="form-group">
<div class="capabilities_input">
<label class="capabilities_label control-label" translate> <input type="checkbox"
ng-model="data.use_tiles" /> Use tiles</label>
<label class="capabilities_label control-label"> <input type="checkbox"
ng-model="data.useTiles" /> Use tiles</label>
</div>
</div>

<p class="col-sm-12 alert alert-warning" ng-show="!data.use_tiles" translate>Consider using tiles. Some servers
<p class="col-sm-12 alert alert-warning" ng-show="!data.useTiles" translate>Consider using tiles. Some servers
have
restricted max size of picture.</p>

@@ -55,7 +55,7 @@
<div class="input-group-prepend" id="type_label">
<span class="input-group-text control-label" translate>Tile size</span>
</div>
<input class="form-control" ng-model="data.tile_size" />
<input class="form-control" ng-model="data.tileSize" />
</div>
</div>

@@ -71,50 +71,32 @@
<div class="form-group">
<div class="capabilities_input">
<label class="capabilities_label control-label" translate> <input type="checkbox"
ng-model="data.register_metadata" /> Register metadata</label>
ng-model="data.registerMetadata" /> Register metadata</label>
</div>
</div>

<hr />
<ul class="list-group">
<li class="list-group-item hs-ows-layerlistheading clearfix">
<div>{{data.services.Title}}</div>
<button class="btn btn-primary" ng-click="selectAllLayers()" translate>Select All Layers</button>
<button class="btn btn-primary pull-right" ng-click="addLayers(true)"><i class="icon-plus"></i></button>
</li>
<li ng-repeat="layer in data.services.Layer" class="list-group-item clearfix">
<div>
<input type="checkbox" class="layer-checked" ng-model="layer.checked" /> {{layer.Title}}
</div>
<ul class="list-group" ng-if="hasNestedLayers(layer)">
<li ng-repeat="sub_layer in layer.Layer" class="list-group-item">
<div class="hs-ows-layer-title" title="{{sub_layer.Title}}">{{sub_layer.Title}}</div>
<input type="checkbox" class="layer-checked" ng-model="sub_layer.checked"
ng-if="!hasNestedLayers(sub_layer)" />
<form class="form-horizontal">
<div class="form-group" ng-repeat="dimension in sub_layer.Dimension">
<label class="control-label col-xs-4">{{dimension.name}}:</label>
<div class="col-sm-8">
<select class="form-control" ng-model="dimension.value">
<option ng-value="dimension_value"
ng-repeat="dimension_value in dimension.values">
{{dimension_value}}</option>
</select>
</div>
</div>
</form>
<ul class="list-group" ng-if="hasNestedLayers(sub_layer)">
<li ng-repeat="sub_layer2 in sub_layer.Layer" class="list-group-item">
<div class="hs-ows-layer-title" title="{{sub_layer.Title}}">{{sub_layer2.Title}}</div>
<input type="checkbox" class="layer-checked" ng-model="sub_layer2.checked" />
<span ng-repeat="dimension in sub_layer2.Dimension">
{{dimension.name}}
</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<table class="table table-sm table-striped table-bordered">
<thead>
<th style="width:1em">&nbsp;</th>
<th style="width:30%" translate>Name</th>
<th style="width:40%" translate>Title</th>
<th translate>Abstract</th>
</thead>
<tbody ng-repeat="service in data.services">
<tr>
<td><input type="checkbox" class="layer-checked" ng-model="service.checked" /></td>
<td>{{service.Name}}</td>
<td>{{service.Title}}</td>
<td>{{service.Abstract}}</td>
</tr>
<tr>
<td colspan="4" style="padding-left: 1em">
<hs.nested-layers-table layers="service.Layer"></hs.nested-layers-table>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary pull-right" style="position:fixed; bottom:30px;left:620px" ng-click="addLayers(true)"><i
class="icon-plus"></i></button>
</div>
</form>
@@ -23,17 +23,17 @@
</md-input-container>
</div>

<p class="md-warn" ng-show="data.resample_warning" translate>Map and layer projection do not match! Resampling will be used. This may lead to unexpectable results.</p>
<p class="md-warn" ng-show="data.useResampling" translate>Map and layer projection do not match! Resampling will be used. This may lead to unexpectable results.</p>

<md-checkbox ng-model="data.use_tiles" aria-label="Use tiles">
<md-checkbox ng-model="data.useTiles" aria-label="Use tiles">
<translate>Use tiles</translate>
</md-checkbox>

<p class="md-warn" ng-show="!data.use_tiles" translate>Consider using tiles. Some servers has restricted max size of picture.</p>
<p class="md-warn" ng-show="!data.useTiles" translate>Consider using tiles. Some servers has restricted max size of picture.</p>

<md-input-container>
<label translate>Tile size</label>
<input ng-model="data.tile_size" >
<input ng-model="data.tileSize" >
</md-input-container>

<md-input-container>
@@ -0,0 +1,39 @@
<table class="table table-sm table-striped table-bordered" style="width:100%">
<tbody ng-repeat="sub_layer in layers">
<tr>
<td style="width: 1em"><input type="checkbox" class="layer-checked" ng-model="sub_layer.checked" /></td>
<td style="width: 30%; padding-left:1em">{{sub_layer.Name}}</td>
<td style="width: 40%;"> {{sub_layer.Title}}</td>
<td>{{sub_layer.Abstract}}</td>
</tr>
<tr ng-if="!!sub_layer.Style && sub_layer.Style.length>1">
<td colspan="4">
<label class="control-label" translate>Style:</label>
<select class="form-control" ng-model="sub_layer.styleSelected" >
<option ng-repeat="style in sub_layer.Style">{{style.Name}}</option>
</select>
</td>
</tr>
<tr ng-if="!!sub_layer.Dimension">
<td colspan="4">
<form class="form">
<div class="form-group" ng-repeat="dimension in sub_layer.Dimension">
<label class="control-label">{{dimension.name}}:</label>
<div>
<select class="form-control" ng-model="dimension.value">
<option ng-value="dimension_value" ng-repeat="dimension_value in dimension.values">
{{dimension_value}}</option>
</select>
</div>
</div>
</form>
</td>
</tr>

<tr ng-if="!!sub_layer.Layer">
<td colspan="4" style="padding-left: 1em">
<hs.nested-layers-table layers="sub_layer.Layer"></hs.nested-layers-table>
</td>
</tr>
</tbody>
</table>
@@ -1352,11 +1352,6 @@ md-bottom-sheet .content {
overflow-x: hidden;
}

.layer-checked {
float: right;
clear: right;
}

.hs-ows-layer-title {
width: calc(100% - 16px);
display: inline-block;
@@ -60,13 +60,13 @@ <h1 class="md-toolbar-tools">
</md-option>
</md-select>
</md-input-container>
<p class="md-body-2 md-warn" ng-show="data.resample_warning" translate>Map and layer projection do not match! Resampling will be used. This may lead to unexpectable results.</p>
<p class="md-body-2 md-warn" ng-show="data.useResampling" translate>Map and layer projection do not match! Resampling will be used. This may lead to unexpectable results.</p>
<div flex-gt-sm="50">
<md-checkbox ng-model="data.use_tiles" aria-label="Tile usage">
<md-checkbox ng-model="data.useTiles" aria-label="Tile usage">
<translate>Use tiles</translate>
</md-checkbox>
</div>
<p class="md-body-2 md-warn" ng-show="!data.use_tiles" translate>Consider using tiles. Some servers has restricted max size of picture.</p>
<p class="md-body-2 md-warn" ng-show="!data.useTiles" translate>Consider using tiles. Some servers has restricted max size of picture.</p>
<div flex-gt-sm="50">
<md-checkbox ng-model="data.register_metadata" aria-label="Register metadata">
<translate>Register metadata</translate>
@@ -21,7 +21,7 @@ msgid "<input type=\"checkbox\" ng-model=\"data.register_metadata\"> Register me
msgstr ""

#: components/ows/partials/owswms.html:34
msgid "<input type=\"checkbox\" ng-model=\"data.use_tiles\"> Use tiles"
msgid "<input type=\"checkbox\" ng-model=\"data.useTiles\"> Use tiles"
msgstr ""

#: components/permalink/partials/directive.html:63

0 comments on commit 7a16395

Please sign in to comment.
You can’t perform that action at this time.