diff --git a/src/module_vmap/module/css/vmap.less b/src/module_vmap/module/css/vmap.less index b1a22a83179eb27d76840425c40218596caef478..fa7278d2fcf13ac3cdd3f2529f01158bff52c206 100644 --- a/src/module_vmap/module/css/vmap.less +++ b/src/module_vmap/module/css/vmap.less @@ -2443,3 +2443,18 @@ div.vmap-select-scale-alert{ font-size: 16px; line-height: 0; } + +.layerstree-nav { + margin-left: 40px; +} + +.layerstree-nav>li>a { + padding: 0px 15px; + border: 1px solid #8a8a8a !important; + color: #333; +} + +.ol-current-projection-compare{ + bottom: 29px; + margin-left: -16%; +} diff --git a/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js index 597d790f410c1f5a60e66034121d41bb61e1936b..b3304a3c7800e0e991cc42b0c80bd0a11e4ee882 100644 --- a/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js +++ b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js @@ -519,8 +519,10 @@ nsVmap.MapCompare.prototype.mapCompareController = function ($scope, $window, $e 'size': this_.map.getSize(), 'tileSize': tileSize }); + // Définit la vue de la carte this_.addView(olView_); + // Définit les couches de la carte for (var i = 0; i < olLayers_.length; i++) { this_.addLayer(olLayers_[i]); @@ -533,6 +535,12 @@ nsVmap.MapCompare.prototype.mapCompareController = function ($scope, $window, $e setTimeout(function () { this_.updateCompareScaleMap(); }); + + // Affiche le nom de la carte + this_.displayMapName(); + + // Affiche le nom de la carte + this_.displayMapProj(); }) /** @@ -765,3 +773,35 @@ nsVmap.MapCompare.prototype.mapCompareController.prototype.addView = function (o }); } }; + +/** + * Display the map name tool + */ +nsVmap.MapCompare.prototype.mapCompareController.prototype.displayMapName = function () { + oVmap.log('nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.displayMapName'); + + if ($("#map-name-compare").length == 0) { + $('#olMapCompare').children().children('.ol-overlaycontainer-stopevent').append('<div class="ol-map-name ol-map-name-compare ol-unselectable"><span id="map-name-compare" class="ol-control"></span></div>'); + } + + var vMapCatalog = oVmap.getMapManager().getMapCatalog(); + for (var i = 0; i < vMapCatalog['maps'].length; i++) { + if (vMapCatalog['maps'][i]['compare'] === true) { + var currentMapName = vMapCatalog['maps'][i]['name']; + } + } + $("#map-name-compare").html(currentMapName); +} + +/** + * Display the map proj tool + */ +nsVmap.MapCompare.prototype.mapCompareController.prototype.displayMapProj = function () { + oVmap.log('nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.displayMapProj'); + + if ($("#current-projection-compare").length == 0) { + $('#olMapCompare').children().children('.ol-overlaycontainer-stopevent').append('<div class="ol-current-projection ol-unselectable ol-current-projection-compare"><span id="current-projection-compare" class="ol-control"></span></div>'); + } + + $("#current-projection-compare").html(oVmap['oProjections'][oVmap.getMapCompare().getOLMap().getView().getProjection().getCode()]); +} diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js index 673cb4e0f66ff2e60cc0b2faab5137030da12bb0..2a5fe743b519e0186dae873e6317327fee403212 100644 --- a/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js +++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js @@ -117,6 +117,19 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController = function ($scope, */ $scope['tree'] = oVmap.getMapManager().getLayersTree(); + + /** + * The map compare layersTree + * @type {object} + */ + $scope['compareTree'] = {}; + + + /** + * The active map + */ + $scope['activeMap'] = 1; + /** * The current properties */ @@ -194,6 +207,17 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController = function ($scope, }; oVmap.module.controller('AppLayertreeController', nsVmap.nsMapManager.LayersTree.prototype.LayertreeController); +/** + * Resize the layertools + */ +nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.resize = function () { + oVmap.log('nsVmap.nsMapManager.LayersTree.LayertreeController.resize'); + + setTimeout(function () { + oVmap.resizeLayerTools(); + }); +} + /** * Set a layer visible or not * @param {ol.layer.Base} olLayer @@ -270,6 +294,8 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.setGroupV } this.memoriseGroupVisible(node); + + oVmap['scope'].$broadcast('layersChanged'); }; /** @@ -350,6 +376,14 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.reloadTre // relance le chargement des couches avec le nouvel arbre this.loadTree(); + // Arbre pour la comparaison + if(this.scope_["$root"]["compare_enabled"]){ + var oCompareTree = jQuery.extend(true, {}, oVmap.getMapManager().getCompareLayersTree()); + this.scope_['compareTree'] = oCompareTree; + } else { + this.scope_['compareTree'] = {}; + } + oVmap.resizeLayerTools(false); }; @@ -638,6 +672,20 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.closeLaye } } } + + if (goog.isDefAndNotNull(this.scope_['compareTree'])) { + if (goog.isArray(this.scope_['compareTree']['children'])) { + for (var i = 0; i < this.scope_['compareTree']['children'].length; i++) { + if (goog.isDefAndNotNull(this.scope_['compareTree']['children'][i]['children'])) { + for (var ii = 0; ii < this.scope_['compareTree']['children'][i]['children'].length; ii++) { + if (goog.isDefAndNotNull(this.scope_['compareTree']['children'][i]['children'][ii]['olLayer'])) { + this.scope_['compareTree']['children'][i]['children'][ii]['displayedMenu'] = false; + } + } + } + } + } + } }; /** diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js index 48d2e54ec1915eb1e28b91b4908630d62aa5b32c..c6759068d12cdca81139276cf329080ba8fe1adf 100644 --- a/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js +++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js @@ -136,7 +136,17 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope) /** * @private */ - this['aUrls'] = []; + this['oUrls'] = {}; + + /** + * @private + */ + this['oCompareUrls'] = {}; + + /** + * The active map + */ + $scope['activeMap'] = 1; /** * Contains the events stocked by listenLayers() @@ -158,6 +168,18 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope) }); }; + +/** + * Resize the layertools + */ +nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.resize = function () { + oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.resize'); + + setTimeout(function () { + oVmap.resizeLayerTools(); + }); +} + /** * Loads the legend * @export @@ -165,18 +187,26 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope) nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.loadLegend = function () { oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.loadLegend'); - this['oUrls'] = this.getLegendUrls(); + this['oUrls'] = this.getLegendUrls(oVmap.getMap().getOLMap()); this.downloadLegendImgs(this['oUrls']); + + if(this.$scope_["$root"]["compare_enabled"]){ + this['oCompareUrls'] = this.getLegendUrls(oVmap.getMapCompare().getOLMap()); + this.downloadLegendImgs(this['oCompareUrls']); + } else { + this['oCompareUrls'] = {}; + } }; /** * Get the legend URLs + * @param {object} olMap * @returns {object} */ -nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.getLegendUrls = function () { +nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.getLegendUrls = function (olMap) { oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.getLegendUrls'); - var aLayers = oVmap.getMap().getOLMap().getLayers().getArray(); + var aLayers = olMap.getLayers().getArray(); var oUrls = {}; // Récupération des URL WMS diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js index 13114d60d7874701fa6fc84a16d079e020ee1634..d42d368d9bce08e8b42bcc399a3efab62aee2ec9 100644 --- a/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js +++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js @@ -314,7 +314,7 @@ nsVmap.nsMapManager.MapManager.prototype.loadCompareMap = function (element) { var this_ = this; this_.getAjaxLayersTree(sUrl, function(oTree){ - oVmap.log("oTree: ", oTree); + oVmap.log("oCompareTree: ", oTree); // Change la variable oLayersTree this_.setCompareLayersTree(oTree); @@ -927,7 +927,7 @@ nsVmap.nsMapManager.MapManager.prototype.ajaxGetMapCatalog = function (sUrl) { * @return {object<LayersTree>} */ nsVmap.nsMapManager.MapManager.prototype.getAjaxLayersTree = function (sUrl, callback) { - var LayersTree; + var oLayersTree; ajaxRequest({ 'method': 'GET', @@ -937,11 +937,9 @@ nsVmap.nsMapManager.MapManager.prototype.getAjaxLayersTree = function (sUrl, cal 'success': function (response) { var data = JSON.parse(response['data']); if (goog.isDef(data['mapjsons'])) { - LayersTree = data['mapjsons'][0]; + oLayersTree = data['mapjsons'][0]; } - - oVmap.log(LayersTree); - callback.call(this, LayersTree); + callback.call(this, oLayersTree); } }); }; diff --git a/src/module_vmap/module/javascript/app/vmap/tools/controls.js b/src/module_vmap/module/javascript/app/vmap/tools/controls.js index 67b20e2e0fa4df43af05829b3365f6282f0ae60d..6fee41a7d7821c2ffb37070543fbe7aaef4e23df 100755 --- a/src/module_vmap/module/javascript/app/vmap/tools/controls.js +++ b/src/module_vmap/module/javascript/app/vmap/tools/controls.js @@ -31,7 +31,7 @@ goog.require('ol.format.TopoJSON'); /** * @classdesc * Class {@link nsVmap.nsToolsManager.Controls}: Add the controls defined in data/tools.json, - * available : Attribution, FullScreen, MousePosition, OverviewMap, Rotate, ScaleLine, Zoom, ZoomSlider, + * available : Attribution, FullScreen, MousePosition, OverviewMap, Rotate, ScaleLine, Zoom, ZoomSlider, * ZoomToExtent, CurrentProjection, DragAndDrop (GPX,GeoJSON,IGC,KML,TopoJSON) * @param {array} aControls Controls to set * @constructor @@ -273,7 +273,7 @@ nsVmap.nsToolsManager.Controls.prototype.addControl = function (control) { /** * Toggle a control to the ol map * @param {string} control Control to toggle - * @param {boolean} bActive + * @param {boolean} bActive * @export */ nsVmap.nsToolsManager.Controls.prototype.setToolActive = function (control, bActive) { @@ -426,4 +426,4 @@ nsVmap.nsToolsManager.Controls.prototype.getOverviewMap = function () { // Définit la directive et le controller oVmap.module.directive('appControls', nsVmap.nsToolsManager.Controls.prototype.controlsDirective); -oVmap.module.controller('AppControlsController', nsVmap.nsToolsManager.Controls.prototype.controlsController); \ No newline at end of file +oVmap.module.controller('AppControlsController', nsVmap.nsToolsManager.Controls.prototype.controlsController); diff --git a/src/module_vmap/module/javascript/app/vmap/tools/print.js b/src/module_vmap/module/javascript/app/vmap/tools/print.js index efc99e6add1af7135b89c9210efd195df339902c..11d16df791e0e3264dd1b1fed622b4db3647e2fc 100644 --- a/src/module_vmap/module/javascript/app/vmap/tools/print.js +++ b/src/module_vmap/module/javascript/app/vmap/tools/print.js @@ -635,14 +635,22 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.print = function var printStyleId = opt_options.printStyleId; // Set includesJSON - var includesJson = JSON.stringify([{ + var aIncludes = [{ 'target': '#map_legend', - 'html': this_.getLegendTemplate() - }]); + 'html': this_.getLegendTemplate('#maplegend') + }]; + if(this.$scope_["$root"]["compare_enabled"]){ + aIncludes.push({ + 'target': '#map_legend_compare', + 'html': this_.getLegendTemplate('#compare_maplegend') + }); + } + var includesJson = JSON.stringify(aIncludes); // Set scope var oPrintScope = goog.isDefAndNotNull(opt_options.scope) ? opt_options.scope : {}; oPrintScope['date'] = goog.isDefAndNotNull(oPrintScope['date']) ? oPrintScope['date'] : today; + oPrintScope['compare_mode'] = this.$scope_["$root"]["compare_enabled"] === true ? true : false; var sScope = JSON.stringify(oPrintScope); // Ouvre la fenêtre d'impression @@ -780,6 +788,10 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.print = function return 1; }; +/** + * Get the maps JSON defs + * @param {object} opt_options + */ nsVmap.nsToolsManager.Print.prototype.printController.prototype.getMapsJsonDef = function (opt_options) { oVmap.log('nsVmap.nsToolsManager.Print.prototype.printController.prototype.getMapsJsonDef'); @@ -928,11 +940,12 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.getTemplateTarge /** * Get the html definition of the template with base64 images + * @param {string} sTarget * @returns {String} */ -nsVmap.nsToolsManager.Print.prototype.printController.prototype.getLegendTemplate = function () { +nsVmap.nsToolsManager.Print.prototype.printController.prototype.getLegendTemplate = function (sTarget) { - var template = $('#maplegend').clone(); + var template = $(sTarget).clone(); // Transforme les images en base64 template.find('img').each(function (index) { diff --git a/src/module_vmap/module/template/layers/layertree.html b/src/module_vmap/module/template/layers/layertree.html index 5002135b16e7963f77a07de5163eee7f95c04f80..3141c44e2381b972cbd1df47df5f2c3cd7f5de90 100644 --- a/src/module_vmap/module/template/layers/layertree.html +++ b/src/module_vmap/module/template/layers/layertree.html @@ -12,10 +12,20 @@ </div> <div id="layertree" class="layers-tool" collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}"> + + <ul class="nav nav-tabs layerstree-nav left" ng-show="$root.compare_enabled"> + <li ng-class="{'active' : activeMap == 1}"> + <a href="#" ng-click="activeMap=1;ctrl.resize()">Carte 1</a> + </li> + <li ng-class="{'active' : activeMap == 2}"> + <a href="#" ng-click="activeMap=2;ctrl.resize()">Carte 2</a> + </li> + </ul> <div class="indicators"> <span class="text-info icon-eye" style="font-size: 18px;line-height: 0" title="Définit si la couche est visible"></span> </div> - <ul class="tree"> + + <ul class="tree" ng-show="activeMap == 1 || !$root.compare_enabled"> <div ng-repeat="node in tree.children| orderBy : 'name'" ng-if="node.view === undefined"> <!-- Service --> @@ -140,6 +150,108 @@ </ul> </div> </ul> + + <ul class="tree" ng-show="activeMap == 2 && $root.compare_enabled"> + <div ng-repeat="node in compareTree.children| orderBy : 'name'" ng-if="node.view === undefined"> + + <!-- Service --> + <div class="layerstree-phather"> + <div class="tree-father-collapse-btn service-name left" data-toggle="collapse" data-target="#comparetree_element_{{$id}}" onclick="setTimeout(function () { + oVmap.resizeLayerTools(true) + }, 500)" title="{{node.name}}"> + {{node.name}} + </div> + <div class="checkbox checkbox-info inline-checkbox right" + ng-class="{'checkbox_indeterminate': node.visible === null}"> + <input id="compare_service_{{$id}}_visible" + ng-init="node.visible = ctrl.isGroupVisible(node)" + ng-model="node.visible" + ng-model-options="{getterSetter: true}" + ng-click="ctrl.setGroupVisible(node)" + type="checkbox" + style="cursor:pointer; position: absolute" + title="Definit si le groupe est visible"> + <label for="compare_service_{{$id}}_visible" + style="cursor:pointer" + title="Definit si le groupe est visible"></label> + </div> + </div> + + <!-- Calque --> + <ul id="comparetree_element_{{$id}}" class="collapse layers-tree-ul tree-element" ng-class="{'in': ctrl.layers_collapsed !== true}"> + <div ng-repeat="layer in node.children"> + <li> + <ul class="list-group-item layertree-item auto-height"> + + <!-- Nom du calque --> + <div class="layer-name layer-name-tree" title="{{layer.name}}">{{layer.name}}</div> + <div class="layer-checkboxes"> + <button type="button" + class="btn btn-xs margin-sides-10 hidden" + ng-click="layer.olLayer.getSource().refreshWithTimestamp()"> + <span class="glyphicon glyphicon-refresh"></span> + </button> + <div type="button" class="btn btn-xs layer-menu-button" ng-click="ctrl.toggleLayerMenu(layer, $event)"> + <span ng-class="{'icon-filter': layer.olLayer.get('is_filtered'), 'icon-format_list_bulleted': !layer.olLayer.get('is_filtered')}"></span> + </div> + <!-- Checkbox visible --> + <div class="checkbox checkbox-info inline-checkbox" style="z-index: 10;"> + <input id="{{layer.$$hashKey}}_compare_visible_order_checkbox" + type="checkbox" + style="cursor:pointer; position: absolute" + title="Definit si le calque est visible" + ng-checked="layer.olLayer.values.visible === true" + ng-click="ctrl.setVisible(layer.olLayer, !layer.olLayer.values.visible);node.visible = ctrl.isGroupVisible(node)"> + <label for="{{layer.$$hashKey}}_compare_visible_order_checkbox" style="cursor:pointer" title="Definit si la couche est visible"></label> + </div> + </div> + </ul> + </li> + <div class="dropdown-menu layer-menu" ng-class="{'block': layer.displayedMenu === true}"> + <div class="layer-menu-list"> + <li ng-if="layer.olLayer.get('is_filtered')" ng-click="ctrl.displayFilterLayerModal(layer.olLayer)"> + <a href="#"> + <span class="icon-filter"></span> + Filtre + </a> + </li> + <li> + <a href="#"> + <div class="row"> + <div class="col-xs-6"> + <span class="icon-star-half"></span> + Transparence + </div> + <div class="col-xs-6"> + <div class="layer-menu-list-slider"> + <input data-app-layer-opacity-slider="" id="compare_slider_layer_form_{{layer.$$hashKey}}" type="text"> + </div> + </div> + </div> + </a> + </li> + <li ng-if="layer.olLayer.get('type') === 'imagewms' || layer.olLayer.get('type') === 'tilewms'" + ng-repeat="sublayer in layer.olLayer.get('sublayers')"> + <div class="sublayer-checkboxes"> + <!-- Checkbox visible --> + <div class="checkbox checkbox-info sublayer-checkbox inline-checkbox"> + <input id="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox" + type="checkbox" + style="cursor:pointer; position: absolute" + title="Definit si la couche est visible" + ng-checked="ctrl.isSublayerActive(layer.olLayer, sublayer)" + ng-disabled="layer.olLayer.values.visible !== true" + ng-click="ctrl.toggleSubLayer(layer.olLayer, sublayer, '#' + layer.$$hashKey + '_sublayer_' + sublayer + '_visible_checkbox')"> + <label for="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox" style="cursor:pointer" title="Definit si la couche est visible">{{sublayer}}</label> + </div> + </div> + </li> + </div> + </div> + </div> + </ul> + </div> + </ul> </div> <!--Modale pour le filtrage--> diff --git a/src/module_vmap/module/template/layers/maplegend.html b/src/module_vmap/module/template/layers/maplegend.html index a82570aa249be47f2f17a50eb48f4238af16d693..4c34eb4904c8941687b5019d7b7c9d20076a7b57 100755 --- a/src/module_vmap/module/template/layers/maplegend.html +++ b/src/module_vmap/module/template/layers/maplegend.html @@ -1,9 +1,9 @@ <div class="maplegendtool"> <div ng-if="!$root.is_mobile" id="maplegendcontainer-button"> - <div class="list-group-item active pointer maplegend-button-content" - title="Légende de la carte" + <div class="list-group-item active pointer maplegend-button-content" + title="Légende de la carte" collapse="{{ctrl.legend_collapsed === true ? 'out' : 'in'}}" - data-target="#maplegendcontainer" + data-target="#maplegendcontainer" onclick="oVmap.getMapManager().collapseElement(this)"> <span class="icon-info list-group-icon"></span> <span>Légende</span> @@ -12,7 +12,15 @@ </div> </div> <div id="maplegendcontainer" class="layers-tool legend" collapse="{{ctrl.legend_collapsed === true ? 'out' : 'in'}}"> - <div id="maplegend" class="tree legend"> + <ul class="nav nav-tabs layerstree-nav" ng-show="$root.compare_enabled"> + <li ng-class="{'active' : activeMap == 1}"> + <a href="#" ng-click="activeMap=1;ctrl.resize()">Carte 1</a> + </li> + <li ng-class="{'active' : activeMap == 2}"> + <a href="#" ng-click="activeMap=2;ctrl.resize()">Carte 2</a> + </li> + </ul> + <div id="maplegend" class="tree legend" ng-show="activeMap == 1 || !$root.compare_enabled"> <div ng-repeat="(sLayerName, layer) in ctrl.oUrls" class="layer-legend" ng-show="ctrl.areLegendsLoaded(layer)"> <div id="legend_father{{$index}}" data-toggle="collapse" data-target="#legend_element_{{$index}}"> @@ -23,7 +31,26 @@ <div id="legend_element_{{$index}}" class="collapse in"> <ul class="list-group-item auto-height"> <div ng-repeat="node in layer" - ng-show="node.legendBlobURL"> + ng-show="node.legendBlobURL"> + <img ng-src="{{node.legendBlobURL}}" class="legend-img" legend-image-node> + </div> + </ul> + </div> + </div> + </div> + + <div id="compare_maplegend" class="tree legend" ng-show="activeMap == 2 && $root.compare_enabled"> + <div ng-repeat="(sLayerName, layer) in ctrl.oCompareUrls" class="layer-legend" + ng-show="ctrl.areLegendsLoaded(layer)"> + <div id="compare_legend_father{{$index}}" data-toggle="collapse" data-target="#compere_legend_element_{{$index}}"> + <div style="display: inline-block; width:98%"> + <div class="legend_father_name" title="{{sLayerName}}">{{sLayerName}}</div> + </div> + </div> + <div id="compare_legend_element_{{$index}}" class="collapse in"> + <ul class="list-group-item auto-height"> + <div ng-repeat="node in layer" + ng-show="node.legendBlobURL"> <img ng-src="{{node.legendBlobURL}}" class="legend-img" legend-image-node> </div> </ul> @@ -31,4 +58,4 @@ </div> </div> </div> -</div> \ No newline at end of file +</div>