var mapPanel;
var oUtilizador = "";
var oEmail = "";
Ext.onReady(function() {
Ext.QuickTips.init();
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
// Neste exemplo, os layers provêem todos da mesma origem, pelo que o proxy não é utilizado
// No entanto, como queremos forçar o uso do proxy, o mesmo é usado precendento os pedidos todos...
// OpenLayers.ProxyHost = "http://84.91.3.11/cgi-bin/proxy.cgi?url=";
OpenLayers.ProxyHost = "";
var GeoLayer = Ext.data.Record.create([{
name : 'id',
type : 'int'
}, {
name : 'ord',
type : 'int'
}/*, {
name : 'nome',
type : 'string'
}*/ , {
name : 'titulo',
type : 'string'
}, {
name : 'layer',
type : 'string'
}, {
name : 'grupo',
type : 'string'
}, {
name : 'url',
type : 'string'
}, {
name : 'tipo',
type : 'string'
}, {
name : 'srid',
type : 'int'
}, {
name : 'estilo',
type : 'string'
}, {
name : 'qtip',
type : 'string'
}, {
name : 'singletile',
type : 'boolean'
}, {
name : 'activo',
type : 'boolean'
}, {
name : 'regulamento',
type : 'string'
}, {
name : 'observacoes',
type : 'string'
}, {
name : 'visivel',
type : 'boolean'
}, {
name : 'dataalteracao',
type : 'date',
dateFormat : 'c' // impecável: a data vem no formato ISO8601
}]);
var storeLayers = new Ext.data.JsonStore({
url : 'json_layers.php',
root : 'camadas',
idProperty : 'id',
fields : GeoLayer,
listeners : {
'load' : function() {
storeLayers.each(function(r) {
tip = '';
if(r.data['qtip'] == '') {
// tipURL = 'http://localhost:8080' + '/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=' + r.data['layer'] + '&legend_options=forceLabels:on';
tipURL = '/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=' + r.data['layer'] + '&legend_options=forceLabels:on';
// tipURL = OpenLayers.ProxyHost + r.data['url'] + 'REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=' + r.data['layer'] + '&legend_options=forceLabels:on';
// tipURL = r.data['url'] + 'REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=' + r.data['layer'] + '&legend_options=forceLabels:on';
// tipURL = OpenLayers.ProxyHost + encodeURIComponent(tipURL); // http://84.91.3.11/geoserver/gwc/service/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=pdm_condicionantes_etrs89:ren_etrs89&legend_options=forceLabels:onhttp%3A//84.91.3.11/geoserver/gwc/service/wms%3FREQUEST%3DGetLegendGraphic%26VERSION%3D1.0.0%26FORMAT%3Dimage/png%26LAYER%3Dpdm_condicionantes_etrs89%3Aren_etrs89%26legend_options%3DforceLabels%3Aon
// tipURL = OpenLayers.ProxyHost + tipURL; // http://84.91.3.11/geoserver/gwc/service/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=pdm_condicionantes_etrs89:ren_etrs89&legend_options=forceLabels:onhttp%3A//84.91.3.11/geoserver/gwc/service/wms%3FREQUEST%3DGetLegendGraphic%26VERSION%3D1.0.0%26FORMAT%3Dimage/png%26LAYER%3Dpdm_condicionantes_etrs89%3Aren_etrs89%26legend_options%3DforceLabels%3Aon
tip = r.data['titulo'] + '
' + '';
// tip = r.data['titulo'] + '
' + '';
} else {
tip = r.data['qtip'];
}
map.addLayer(new OpenLayers.Layer.WMS(r.data['titulo'], OpenLayers.ProxyHost + r.data['url'], {
layers : r.data['layer'],
format : format,
transparent : true
}, {
singleTile : r.data['singletile'],
ratio : 1,
isBaseLayer : false,
visibility : r.data['visivel'],
group : r.data['grupo'],
iconCls : "xnd-icon",
icon : r.data['tipo'],
qtip : tip
}));
// console.log('Adicionado o layer ' + r.data['layer']);
});
Ext.getCmp('tree').setTitle(storeLayers.getCount() + ' Camadas', '');
}
}
});
storeLayers.load();
var bounds = new OpenLayers.Bounds(-119191.40749999962, -300404.80399999936, 162129.08110000013, 276083.7674000006);
var options = {
maxExtent : bounds,
// scales : [100000, 500000, 250000, 100000, 50000, 25000, 10000, 5000, 1000, 500],
resolutions : [140.0, 70.0, 27.999999999999996, 13.999999999999998, 6.999999999999999, 2.8, 1.4, 0.27999999999999997, 0.13999999999999999],
// maxResolution : "auto",
projection : "EPSG:3763", // string
displayProjection : new OpenLayers.Projection("EPSG:3763"),
title : 'Mapa',
units : 'm',
allOverlays : true
};
map = new OpenLayers.Map(options);
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Scale());
var victor = new OpenLayers.Layer.Vector("Editable Vectors", {
displayInLayerSwitcher : false
});
var panel = new OpenLayers.Control.Panel({
// displayClass: 'customEditingToolbar',
div : OpenLayers.Util.getElement('botoesEdicao')
});
var navigate = new OpenLayers.Control.Navigation({
title : "Pan Map"
});
var drawPoint = new OpenLayers.Control.DrawFeature(victor, OpenLayers.Handler.Point, {
title : "Marca pontos",
displayClass : 'olControlDrawFeaturePoint',
handlerOptions : {
multi : true
}
});
var drawPath = new OpenLayers.Control.DrawFeature(victor, OpenLayers.Handler.Path, {
title : "Traça linhas",
displayClass : "olControlDrawFeaturePath",
handlerOptions : {
multi : true
}
});
var drawPolygon = new OpenLayers.Control.DrawFeature(victor, OpenLayers.Handler.Polygon, {
title : "Desenha polígonos",
displayClass : "olControlDrawFeaturePolygon",
handlerOptions : {
multi : true
}
});
var drag = new OpenLayers.Control.DragFeature(victor, {
title : "Move",
displayClass : "olControlNavigation"
});
var edit = new OpenLayers.Control.ModifyFeature(victor, {
title : "Altera a geometria",
displayClass : "olControlModifyFeature"
});
panel.addControls([edit, drag, drawPolygon, drawPath, drawPoint]);
panel.defaultControl = navigate;
map.addControl(panel);
format = 'image/png';
// http://84.91.3.13/cgi-bin/tilecache/tilecache.cgi?LAYERS=cartobase&SERVICE=WMS&BBOX=-36002.0,89990.0,-8000.0,115000.0
// http://192.254.254.3/cgi-bin/tilecache/tilecache.cgi?LAYERS=cartobase&SERVICE=WMS&BBOX=-36002.0,89990.0,-8000.0,115000.0
map.addLayers([victor]);
var route_layer = new OpenLayers.Layer.Vector("Pesquisa", {
displayInLayerSwitcher : false,
styleMap : new OpenLayers.StyleMap(new OpenLayers.Style({
strokeColor : "#ff9933",
strokeWidth : 3
}))
});
map.addLayer(route_layer);
var distancia = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
eventListeners : {
measure : function(evt) {
alert("Distância: " + evt.measure + evt.units);
}
}
});
var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
eventListeners : {
measure : function(evt) {
alert("Área: " + evt.measure + evt.units);
}
}
});
map.addControl(distancia);
map.addControl(area);
var toggleGroup = "measure controls";
var buttonDistancia = new Ext.Toolbar.Button({
text : 'Distância',
enableToggle : true,
toggleGroup : toggleGroup,
listeners : {
toggle : function(button, pressed) {
// console.log("User toggled the '" + button.text + "' button: " + ( pressed ? 'on' : 'off'));
if(pressed) {
// console.log('Vai activar ' + this.text);
distancia.activate();
} else {
// console.log('Vai desactivar ' + this.text);
distancia.deactivate();
}
}
}
});
var buttonArea = new Ext.Toolbar.Button({
text : 'Área',
enableToggle : true,
toggleGroup : toggleGroup,
listeners : {
toggle : function(button, pressed) {
// console.log("User toggled the '" + button.text + "' button: " + ( pressed ? 'on' : 'off'));
if(pressed) {
// console.log('Vai activar ' + this.text);
area.activate();
} else {
// console.log('Vai desactivar ' + this.text);
area.deactivate();
}
}
}
});
map.addControl(new OpenLayers.Control.Attribution());
// map.addControl(new OpenLayers.Control.MousePosition( {id: "coordenadas_rato", prefix: "ETRS89-TM06 ", displayProjection: map.baseLayer.projection, numDigits: 0} ));
var posicaoRato = new OpenLayers.Control.MousePosition({
id : "coordenadas_rato"
});
map.addControl(posicaoRato);
var displayProjectionSelectorCombo = new GeoExt.ux.DisplayProjectionSelectorCombo({
map : map,
controls : [posicaoRato],
updateMapDisplayProjection : true,
projections : ['EPSG:3763', 'EPSG:4326', 'EPSG:900913', 'EPSG:27492', 'EPSG:20790'],
width : 200
});
/*
var zoomin_action = new GeoExt.Action({
text : "Zoom In",
control : new OpenLayers.Control.ZoomBox({
alwaysZoom : true
}),
map : map,
// button options
toggleGroup : "tools",
allowDepress : false,
tooltip : "Zoom In",
// check item options
group : "tools"
});
*/
var nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
// panel.addControls([nav.next, nav.previous]);
// map.addControl(panel);
var zoom_next = new GeoExt.Action({
text : "Seguinte",
control : nav.next,
toggleGroup : toggleGroup,
enableToggle : true,
map : map,
tooltip : "Vista Seguinte"
});
var zoom_previous = new GeoExt.Action({
text : "Anterior",
control : nav.previous,
toggleGroup : toggleGroup,
enableToggle : true,
map : map,
tooltip : "Vista Anterior"
});
var scaleStore = new GeoExt.data.ScaleStore({
map : map
});
// console.debug(scaleStore);
var zoomSelector = new Ext.form.ComboBox({
store : scaleStore,
emptyText : "Zoom Level",
tpl : '1 : {[Math.round(values.scale)]}
',
editable : false,
triggerAction : 'all', // needed so that the combo box doesn't filter by its current content
mode : 'local' // keep the combo box from forcing a lot of unneeded data refreshes
});
zoomSelector.on('select', function(combo, record, index) {
map.zoomTo(record.data.level);
}, this);
map.events.register('zoomend', this, function() {
var scale = scaleStore.queryBy(function(record) {
return this.map.getZoom() == record.data.level;
});
if(scale.length > 0) {
scale = scale.items[0];
zoomSelector.setValue("1 : " + Math.round(scale.data.scale));
} else {
if(!zoomSelector.rendered)
return;
zoomSelector.clearValue();
}
});
var zoom_max = new GeoExt.Action({
control : new OpenLayers.Control.ZoomToMaxExtent(),
map : map,
text : "Ver tudo",
tooltip : "Ver todo o município"
});
var storeFreguesias = new Ext.data.SimpleStore({
fields : ['value', 'text', 'bbox'],
data : [
['1', 'CAMINHA', new OpenLayers.Bounds(-61791, 234832,-44596, 249969)],
['2', 'VIANA DO CASTELO', new OpenLayers.Bounds(-62207, 215437,-42363, 240207)],
['3', 'ESPOSENDE', new OpenLayers.Bounds(-56552, 199831,-47389, 217466)],
['4', 'PÓVOA DE VARZIM', new OpenLayers.Bounds(-54840, 188542,-38261, 200494.25)],
['5', 'VILA DO CONDE', new OpenLayers.Bounds(-53112, 176401,-39968, 195312)],
['6', 'MATOSINHOS', new OpenLayers.Bounds(-49964, 167066,-38786, 178367)],
['7', 'VILA NOVA DE GAIA', new OpenLayers.Bounds(-45540, 148978,-26534, 164378)],
['8', 'ESPINHO', new OpenLayers.Bounds(-43774, 144096,-38737, 150847.171875)]
]
});
// console.debug(scaleStore);
var freguesiaSelector = new Ext.form.ComboBox({
store : storeFreguesias,
emptyText : "Municípios",
tpl : '{[values.text]}
',
editable : false,
triggerAction : 'all', // needed so that the combo box doesn't filter by its current content
mode : 'local' // keep the combo box from forcing a lot of unneeded data refreshes
});
freguesiaSelector.on('select', function(combo, record, index) {
// console.debug(record);
map.zoomToExtent(record.data.bbox);
// map.zoomTo(record.data.bbox);
}, this);
// create map panel
mapPanel = new GeoExt.MapPanel({
id : "mapa",
title : "Mapa",
region : "center",
// height: 400,
// width: 600,
map : map,
// center : new OpenLayers.LonLat(-7.849731, 39.639538).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3763")),
center : new OpenLayers.LonLat(-48000, 168000),
zoom : 1,
tbar : ['->', displayProjectionSelectorCombo, buttonDistancia, buttonArea, zoom_previous, zoom_next],
bbar : [zoom_max, zoomSelector, freguesiaSelector]
});
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//make a new form
// var form_user = new Ext.form.FormPanel({
// (...)
////////////////////////////////////////////////
var layerSelecionado = null;
var slider = new GeoExt.LayerOpacitySlider({
// layer: wms,
// aggressive : true,
width : 100,
disabled : true,
// isFormField : true,
// inverse : true, // não funciona se inverter; dá erro no browser
// fieldLabel : "opacity",
// renderTo: "slider",
plugins : new GeoExt.LayerOpacitySliderTip({
template : '
Transparência: {opacity}%
'
}),
listeners : {
change : function(slider, value) {
/*
var node = tree.getSelectionModel().getSelectedNode();
if(node) {
node.layer.setOpacity(value / 100.0); // / 100.0
}
*/
if(layerSelecionado) {
layerSelecionado.setOpacity(value / 100.0);
}
}
}
});
var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());
var buttonObject = new Ext.Button({
id : 'associar',
text : "Associar",
visible : false,
handler : function() {
if(layerSelecionado) {
if(( layerSelecionado instanceof OpenLayers.Layer) && layerSelecionado.getVisibility()) {
slider.enable();
slider.setLayer(layerSelecionado);
} else {
layerSelecionado = null;
slider.disable();
}
} else {
layerSelecionado = null;
slider.disable();
}
}
});
var tree = new GeoExt.ux.tree.LayerTreeBuilder({
id : 'tree',
title : 'Camadas',
// region: "east",
// width: 250,
autoScroll : true,
enableDD : true,
rootVisible : false,
lines : false,
// widget custom properties
wmsLegendNodes : false,
vectorLegendNodes : false,
listeners : {
click : function(treenode, event) {
layerSelecionado = treenode.layer;
buttonObject.onClick(event);
// var node = tree.getSelectionModel().getSelectedNode(); // Urh... ainda está o anterior
}
},
bbar : [/* {
text: "Regulamento",
handler: function() {
var node = tree.getSelectionModel().getSelectedNode();
if(node) {
alert("Vai aceder ao regulamento da camada " + node.text + ".");
} else {
alert("Tem que ter um layer selecionado.");
}
}
},{
text: "Imprimir",
handler: function() {
var node = tree.getSelectionModel().getSelectedNode();
if(node) {
alert("Vai imprimir a camada " + node.text + ".");
} else {
alert("Tem que ter um layer selecionado.");
}
}
}, */
// 1 buttonNext = new Ext.Button({text:'Touch me'});
{
text : "Remover",
handler : function() {
var node = tree.getSelectionModel().getSelectedNode();
if(node) {
map.removeLayer(node.layer);
}
}
}, {
text : "Exportar para KML",
handler : function() {
var node = tree.getSelectionModel().getSelectedNode();
if(node) {
// location.href = 'http://geoportal.cm-agueda.pt/remotewms/kml?layers=' + node.layer.params['LAYERS'];
location.href = OpenLayers.ProxyHost + 'http://localhost:8080' + '/geoserver/kml?layers=' + node.layer.params['LAYERS'];
} else {
alert("Tem que ter um layer selecionado.");
}
}
}, slider]
});
/*
var pParticipacao = new Ext.Panel({
xtype : 'panel',
id : 'idpParticipacao',
border : false,
title : 'Participação',
collapsible : true,
collapsed : false,
items : [form_user, form_participacao, form_logout],
});
*/
var myData = [['', 'Pontos'], ['', 'Linhas'], ['', 'Áreas'], ['', 'Pontos e Áreas'], ['', 'Pontos e Linhas'], ['', 'Pontos, Linhas e Áreas'], ['', 'Pontos, Linhas e Áreas (na mesma cor)'], ['', 'Superfície (raster)']];
var store = new Ext.data.SimpleStore({
fields : ['icone', 'significado']
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store : store,
// width: 280,
// stripeRows: true,
// autoExpandColumn: 'significado',
columns : [{
header : "Símbolo",
width : 68,
dataIndex : 'icone'
}, {
id : 'significado',
header : "Significado",
width : 215,
dataIndex : 'significado'
}]
});
/*
storeVias = new Ext.data.JsonStore({
root : 'resultados',
totalProperty : 'total',
// idProperty: 'toponimia',
// layer : vecLayer,
fields : ['nome', 'lx', 'ly', 'distancia'],
proxy : new Ext.data.HttpProxy({
url : 'json_procura_osm.php'
}),
autoLoad : false
});
*/
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Bogus Tab',
html: 'Viva o Jorge',
items: [gridVias]
},{
title: 'Another Tab',
html: 'Viva a Ana'
},{
title: 'Closable Tab',
html: 'Viva a Matilde',
closable:true
}]
});
/*
var pMedias = new Ext.TabPanel({
// renderTo: 'PanelMedias',
region: 'center',
xtype: 'panel',
deferredRender: false,
activeTab: 0,
border: false,
defaults: {
autoScroll: true,
disabled: true,
html: ''
},
items: [{
title: 'Praias',
}, {
title: 'Contribuintes',
}, {
title: 'Ocupações',
}, {
title: 'Títulos',
}, {
title: 'Ruas',
items: [gridVias]
}, {
title: 'Datas',
}]
});
*/
var storeVias = new GeoExt.data.FeatureStore({
layer : route_layer,
fields : ['nome', 'distancia', 'tipo', 'lx', 'ly'],
proxy : new GeoExt.data.ProtocolProxy({
protocol : new OpenLayers.Protocol.HTTP({
url : 'json_procura_osm.php',
format : new OpenLayers.Format.GeoJSON()
})
})
});
/*
map.events.register('zoomend', map, function(e){
// jgr zumLevel=map.getZoom()+5;
// OpenLayers.Console.log('map.getZoom()= ', map.getZoom(), ' map.getResolution()=', map.getResolution());
if (map.getResolution() > fronteira)
storeVias.removeAll();
});
*/
var pesquisaVias = new Ext.ux.form.SearchField({
store : storeVias,
width : 120
});
// create grid panel configured with feature store
var gridVias = new Ext.grid.GridPanel({
id : 'gridResultados',
title : "Pesquisa livre",
region : "east",
store : storeVias,
collapsible : true,
// collapsed: true, // se começar encolhido, o search fiel fica muito estreito...
// width : "100%",
height : 320,
loadMask : true,
viewConfig : {
forceFit : true
},
columns : [// { header: 'id', dataIndex: 'id', width: 50 },
{
header : 'Designação',
dataIndex : 'nome',
width : 60
}, {
header : 'Tipo',
dataIndex : 'tipo',
width : 32
}, {
header : 'Distância',
dataIndex : 'distancia',
width : 32
}],
tbar : ['Pesquisar: ', ' ', pesquisaVias],
bbar : new Ext.PagingToolbar({
pageSize : 25,
store : storeVias,
displayInfo : true,
displayMsg : 'Resultados {0} a {1} de {2}',
emptyMsg : "Sem resultados para apresentar"
}),
sm : new GeoExt.grid.FeatureSelectionModel({
singleSelect : true
}),
listeners : {
'rowclick' : {
'fn' : function(grid, index, evt) {
var r = grid.getStore().getAt(index);
// lx e ly vêem da base de dados
var lx = r.get('lx');
var ly = r.get('ly');
// OpenLayers.Console.log(feature.fid, feature.attributes['toponimia']);
// var geometry = r.get('the_geom');//feature.geometry;
var center = new OpenLayers.LonLat(lx, ly);
//geometry.getBounds().getCenterLonLat();
//Ext.Msg.alert('Aviso 2!', '' + center);
map.setCenter(center, 7);
// 15 é demais
// map.setCenter(center, map.getZoomForExtent(geometry.getBounds(),false)); // 15 é demais
// OpenLayers.Console.log( geometry );
}
}
}
//"Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"
"
});
var viewport = new Ext.Viewport({
layout : "border",
items : [{
region : 'north',
xtype : 'panel',
height : 100,
collapsible : false,
border : true,
// bodyCssClass : 'painelNorte',
contentEl : 'norte'
}, {
region : "west",
title : 'Navegação',
autoScroll : true,
id : "tools",
//title: "Menus",
collapsible : true,
//border: true,
width : 280,
layout : 'accordion',
layoutConfig : {
animate : true
},
items : [tree /*, pParticipacao */],
split : true
}, {
region : 'east',
id : 'east-panel',
title : 'Informações',
//border: true,
autoScroll : true,
width : 300,
split : true,
collapsedTitle : 'Clique aqui para ver as Informações',
collapsible : true,
collapsed : false,
//collapseMode: 'mini',
//collapsesize: 5,
minSize : 200,
cmargins : '0 10 0 0',
//headerAsText :true,
//header:true,
layout : 'accordion',
layoutConfig : {
animate : true
},
frame : true,
items : [tabs, {
title : 'Bem vindo',
id : 'bemvindo',
autoScroll : true,
// collapsed: false,
contentEl : 'bemvindotext'
}, {
title : 'Regulamento',
id : 'regulamento',
autoScroll : true,
contentEl : 'legendapdm'
}, {
title : 'Legenda',
id : 'legenda',
autoScroll : true,
items : [{
contentEl : 'legendaplantas'
}, grid]
}, {
title : 'Créditos',
id : 'info',
contentEl : 'infotext'
}]
}, mapPanel]
});
// form_logout.hide();
viewport.doLayout();
});