1 /** 2 * @fileOverview 3 * Copyright (c) 2013 Regione Autonoma della Sardegna 4 * Published under the GPL license.<br> 5 * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a> 6 * for the full text of the license. 7 * @version 0.1 8 */ 9 10 /** 11 * @require framework/widgets/doublemap/ToggleColumnButton.js 12 * @require framework/widgets/doublemap/ToggleMapsSyncButton.js 13 * @require framework/widgets/doublemap/DoubleMapLinker.js 14 * @require framework/widgets/doublemap/DoublePrintMap.js 15 * @require framework/widgets/form/ImagesLayersComboBox.js 16 * @require framework/widgets/control/Compass.js 17 * @require framework/data/EnvelopesAerialPhotos_XLSReader.js 18 */ 19 20 /** 21 * @namespace framework.widgets.doublemap 22 */ 23 Ext.namespace('framework.widgets.doublemap'); 24 25 /** 26 * Base panel for displaying a double map 27 * 28 * @name_ DoubleMap 29 * @class Control for displaying a double map 30 * @constructor 31 * @extends <a target="_blank" href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Button">Ext.Button</a> 32 */ 33 framework.widgets.doublemap.DoubleMap = Ext.extend(Ext.Viewport, 34 /** 35 * @lends framework.widgets.doublemap.DoubleMap.prototype 36 */ 37 { 38 /** 39 * Type layout 40 * @public 41 * @type String 42 */ 43 layout: 'border', 44 /** 45 * ID Double Map 46 * @public 47 * @type String 48 */ 49 id: 'doubleMap', 50 /** 51 * Configuratione Map1 (Single Map) 52 * @public 53 * @type {Object} 54 */ 55 mapConfig1: null, 56 /** 57 * Configuratione Map2 (Double Map) 58 * @public 59 * @type {Object} 60 */ 61 mapConfig2: null, 62 /** 63 * ID Toolbar Region 64 * @public 65 * @type {String} 66 */ 67 toolbarRegion: null, 68 /** 69 * ID West Region 70 * @public 71 * @type {String} 72 */ 73 westRegion: null, 74 /** 75 * ID extra control Region 76 * @public 77 * @type {String} 78 */ 79 extraControlsRegion: null, 80 /** 81 * RASViewer Map 1 (Single Map) 82 * @public 83 * @type {framework.RASViewer} 84 */ 85 app1: null, 86 /** 87 * RASViewer Map 2 (Double Map) 88 * @public 89 * @type {framework.RASViewer} 90 */ 91 app2: null, 92 /** 93 * ID viewer Region 1 (Single Map) 94 * @public 95 * @type {String} 96 */ 97 viewer1Region: null, 98 /** 99 * ID viewer Region 2 (Double Map) 100 * @public 101 * @type {String} 102 */ 103 viewer2Region: null, 104 /** 105 * ID tools Region 106 * @public 107 * @type {String} 108 */ 109 toolsRegion: null, 110 /** 111 * ID tools Header 112 * @public 113 * @type {String} 114 */ 115 toolsHeader: null, 116 /** 117 * If starting with syncronize maps 118 * @public 119 * @type {Boolean} 120 */ 121 syncMaps:false, 122 /** 123 * If starting with visible double map 124 * @public 125 * @type {Boolean} 126 */ 127 secondMapVisible:false, 128 /** 129 * ID button sincronized map 130 * @public 131 * @type {String} 132 */ 133 mapsSyncButtonId: null, 134 /** 135 * Lista dei voli 136 * @public 137 * @type {Object} 138 */ 139 mapVoli: null, 140 /** 141 * Contatore per il messaggio di attesa di risposta dei servizi utilizzati 142 * dall'applicativo 143 * @public 144 * @type {Number} 145 */ 146 extAjaxCount: 0, 147 /** 148 * Componente per il messaggio di attesa di risposta dei servizi utilizzati 149 * dall'applicativo 150 * @public 151 * @type {Ext.LoadMask} 152 */ 153 busyMaskExtAjax: null, 154 /** 155 * Messaggio di attesa di risposta dei servizi utilizzati 156 * dall'applicativo 157 * @public 158 * @type {String} 159 */ 160 loadingMessage: 'Elaborazione in corso..', 161 /** 162 * the base Ajax Url for ajax request 163 * default "" 164 * @public 165 * @type String 166 */ 167 baseUrlDigest: '', 168 /** 169 * the custom Url for saved map 170 * default "" 171 * @public 172 * @type String 173 */ 174 customUrl: '/sardegnafotoaeree/', 175 /** 176 * Hide or show print button 177 * 178 * @public 179 * @type Boolean 180 */ 181 hidePrint: false, 182 /** 183 * Hide or show link button 184 * 185 * @public 186 * @type Boolean 187 */ 188 hideLinker: false, 189 190 /** 191 * Method: listeners 192 * 193 * @private 194 */ 195 listeners: { 196 afterlayout: function() { 197 var self = this; 198 Ext.getCmp(this.viewer1Region).setHeight(this.getHeight()); 199 Ext.getCmp(this.viewer2Region).setHeight(this.getHeight()); 200 if ((this.app1) && this.app1 !== undefined && this.app1.portal !== undefined) { 201 this.app1.portal.setHeight(this.getHeight()); 202 this.app1.portal.doLayout(); 203 var scale = this.app1.mapPanel.map.getScale(); 204 this.app1.mapPanel.map.zoomToScale(scale + 1); 205 this.app1.mapPanel.map.zoomToScale(scale); 206 //ready event 207 this.app1.on('ready', function(o) { 208 if (self.syncMaps) { 209 try { 210 Ext.getCmp(self.mapsSyncButtonId).registerSync(); 211 } catch (err) {} 212 } 213 self.fireEvent('map1Ready', self.app1.mapPanel.map); 214 }); 215 216 Ext.Ajax.on("beforerequest", function(){ 217 this.extAjaxCount++; 218 if (!this.busyMaskExtAjax) { 219 this.busyMaskExtAjax = new Ext.LoadMask( 220 this.app1.mapPanel.map.div, { 221 msg: this.loadingMessage 222 } 223 ); 224 } 225 this.busyMaskExtAjax.show(); 226 227 },this); 228 229 Ext.Ajax.on("requestcomplete", function(){ 230 this.extAjaxCount--; 231 if(this.extAjaxCount === 0) { 232 this.busyMaskExtAjax.hide(); 233 } 234 },this); 235 236 } 237 if ((this.app2) && this.app2 !== undefined && this.app2.portal !== undefined) { 238 this.app2.portal.setHeight(this.getHeight()); 239 this.app2.portal.doLayout(); 240 //ready event 241 this.app2.on('ready', function(o) { 242 self.fireEvent('map2Ready', self.app2.mapPanel.map); 243 }); 244 } 245 } 246 }, 247 /** 248 * Method: getViewportId 249 * 250 * @private 251 */ 252 getViewportId: function(config){ 253 var res = this.id; 254 if (config && config.id){ 255 res = config.id; 256 } 257 return res; 258 }, 259 /** 260 * Method: constructor 261 * 262 * @private 263 */ 264 constructor: function(config) { 265 // Impostazione id dinamici 266 this.id = this.getViewportId(config); 267 this.toolbarRegion = this.id + "_north_region"; 268 this.westRegion = this.id + "_west_region"; 269 this.extraControlsRegion = this.id + "_extra_region"; 270 this.viewer1Region = this.id + "_viewer1"; 271 this.viewer2Region = this.id + "_viewer2"; 272 this.printMode = Ext.isDefined(config.printMode) ? config.printMode : false; 273 this.toolsRegion = this.id + "_header_tbar"; 274 this.mapsSyncButtonId = this.id + "_mapsSyncButton"; 275 this.toggleColumnButtonId = this.id + "_toggleColumnsButton"; // private var 276 277 this.secondMapVisible = (config.secondMapVisible) ? config.secondMapVisible : false; 278 this.syncMaps = (config.syncMaps) ? config.syncMaps : true; 279 280 this.baseUrlDigest = config.baseUrlDigest; 281 this.customUrl= config.customUrl; 282 this.hidePrint = config.hidePrint; 283 this.hideLinker = config.hideLinker; 284 285 var myItems = new Array(); 286 var centerItem = { 287 region: "center", 288 border: false, 289 layout: 'column', 290 items: [ 291 {id: this.viewer1Region, 292 columnWidth: (this.secondMapVisible) ? 0.5 : 1, 293 height: 300}, 294 {id: this.viewer2Region, 295 columnWidth: (this.secondMapVisible) ? 0.5 : 0, 296 height: 300} 297 ] 298 }; 299 if (this.printMode) { 300 myItems.push({ 301 xtype: "panel", 302 id: this.toolbarRegion, 303 html: '<div class="printHeader" id="printHeader"><div class="smTitle">'+ 304 '<img src="theme/app/img/sfa.png" alt="Logo SardegnaFotoAeree" />'+ 305 '</div><div class="rasLogo">' + 306 '<img title="Regione Autonoma della Sardegna" alt="Logo Regione '+ 307 'Autonoma della Sardegna" src="theme/app/img/ras.png" /></div>', 308 height: 60, 309 border: false }); 310 centerItem.x = 0; 311 centerItem.y = 60; 312 centerItem.height = 500; 313 centerItem.width = 975; 314 centerItem.cls = "mapContainer"; 315 centerItem.autoHeight = false; 316 myItems.push(centerItem); 317 myItems.push({ 318 x:0, y:560, 319 xtype: "panel", 320 id: 'notesPanel', 321 html: '<textarea name="note" rows="10" class="printNotes">Aggiungi qui le tue note.</textarea>', 322 border: false}); 323 } else { 324 myItems.push({id: this.westRegion, region: "west", width: 0}); 325 myItems.push(centerItem); 326 myItems.push({ 327 xtype: "panel", 328 id: this.toolbarRegion, 329 html: '<br><br>', 330 region: 'north', 331 height: 0, 332 border: false, 333 tbar: { 334 id: this.toolsRegion, 335 cls: "tbarHeader", 336 items: [{ 337 xtype: "button", 338 iconCls: 'smbutton', 339 width: 160, 340 height: 30, 341 tooltip: 'ricarica il navigatore', 342 handler: function() { 343 window.open(this.customUrl, "_self"); 344 }, 345 scope: this 346 }, '->', 347 { 348 xtype: "framework_togglecolumnbutton", 349 id: this.toggleColumnButtonId, 350 mainPanel: this.viewer1Region, 351 secondaryPanel: this.viewer2Region, 352 panelsContainer: this.id, 353 iconCls: 'dmbutton', 354 //cls: 'dmBtn', 355 pressedCls: 'dmBtnPressed', 356 width: 30, 357 height: 30, 358 pressed: (config.secondMapVisible) ? config.secondMapVisible : this.secondMapVisible 359 }, 360 { 361 xtype: "framework_doubleprintmap", 362 doubleMapComponent: this, 363 id: this.id + "_doubleprintmap", 364 hidden: this.hidePrint, 365 baseUrl: this.baseUrlDigest 366 }, 367 { 368 xtype: "framework_doublemaplinker", 369 doubleMapComponent: this, 370 id: this.id + "_doublemaplinker", 371 hidden: this.hideLinker, 372 baseUrl: this.baseUrlDigest, 373 customUrl: this.customUrl 374 } 375 ] 376 } 377 }); 378 } 379 Ext.apply(this, { 380 items: myItems}); 381 382 383 framework.widgets.doublemap.DoubleMap.superclass.constructor.apply(this, arguments); 384 385 this.toolsHeader = []; 386 if (!this.printMode) { 387 this.toolsHeader[0] = { 388 ptype: "framework_infolinker", 389 html: '<div class="gx-info-panel">' + 390 '<div class="logoras"></div>' + 391 '<div class="logo"></div>' + 392 '<h1>SardegnaFotoAeree</h1>' + 393 '<h2>versione 3.0</h2>' + 394 '<p><a href="http://www.regione.sardegna.it" target="_blank">Regione Autonoma della Sardegna</a></br /></br />'+ 395 'SardegnaFotoAeree è stato realizzato nell\'ambito del progetto SITR-EVO.<br /><br />' + 396 'Per ulteriori informazioni visita il portale di riferimento ' + 397 '<a href="http://www.sardegnageoportale.it" target="_blank">SardegnaGeoPortale</a><br /><br />'+ 398 '<a href="doc/manuale.pdf" target="_blank">Manuale d\'uso</a><br /><br />'+ 399 'SardegnaFotoAeree è stato sviluppato con il Framework OpenSource ' + 400 '<a href="../sardegnamappe_api/" target="_blank">SardegnaMappe API</a>'+ 401 '</p></div>', 402 actionTarget: this.toolsRegion 403 }; 404 } 405 406 var conf1 = this.readConfig(this.mapConfig1, this.viewer1Region, this.id + '_map1'); 407 var conf2 = this.readConfig(this.mapConfig2, this.viewer2Region, this.id + '_map2'); 408 409 this.app1 = new framework.RASViewer(conf1); 410 this.app2 = new framework.RASViewer(conf2); 411 this.setSize(1300, 800); 412 413 if (!this.printMode) { 414 var extraControlsPanel = new Ext.Container({ 415 id: this.extraControlsRegion, 416 renderTo: Ext.getBody(), 417 items: [{ 418 xtype: 'framework_togglemapssyncbutton', 419 id: this.mapsSyncButtonId, 420 map1: this.app1.mapPanel.map, 421 map2: this.app2.mapPanel.map, 422 pressedCls: 'syncBtnPressed', 423 border: false, 424 pressed: this.syncMaps, 425 focusCls: '', 426 baseCls: '', 427 cls: 'syncBtn', 428 hidden: !this.secondMapVisible 429 }] 430 }); 431 } 432 433 }, 434 /** 435 * Method: readConfig 436 * 437 * @private 438 * @param {Object} config 439 * @param {Integer} positionId 440 * @param {Integer} mapId 441 */ 442 readConfig: function(config, positionId, mapId) { 443 if (this.printMode) { 444 var appItems = []; 445 var appTools = []; 446 } else { 447 var self = this; 448 var appItems = 449 [{ 450 xtype: "panel", 451 id: mapId + '_panelBaseLayerCombo', 452 cls: 'baseLayerCombo', 453 items: [ 454 { 455 xtype: 'framework_layerscombobox', 456 layers: config.map.layers, 457 groupName: 'background', 458 fieldLabel: 'Choose State', 459 displayField: 'name', 460 forceSelection: true, 461 triggerAction: 'all', 462 mode: 'local', 463 editable: false, 464 valueField: 'title', 465 order: orderGroup, 466 typeAhead: true, 467 width:130, 468 selectOnFocus:true, 469 listeners: { 470 layerSelected: function(layer) { 471 var parent = this.findParentByType('panel'); 472 if (parent.id.match(/map2/)) { 473 //remove photo from data that can be saved 474 self.app2.photo = undefined; 475 } 476 } 477 } 478 } 479 ] 480 }, { 481 xtype: "gxp_scaleoverlay" 482 }, { 483 xtype: "framework_panelmapoverview", 484 layersOverview: [new OpenLayers.Layer.WMS("Regione", 485 "http://webgis.regione.sardegna.it/geoserver/ows", 486 { 487 layers: 'dbu:LIMITEAMMINISTRREGIONALE', 488 format: "image/png" 489 //STYLES:'overview' 490 })], 491 maxRatio: 2048, 492 minRatio: 0.125, 493 maxResolution: 2048, 494 minResolution: 2048, 495 maxExtent: [1010000, 4290000, 1990000, 4590000], 496 restrictedExtent: [1209895, 4294504, 1786972, 4580410], 497 //html: '<div id="' + mapId + '_mapoverview"/>', 498 mapControlContainerId: mapId + '_mapoverview' 499 }, { 500 xtype: 'panel', 501 cls: "panel_tbarmap", 502 border: false, 503 width: 209, 504 tbar: { 505 id: mapId + '_tbarmap', 506 cls: "tbarmap", 507 style: { 508 marginTop: '0px', 509 marginLeft: '0px' 510 }, 511 items: []} 512 }]; 513 514 var appTools = [ 515 { 516 ptype: "framework_layermanager", 517 id: mapId + "_layerManager", 518 groups: group_layer, 519 shortTitle: '', 520 outputConfig: { 521 id: mapId + "_tree", 522 autoScroll: true, 523 tbar: [] // we will add buttons to "tree.bbar" later 524 }, 525 outputTarget: this.westRegion 526 }, { 527 ptype: "gxp_zoomtoextent", 528 extent: [1209895, 4294504, 1786972, 4580410], 529 actionTarget: mapId + '_tbarmap' 530 }, { 531 ptype: "framework_zoomboxaction", 532 showZoomBoxAction: true, 533 toggleGroup: mapId + "_layertools", 534 actionTarget: mapId + '_tbarmap' 535 },{ 536 ptype: "framework_measureobliquephotos", 537 idBtn: mapId + '_MeasureObliquePhotosBtn', 538 idBtnLenght: mapId + '_MeasureBtnLenght', 539 idBtnArea: mapId + '_MeasureBtnArea', 540 idBtnHeight: mapId + '_MeasureObliquePhotosBtnHeight', 541 toggleGroup: mapId + "_layertools", 542 controlOptions: {immediate: true}, 543 actionTarget: mapId + '_tbarmap' 544 },/* { 545 ptype: "gxp_measure", 546 toggleGroup: "layertools", 547 controlOptions: {immediate: true}, 548 actionTarget: mapId + '_tbarmap' 549 },*/ { 550 // shared FeatureManager for feature editing, grid and querying 551 ptype: "gxp_featuremanager", 552 id: mapId + "_featuremanager", 553 maxFeatures: 20 554 }]; 555 } 556 557 var controls = [new OpenLayers.Control.Zoom()]; 558 controls.push(new OpenLayers.Control.Navigation()); 559 if (!this.printMode) { 560 controls.push(new OpenLayers.Control.Attribution()); 561 controls.push(new OpenLayers.Control.MousePosition({ 562 prefix: 'coordinate - <b>X: ', 563 separator: ' Y: ', 564 suffix: '</b>', 565 numDigits: 0, 566 emptyString: 'coordinate' 567 })); 568 } 569 config.map.controls = controls.concat(config.map.controls? config.map.controls:[]); 570 571 config.tools = appTools.concat(this.toolsHeader).concat(config.tools ? config.tools : []); 572 573 Ext.each(config.tools, function(el, index) { 574 if (!el.actionTarget) { 575 el.actionTarget = mapId + '_tbarmap'; 576 } 577 }, this); 578 579 this.toolsHeader = []; 580 581 config.map.items = (this.printMode) ? [] : appItems.concat(config.map.items? config.map.items:[]); 582 config.map.id = mapId; 583 config.portalConfig = { 584 renderTo: Ext.getCmp(positionId).body, 585 height: Ext.getCmp(positionId).body.getHeight(), 586 layout: "fit", 587 style: "background-color:#ffffff;", 588 items: [mapId] 589 }; 590 // if (westRegionCollapsed) { 591 //config.portalConfig.items[1].hidden = true; 592 // } 593 config.proxy = proxyurl; 594 config.defaultSourceType = "gxp_wmscsource"; 595 var plugin = [{ 596 ptype: 'gxp_loadingindicator', 597 loadingMapMessage: 'loading...' 598 }]; 599 config.mapPlugins = plugin.concat(config.mapPlugins? config.mapPlugins: []); 600 return config; 601 }, 602 603 /** 604 * Method: checkToggleColumnButton 605 * Controllo attivare/disattivare la modalità Mappa Doppia 606 * 607 * @public 608 * @param {Boolean} onlyshow 609 */ 610 checkToggleColumnButton: function(onlyshow){ 611 if (!this.secondMapVisible) { 612 Ext.getCmp(this.toggleColumnButtonId).toggle(true); 613 this.showSecondMap(); 614 } 615 else if (!onlyshow) { 616 Ext.getCmp(this.toggleColumnButtonId).toggle(false); 617 this.hideSecondMap(); 618 } 619 620 }, 621 622 /** 623 * Method: showSecondMap 624 * Visualizza la mappa doppia 625 * 626 * @private 627 */ 628 showSecondMap: function(){ 629 Ext.getCmp(this.viewer1Region).columnWidth= 0.5; 630 Ext.getCmp(this.viewer1Region).setWidth(this.getWidth()/2); 631 Ext.getCmp(this.viewer2Region).columnWidth= 0.5; 632 Ext.getCmp(this.viewer2Region).setWidth(this.getWidth()/2); 633 this.doLayout(); 634 635 Ext.getCmp(this.mapsSyncButtonId).setVisible(true); 636 637 638 this.secondMapVisible = true; 639 }, 640 641 /** 642 * Method: hideSecondMap 643 * Nasconde la mappa doppia 644 * 645 * @private 646 */ 647 hideSecondMap: function(){ 648 Ext.getCmp(this.viewer1Region).columnWidth= 1; 649 Ext.getCmp(this.viewer1Region).setWidth(this.getWidth()); 650 Ext.getCmp(this.viewer2Region).columnWidth= 0; 651 Ext.getCmp(this.viewer2Region).setWidth(0); 652 this.doLayout(); 653 Ext.getCmp(this.mapsSyncButtonId).setVisible(false); 654 this.secondMapVisible = false; 655 }, 656 657 /** 658 * Method: isMapSyncActive 659 * Controlla se è attiva la sincronizzazione 660 * 661 * @public 662 * @return {Ext.getCmp} 663 */ 664 isMapSyncActive: function(){ 665 return Ext.getCmp(this.mapsSyncButtonId).syncActive; 666 }, 667 668 /** 669 * Method: activeObliqueMapSync 670 * Assegna lo stato attivo alla modalità foto oblique 671 * 672 * @public 673 * 674 */ 675 activeObliqueMapSync: function() { 676 Ext.getCmp(this.mapsSyncButtonId).obliquePhotoActive = true; 677 } 678 }); 679 680 Ext.reg('framework_doublemap', framework.widgets.doublemap.DoubleMap); 681 682 683 684