Last active
August 29, 2015 14:15
-
-
Save plablo09/523ead285da997c2d8f9 to your computer and use it in GitHub Desktop.
layout del buscador de imágenes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * @include OpenLayers/Map.js | |
| * @include OpenLayers/Projection.js | |
| * @include OpenLayers/Layer/XYZ.js | |
| * @include OpenLayers/Tile/Image.js | |
| * @include OpenLayers/Control/Navigation.js | |
| * @include OpenLayers/Control/ZoomBox.js | |
| * @include OpenLayers/Control/NavigationHistory.js | |
| * @include GeoExt/data/LayerStore.js | |
| * @include GeoExt/widgets/MapPanel.js | |
| * @include GeoExt/widgets/Action.js | |
| * @include GeoExt/widgets/ZoomSlider.js | |
| * @include GeoExt/widgets/tips/ZoomSliderTip.js | |
| * @include GeoExt/widgets/tree/LayerContainer.js | |
| */ | |
| Ext.namespace("App"); | |
| //Variables globales: | |
| var vector = new OpenLayers.Layer.Vector('resultado'); | |
| var map; | |
| var miHtml; | |
| var defaultFeature = new OpenLayers.Feature(); | |
| var proj4326 = new OpenLayers.Projection("EPSG:4326"); | |
| var proj900913 = new OpenLayers.Projection("EPSG:900913"); | |
| var format = new OpenLayers.Format.WKT(); | |
| function filterMallaAjax(feature){ | |
| //alert('Me hablaban? Esta es mi geometría: ' + feature.geometry) | |
| var urlVal = '/malla_imagenes/filterMalla' | |
| var dataVal={geometry:String(feature.geometry),resultados:resultadosVal,ortofoto:ortofotoVal,satelite:sateliteVal} | |
| $.ajax({ | |
| url:urlVal, | |
| data:dataVal, | |
| success: function(data) { | |
| var geojsonParser = new OpenLayers.Format.GeoJSON({ | |
| 'externalProjection': proj4326, | |
| 'internalProjection': proj900913 | |
| }); | |
| vector.destroyFeatures(); | |
| vector.addFeatures(geojsonParser.read(data)); | |
| storeMallas.bind(vector); | |
| map.addLayers([vector]); | |
| map.zoomToExtent(poligono.getDataExtent()); | |
| Ext.getCmp('resultado').getSelectionModel().bind(vector); | |
| }, | |
| error:function(){ | |
| alert("Failed to retrieve required information."); | |
| } | |
| }); | |
| }; | |
| //Definimos los estilos | |
| var defaultStyle = new OpenLayers.Style({ | |
| pointRadius: 6, | |
| fillOpacity: 0.5, | |
| fillColor: '#8000FF' | |
| }); | |
| var selectStyle = new OpenLayers.Style({ | |
| pointRadius: 6, | |
| fillOpacity: 0.5, | |
| fillColor: '#45909F' | |
| }); | |
| var styleMap = new OpenLayers.StyleMap({'default': defaultStyle, 'select': selectStyle}); | |
| //En esta capa vamos a guardar el dibujo del usuario: | |
| var poligono = new OpenLayers.Layer.Vector('resultado', {styleMap: styleMap, projection:proj900913}); | |
| App.layout = (function() { | |
| /* | |
| * Private | |
| */ | |
| /** | |
| * Method: createMap | |
| * Create the map. | |
| * | |
| * Returns: | |
| * {OpenLayers.Map} The OpenLayers.Map instance. | |
| */ | |
| var extent = OpenLayers.Geometry.fromWKT(extentWKT); | |
| var createMap = function() { | |
| return new OpenLayers.Map({ | |
| projection: new OpenLayers.Projection("EPSG:900913"), | |
| displayProjection: new OpenLayers.Projection("EPSG:4326"), | |
| units: "m", | |
| numZoomLevels: 18, | |
| zoom:3, | |
| maxResolution: 156543.0339, | |
| maxExtent: new OpenLayers.Bounds(extent.getBounds()), | |
| allOverlays: false, | |
| theme: null, | |
| controls: [] | |
| }); | |
| }; | |
| //map.addControl() | |
| /** | |
| * Method: createLayers | |
| * Create the layers. | |
| * | |
| * Returns: | |
| * {Array({OpenLayers.Layer}) Array of layers. | |
| */ | |
| var bounds = new OpenLayers.Bounds(-13300643.24,1619653.11,-9393610.43,4075421.95); | |
| var proj4326 = new OpenLayers.Projection("EPSG:4326"); | |
| var proj900913 = new OpenLayers.Projection("EPSG:900913"); | |
| var point = new OpenLayers.LonLat(-102.15, 19.41); | |
| point.transform(proj4326, proj900913); | |
| var createLayers = function() { | |
| return [ | |
| //vector = new OpenLayers.Layer.Vector('resultado'), | |
| poligono, | |
| new OpenLayers.Layer.OSM("OSM"), | |
| new OpenLayers.Layer.OSM( | |
| "OSMap (T@H)", | |
| "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png" | |
| ) | |
| ]; | |
| }; | |
| /** | |
| * Method: createLayerStore | |
| * Create a GeoExt layer store. | |
| * | |
| * Parameters: | |
| * map - {OpenLayers.Map} The Map instance. | |
| * layers - {Array({OpenLayers.Layer})} The layers to add to the store. | |
| * | |
| * Returns: | |
| * {GeoExt.data.LayerStore} The layer store. | |
| * | |
| */ | |
| var createLayerStore = function(map, layers) { | |
| return new GeoExt.data.LayerStore({ | |
| map: map, | |
| layers: layers | |
| }); | |
| }; | |
| /** | |
| * Method: createTbarItems | |
| * Create map toolbar items | |
| * | |
| * Returns: | |
| * {Array({GeoExt.Action})} An array of GeoExt.Action objects. | |
| */ | |
| var drawPolygon = new OpenLayers.Control.DrawFeature(poligono, | |
| OpenLayers.Handler.Polygon, { | |
| featureAdded : function(feature) { | |
| this.deactivate(); | |
| // se clona el feature para poder mandarlo con otra | |
| // proyeccion al servidor y conservar aqui la geometria en | |
| // 900913 | |
| var clonada = feature.clone(); | |
| clonada.geometry.transform(proj900913, proj4326); | |
| // define default feature to be THIS feature | |
| defaultFeature = clonada; | |
| filterMallaAjax(clonada); | |
| } | |
| } | |
| ); | |
| drawPolygon.events.register('activate', this, function(element){ | |
| if (poligono.features[0]!=undefined){ | |
| poligono.features[0].destroy() | |
| } | |
| }); | |
| var createTbarItems = function(map) { | |
| var actions = []; | |
| actions.push(new GeoExt.Action({ | |
| iconCls: "pan", | |
| map: map, | |
| pressed: true, | |
| toggleGroup: "tools", | |
| allowDepress: false, | |
| tooltip: "Pan: Haz click en el mapa y arrastra hasta la posición deseada", | |
| control: new OpenLayers.Control.Navigation() | |
| })); | |
| actions.push(new GeoExt.Action({ | |
| iconCls: "zoomin", | |
| map: map, | |
| toggleGroup: "tools", | |
| allowDepress: false, | |
| tooltip: "Acercar: Haz click sobre el mapa y arrastra para hacer zoom a la zona deseada", | |
| control: new OpenLayers.Control.ZoomBox({ | |
| out: false | |
| }) | |
| })); | |
| actions.push(new GeoExt.Action({ | |
| iconCls: "zoomout", | |
| map: map, | |
| toggleGroup: "tools", | |
| allowDepress: false, | |
| tooltip: "Alejar: Haz click sobre el mapa para alejar", | |
| control: new OpenLayers.Control.ZoomBox({ | |
| out: true | |
| }) | |
| })); | |
| actions.push(new GeoExt.Action({ | |
| text: "Dibuja", | |
| iconCls: "drawpolygon", | |
| map: map, | |
| toggleGroup: "tools", | |
| allowDepress: false, | |
| tooltip: "Dibujar polígono: Haz click sobre el mapa para poner los vértices del polígono. Al volver a hacer click sobre el control el polígono anterior se borrará", | |
| control: drawPolygon | |
| })); | |
| var ctrl = new OpenLayers.Control.NavigationHistory(); | |
| map.addControl(ctrl); | |
| actions.push(new GeoExt.Action({ | |
| control: ctrl.previous, | |
| iconCls: "back", | |
| tooltip: "Regresar al nivel de zoom anterior", | |
| disabled: true | |
| })); | |
| actions.push(new GeoExt.Action({ | |
| control: ctrl.next, | |
| iconCls: "next", | |
| tooltip: "Ir al siguiente nivel de zoom", | |
| disabled: true | |
| })); | |
| return actions; | |
| }; | |
| /* | |
| * Public | |
| */ | |
| return { | |
| /** | |
| * APIMethod: init | |
| * Initialize the page layout. | |
| */ | |
| init: function() { | |
| map = createMap(); | |
| //map.addControl(new OpenLayers.Control.LayerSwitcher()) | |
| var layers = createLayers(); | |
| var layerStore = createLayerStore(map, layers); | |
| new Ext.Viewport( | |
| { | |
| el : "mapa", | |
| layout : "border", | |
| items : [ | |
| { | |
| // title: "Map", | |
| region : "center", | |
| xtype : "gx_mappanel", | |
| map : map, | |
| layers : layerStore, | |
| items : [ { | |
| xtype : "gx_zoomslider", | |
| aggressive : true, | |
| vertical : true, | |
| height : 100, | |
| x : 10, | |
| y : 20, | |
| plugins : new GeoExt.ZoomSliderTip( | |
| { | |
| template : "Scale: 1 : {scale}<br>Resolution: {resolution}" | |
| }) | |
| } ], | |
| tbar : createTbarItems(map) | |
| }, | |
| { | |
| region : "east", | |
| width : 300, | |
| xtype : "tabpanel", | |
| tabPosition : 'top', | |
| activeTab : 0, | |
| id : 'tab-panel', | |
| items : [ { | |
| xtype : 'panel', | |
| title : 'Criterios de busqueda', | |
| id : 'spot', | |
| layout : { | |
| type : 'vbox', | |
| align : 'stretch', | |
| // pack : 'start' | |
| }, | |
| items : [ | |
| { | |
| id : 'op-busqueda', | |
| xtype : 'form', | |
| border : false, | |
| flex : 1, | |
| // height: 200, | |
| width : 250, | |
| items : [ | |
| { | |
| id: 'tipo-imagen', | |
| xtype: 'checkboxgroup', | |
| fieldLabel : 'Tipo de imagen', | |
| columns: 1, | |
| items: [ | |
| {boxLabel: 'Ortofoto', name: 'ortofoto', id:'ortofoto'}, | |
| {boxLabel: 'Imagen de satélite', name: 'satelite', id: 'satelite'} | |
| ] | |
| }, | |
| { | |
| width : 110, | |
| id : 'cmbResultados', | |
| mode : 'local', | |
| // emptyText : | |
| // '10', | |
| triggerAction : 'all', | |
| selectOnFocus : false, | |
| forceSelection : true, | |
| editable : false, | |
| xtype : 'combo', | |
| fieldLabel : 'Número de resultados', | |
| store : new Ext.data.ArrayStore( | |
| { | |
| id : 0, | |
| fields : [ | |
| 'id', | |
| 'resultados' ], | |
| data : [ | |
| [1,'0' ], | |
| [2,'10' ], | |
| [3,'20' ], | |
| [4,'30' ] | |
| ] | |
| }), | |
| valueField : 'id', | |
| displayField : 'resultados', | |
| value : '10' | |
| } ], | |
| buttonAlign : 'center', | |
| buttons : [ { | |
| ref : '../btnBuscar', | |
| text : 'Buscar', | |
| handler : function() { | |
| if (defaultFeature.geometry == undefined) { | |
| defaultFeature.geometry = map.getExtent().toGeometry(); | |
| defaultFeature = format.read(defaultFeature.geometry); | |
| defaultFeature.geometry.transform(proj900913,proj4326); | |
| } | |
| filterMallaAjax(defaultFeature); | |
| } | |
| } ] | |
| }, | |
| { | |
| title : "Resultados de la búsqueda", | |
| id : 'resultado', | |
| xtype : 'grid', | |
| store : storeMallas, | |
| flex : 1, | |
| // height: 200, | |
| width : 250, | |
| bbar : [ { | |
| ref : '../btnGuardar', | |
| text : 'Exportar resultados', | |
| tooltip : 'Exporta los resultados como archivo de excel', | |
| handler : function() { | |
| var seleccion = Ext.getCmp('resultado').getSelectionModel().getSelections(); | |
| if (seleccion.lengtht > 0) { | |
| var gids = new Array(); | |
| for (i = 0; i < seleccion.length; i++) { | |
| gids.push(seleccion[i].data.feature.fid); | |
| } | |
| } else { | |
| records = Ext.getCmp('resultado').getStore().getRange(); | |
| if (records.length == 0) { | |
| alert('No hay resultados para exportar') | |
| return | |
| } | |
| var gids = new Array(); | |
| for (i = 0; i < records.length; i++) { | |
| gids.push(records[i].data.feature.fid); | |
| } | |
| } | |
| url = '/malla_imagenes/save_in_excel?&gids='+ gids; | |
| window.location = url; | |
| } | |
| } ], | |
| columns : [ | |
| { | |
| header : 'Nombre', | |
| dataIndex : 'nombre' | |
| }, | |
| // { | |
| // header : 'Ruta', | |
| // dataIndex : 'ruta' | |
| // }, | |
| { | |
| header : 'Fecha', | |
| dataIndex : 'fecha' | |
| } | |
| ], | |
| listeners : { | |
| rowdblclick : selPreview | |
| }, | |
| sm : new GeoExt.grid.FeatureSelectionModel() | |
| } ] | |
| //items | |
| } | |
| ] | |
| } | |
| ] | |
| }); | |
| function renderBandInfo(bandJson){ | |
| var bandInfo=$.parseJSON(bandJson); | |
| var bandas = Object.keys(bandInfo); | |
| var renderedInfo = ""; | |
| for (var i=0; i<bandas.length;i++){ | |
| var banda = bandas[i]; | |
| renderedInfo = renderedInfo + "<p>" + banda + "</p>" + "<p> <strong>Tipo de datos:</strong> " + bandInfo[banda][0] + "</p>"+ | |
| "<p> <strong> Valor máximo:</strong> " + bandInfo[banda][1] + "</p>"+"<p> Valor mínimo: " + bandInfo[banda][3] + "</p>"+ | |
| "<p> <strong> Intérprete de color:</strong> " + bandInfo[banda][2] + "</p>"; | |
| } | |
| // var renderedInfo= "<h2>"+ bandInfo.banda_1 +"</h2>"+ | |
| // "<p>"+ parsedData.proposito +"</p>" | |
| return renderedInfo; | |
| } | |
| function renderWKT(wkt){ | |
| lista = String(wkt).split(","); | |
| var renderedWKT =""; | |
| for(var i=0;i<lista.length;i++){ | |
| renderedWKT = renderedWKT + "<p>" +lista[i] + "</p>" | |
| } | |
| return renderedWKT | |
| } | |
| function selPreview(grid, index, columnIndex, e) { | |
| var record = Ext.getCmp('resultado').getStore().getAt(index); | |
| var getUrl = '/metadata/'+ parseInt(record.get("metadata_id"))+'/layermetadata/'+'/view?format=json' | |
| $.ajax({ | |
| url:getUrl, | |
| success: function(data) { | |
| parsedData = $.parseJSON(data) | |
| miHTML = "<div class='styled-div-narrow'>"+ | |
| "<h1>Título</h1>"+ | |
| "<p>"+ parsedData.titulo +"</p>"+ | |
| "<h1>Descripción</h1>"+ | |
| "<p>"+ parsedData.descripcion +"</p>"+ | |
| "<h1>Propósito</h1>"+ | |
| "<p>"+ parsedData.proposito +"</p>"+ | |
| "<h1>Proceso</h1>"+ | |
| "<p>"+ parsedData.proceso +"</p>"+ | |
| "<h1>FECHA DE PUBLICACIÓN</h1>"+ | |
| "<p>"+ parsedData.fecha_publicacion +"</p>"+ | |
| "<h1>Autor</h1>"+ | |
| "<p>"+ parsedData.autor +"</p>"+ | |
| "<h1>Fuente</h1>"+ | |
| "<p>"+ parsedData.fuente +"</p>"+ | |
| "<h1>Fecha inicial</h1>"+ | |
| "<p>"+ parsedData.fecha_inicial +"</p>"+ | |
| "<h1>Fecha inicial</h1>"+ | |
| "<p>"+ parsedData.fecha_inicial +"</p>"+ | |
| "<h1>Proyección (WKT)</h1>"+ | |
| renderWKT(parsedData.proj_wkt)+ | |
| //"<p>"+ parsedData.proj_wkt +"</p>"+ | |
| "<h1>Formato</h1>"+ | |
| "<p>"+ parsedData.formato +"</p>"+ | |
| "<h1>Atributos de la imagen</h1>"+ | |
| "<p> <strong>Número de bandas:</strong>"+ parsedData.numero_bandas +"</p>"+ | |
| "<p> <strong>Coordenadas del origen:</strong>"+ parsedData.coords_origen +"</p>"+ | |
| "<p> <strong>Tamaño del pixel:</strong>"+ parsedData.pixel_size +"</p>"+ | |
| "<p> <strong>Número de renglones:</strong>"+ parsedData.n_rows +"</p>"+ | |
| "<p> <strong>Número de columnas:</strong>"+ parsedData.n_cols +"</p>"+ | |
| "<h1>Atributos de las bandas</h1>"+ | |
| "<p>"+ renderBandInfo(parsedData.atributos_bandas) +"</p>" + | |
| "</div>" | |
| // "<h1>Atributos de las bandas</h1>"+ | |
| // "<p>"+ parsedData.atributos_bandas +"</p>" | |
| var panelTablaOng = new Ext.Panel({ | |
| id: 'panelong', | |
| layout: "fit", | |
| autoScroll: true, | |
| html: miHTML | |
| }); | |
| var winPreview = new Ext.Window({ | |
| id: 'win-preview', | |
| title: "Metadatos de la imagen: " + record.get("nombre"), | |
| width: 350, | |
| height: 500, | |
| autoScroll: true, | |
| constrain: true, | |
| modal: true, | |
| expandOnShow: false, | |
| //closable: true, | |
| items:panelTablaOng, | |
| buttons:[{text:'Regresar', ref: '../btnRegresarVP', disabled: false, | |
| handler: function(){ | |
| miHtml = ''; | |
| Ext.getCmp('win-preview').close(); | |
| } | |
| }] | |
| }); | |
| winPreview.show(); | |
| }, | |
| error:function(){ | |
| alert("Failed to retrieve required information."); | |
| } | |
| }); | |
| } | |
| } | |
| }; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment