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 OpenLayers/Control.js 12 * @require OpenLayers/Control/SelectFeature.js 13 */ 14 15 /** 16 * @namespace framework.widgets.control 17 */ 18 Ext.namespace("framework.widgets.control"); 19 20 /** 21 * Provides control for getting Latitude and Longitude of a click point. 22 * @name_ InfoPoint 23 * @class Provides control for getting Latitude and Longitude of a click point. 24 * @constructor 25 * @extends <a target="_blank" href="http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html">OpenLayers.Control</a> 26 */ 27 framework.widgets.control.InfoPoint = OpenLayers.Class(OpenLayers.Control, 28 /** 29 * @lends framework.widgets.control.InfoPoint.prototype 30 */ 31 { 32 /** 33 * If provided, a marker will be drawn on this 34 * layer with the location returned by click point. 35 * @public 36 * @type OpenLayers.Layer.Vector 37 */ 38 layer: null, 39 /** 40 * If provided, calculate altitude from this layer. 41 * Insert layer WMS and record name with value altitude 42 * @public 43 * @type array (OpenLayers.Layer.WMS, String) 44 */ 45 layerAltitude: null, 46 47 48 radiusLayer: null, 49 /** 50 * paht for images marker, 51 * default value is "theme/app/img/". 52 * @public 53 * @type String 54 */ 55 markersImgPath: 'theme/app/img/', 56 /** 57 * Default options object 58 * @private 59 * @type object 60 */ 61 defaultHandlerOptions: { 62 'single': true, 63 'double': false, 64 'pixelTolerance': 0, 65 'stopSingle': false, 66 'stopDouble': false 67 }, 68 /** 69 * Control with Altitude 70 * @private 71 * @type OpenLayers.Control.WMSGetFeatureInfo 72 */ 73 controlPoint: null, 74 /** 75 * Unit of measurement for Altitude 76 * @private 77 * @type String 78 */ 79 textUnit: "metri", 80 /** 81 * Create a handler for the click event 82 * @private 83 */ 84 initialize: function(options) { 85 86 this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions); 87 OpenLayers.Control.prototype.initialize.apply(this, arguments); 88 this.handler = new OpenLayers.Handler.Click(this, 89 { 90 'click': this.onClick 91 }, 92 this.handlerOptions 93 ); 94 95 if (!this.layer) { 96 this.layer = new OpenLayers.Layer.Vector('infoPoint', { 97 displayInLayerSwitcher: false, 98 visibility: true, 99 styleMap: new OpenLayers.StyleMap({ 100 'default': new OpenLayers.Style({ 101 graphicZIndex: 100, 102 externalGraphic: this.markersImgPath + "fa_marker.png", 103 graphicWidth: 68, 104 graphicHeight: 32, 105 graphicOpacity: 1 106 })}) 107 }); 108 } 109 110 111 }, 112 /** 113 * APIMethod: activate 114 * Extend method OpenLayers.Control. 115 * Explicitly activates a control and it's associated 116 * handler if one has been set. Controls can be 117 * deactivated by calling the deactivate() method. 118 * 119 * Returns: 120 * {Boolean} True if the control was successfully activated or 121 * false if the control was already active. 122 * @private 123 */ 124 activate: function() { 125 126 127 if (this.active) { 128 return false; 129 } 130 else if (this.layerAltitude[0]) { 131 132 if (this.controlPoint == null) { 133 134 this.controlPoint = new OpenLayers.Control.WMSGetFeatureInfo({ 135 url: this.layerAltitude[0].url, 136 queryVisible: true, 137 layers: [this.layerAltitude[0]], 138 infoFormat: "application/json", 139 eventListeners: { 140 getfeatureinfo: function(evt) { 141 try { 142 var altitudeJSON = JSON.parse(evt.text.replace(this.layerAltitude[1], "Altitude")); 143 var altitude = null; 144 if (altitudeJSON.features.length) { 145 altitude = altitudeJSON.features[0].properties.Altitude; 146 altitude = Math.round(altitude) + ' ' + this.textUnit; 147 } 148 this.onClick(evt, altitude); 149 } catch (error) {} 150 this.controlPoint.deactivate(); 151 152 }, 153 scope: this 154 } 155 }); 156 this.map.addLayer(this.layerAltitude[0]); 157 this.map.addControl(this.controlPoint); 158 this.map.removeLayer(this.layerAltitude[0]); 159 160 } 161 162 this.controlPoint.activate(); 163 164 } 165 166 167 if (this.handler) { 168 this.handler.activate(); 169 } 170 this.active = true; 171 if (this.map) { 172 OpenLayers.Element.addClass( 173 this.map.viewPortDiv, 174 this.displayClass.replace(/ /g, "") + "Active" 175 ); 176 } 177 this.events.triggerEvent("activate"); 178 return true; 179 180 181 182 }, 183 /** 184 * Perform the click event getting longitude and latidude information from the selected point 185 * @private 186 * @param {Object} evt event object. 187 */ 188 onClick: function(evt, altitude) { 189 var position = this.map.getLonLatFromViewPortPx(evt.xy); 190 var location = position; 191 192 if (position instanceof OpenLayers.LonLat){ 193 //this.map.boundRicerca = new OpenLayers.Geometry.Point(position.lat, position.lon).getBounds().toGeometry(); 194 var bound = new OpenLayers.Bounds(position.lon - 1, position.lat - 1, position.lon + 1, position.lat + 1); 195 this.map.boundRicerca = bound.toGeometry(); 196 } 197 198 layerVector = this.layer; 199 if (this.map.getLayersByName(this.layer.name).length === 0) { 200 this.map.addLayer(this.layer); 201 } 202 ; 203 //create popup on "featureselected" 204 layerVector.events.on({ 205 featureselected: function(e) { 206 createPopup(e.feature); 207 } 208 }); 209 210 this.deactivate(); 211 212 if (this.map.getLayersByName(this.layer.name).length === 0) { 213 this.map.addLayer(this.layer); 214 } 215 216 // Reproject (if required) 217 position.transform(new OpenLayers.Projection("EPSG:3003"), this.map.getProjectionObject()); 218 219 //Se utilizzato in ambiente di ricerca, agganciare a questo evento la pulizia della mappa 220 this.map.events.triggerEvent('cleanSearchObjects'); 221 222 //remove marker 223 var f = this.layer.features; 224 if (this.map.boundRicerca != null) { 225 this.layer.removeAllFeatures({silent: true}); 226 } else { 227 for (i = f.length - 1; i > -1; i--) { 228 if (f[i].selfRemove) 229 this.layer.removeFeatures(f[i]); 230 } 231 } 232 233 //create new feature with marker 234 var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(position.lon, position.lat) 235 , null, {externalGraphic: this.markersImgPath + "fa_marker.png", 236 graphicWidth: 60, graphicHeight: 38, graphicYOffset: -38, fillOpacity: 1}); 237 var coordinateText = '<p>lon: ' + (Math.round(position.lon * 100) / 100) + '<br />lat: ' + Math.round(position.lat * 100) / 100 + '</p>'; 238 feature.selfRemove = true; 239 240 var altitudeText = ""; 241 242 if (altitude) { 243 altitudeText = '<h1>Altitudine</h1>' + 244 '<p> ' + (Math.round(parseFloat(altitude) * 100) / 100) + ' m</p>'; 245 } 246 247 feature.text = '<h1>Coordinate</h1>' + coordinateText + ' ' + altitudeText; 248 feature.location = location; 249 250 this.layer.addFeatures(feature); 251 this.events.triggerEvent('drawn'); 252 253 var selectCtrl = new OpenLayers.Control.SelectFeature([this.layer], {toggle: true, clickout: true}); 254 255 this.map.addControl(selectCtrl); 256 selectCtrl.activate(); 257 258 // remove popup 259 removePopup(); 260 createPopup(feature); 261 262 function removePopup() { 263 if (this.popupAddr) { 264 this.popupAddr.close(); 265 this.popupAddr.destroy(); 266 } 267 268 } 269 270 271 function createPopup(feature) { 272 273 removePopup(); 274 var hiddenPanelSearch = true; 275 if(Ext.getCmp('idPanelSearch') && feature.selfRemove == true) { 276 hiddenPanelSearch = false; 277 } 278 279 this.popupAddr = new framework.plugins.PopUp({ 280 location: feature, 281 width: 250, 282 border: false, 283 items: [{ 284 xtype: 'box', 285 cls: 'boxAltitude', 286 autoEl: {id: 'userId'}, 287 html: '<div class="popupAddr">' + feature.text + '</div>', 288 width: 'auto' 289 },{ 290 xtype: 'box', 291 cls: 'boxSearchPOI', 292 hidden: hiddenPanelSearch, 293 autoEl: {id: 'userId'}, 294 html: '<div class="popupSearchPOI">Cosa c\'รจ qui vicino? (in metri)</div>', 295 width: 'auto' 296 },{ 297 id: 'poiRadius', 298 xtype: 'textfield', 299 cls: 'fieldSearchPOIRadius', 300 hidden: hiddenPanelSearch, 301 //fieldLabel: 'Comune', 302 name: 'poiradius', 303 value: '100', 304 width: 100, 305 allowBlank: true 306 },{ 307 id: 'poiBtnSearchPOIRadius', 308 xtype: 'button', 309 hidden: hiddenPanelSearch, 310 cls: 'btnSearchPOIRadius', 311 text: ' ', 312 handler : function(){ 313 314 var comboPoi = Ext.getCmp('comboPoi'); 315 316 // Reproject (if required) 317 feature.location.transform(new OpenLayers.Projection("EPSG:3003"), new OpenLayers.Projection("EPSG:4326")); 318 319 var panelsearch = Ext.getCmp('idPanelSearch'); 320 321 panelsearch.selectItem(2); 322 323 comboPoi.store.baseParams.lon = feature.location.lon; 324 comboPoi.store.baseParams.lat = feature.location.lat; 325 comboPoi.store.baseParams.radius = Ext.getCmp('poiRadius').getValue(); 326 327 var searchText = comboPoi.getValue(); 328 329 // comboPoi.store.load(); 330 comboPoi.focus(); 331 comboPoi.setValue(searchText); 332 comboPoi.doQuery(searchText,true); 333 //Ext.getCmp("searchadvpoiID").hide(); 334 // comboPoi.clearBaseParams(comboPoi.store); 335 336 } 337 }], 338 maximizable: false, 339 collapsible: false 340 }); 341 342 // unselect feature when the popup 343 // is closed 344 this.popupAddr.on({ 345 close: function() { 346 if (OpenLayers.Util.indexOf(layerVector.selectedFeatures, this.feature) > -1) { 347 selectCtrl.unselect(this.feature); 348 } 349 } 350 }); 351 this.popupAddr.show(); 352 } 353 354 355 356 357 } 358 359 360 361 }); 362