abas.htm
10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>i3Geo - Mapa interativo</title>
<script type="text/javascript" src="../classesjs/i3geo.js"></script>
</head>
<!-- Neste exemplo, a aba legenda será retirada e será criada uma nova aba -->
<body id="i3geo" >
<center>
<table id='mst' summary="" style='display:none' width=100% cellspacing='0'>
<tr style="border:0px">
<td colspan=2 style="background-image:url('../imagenscabeca.png');height:10px"></td>
</tr>
<tr>
<td>
<table width=100% cellspacing=0 cellpadding=0 >
<tr>
<td title="libera guias" class=tdclaro id=encolheFerramentas style="vertical-align:top;width:5px;text-align:left;"></td>
<td>
<div class=verdeescuro style="top:0px;cursor:pointer;">
<div id=guia1 class=guia >Temas</div>
<div id=guia2 class=guia >Adiciona</div>
<!-- comentando a linha abaixo, a guia Legenda não será mostrada no mapa
<div id=guia4 class=guia >Legenda</div>
-->
<!-- Aqui é definida a nova aba. Ela deve ter um id entre 6 e 10 -->
<div id=guia6 class=guia >Nova aba</div>
<div id=guia5 class=guia >Mapas</div>
</div>
</td>
</tr>
</table>
</td>
<td style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
<div id="menus" ></div>
</td>
</tr>
<tr>
<td class=tdbranca id=contemFerramentas style="vertical-align:top;width:300px;text-align:left;">
<div id='guia1obj' >
<div style='left:5px;top:10px;' id=buscaRapida ></div>
<div id=listaPropriedades style='top:15px;' ></div>
<div id=listaTemas style='top:15px;'></div>
</div>
<div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
<!-- Opcionalmente, comente essa linha também para não incluir os dados da legenda
<div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
-->
<!-- aqui deve-se incluir o que será mostrado quando a guia 6 for ativada. O id deve ser definido utilizando-se 'obj' após o nome do id da guia -->
<div id='guia6obj' style=text-align:left;font-size:12px >
<p style=text-align:left >Esta é uma nova guia</p>
<p style=text-align:left >Abaixo estão alguns exemplos de operações</p><br>
<p style=text-align:left ><input style=cursor:pointer type=button value="redesenhar" onclick="remapaf()" /></p>
<br><div style=text-align:left id=resultadoExemplo ></div>
</div>
<div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
</td>
<td style="vertical-align:top;border-width:0px;">
<table width="100%" style="vertical-align:top;border-width:0px">
<tr><td class=verdeclaro id=contemImg >
<div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class=tdbranca >
<div id=visual ></div>
<div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
</td>
<td class=tdbranca >
<table width=100% ><tr>
<td class=tdbranca ></td>
<td class=tdbranca style=text-align:center >
<div id=localizarxy >
Aguarde...
</div>
</td>
<td class=tdbranca ><div id=escala ></div></td>
<td class=tdbranca ><div id=ondeestou ></div></td>
</tr>
<tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:10px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr>
</table>
</td>
</tr>
<tr style="border:0px"><td colspan=3 style="background-image:url('../imagensrodape.png');height:10px"></td></tr>
<tr style="border:0px"><td colspan=3 style=background-color:black ><input style="border:0px none; background-color:black;color:white;font-size:12pt;" type="text" size="1" id=bannerMensagem ></td></tr>
<tr style="border:0px"><td colspan=3 style=background-color:black;color:white id="emailInstituicao">geoprocessamento@mma.gov.br</td></tr>
</table>
</center>
<div id=barraDeBotoes1 style='display:none'>
<table style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><div ID='historicozoom' ></div></td></tr></table>
<table title="zoom" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/></td></tr></table>
<table title="desloca" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="desloca" alt="" src="../imagens/branco.gif" ID='pan'/></td></tr></table>
<table title="info" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="info" alt="" src="../imagens/branco.gif" id='identifica'/></td></tr></table>
<table title="geral" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="geral" alt="" src="../imagens/branco.gif" ID='zoomtot'/></td></tr></table>
<table title="mede" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="mede" alt="" src="../imagens/branco.gif" id='mede'/></td></tr></table>
<table title="area" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="area" alt="" src="../imagens/branco.gif" id='area'/></td></tr></table>
</div>
<div id=barraDeBotoes2 style='display:none'>
<table style="width:100%"><caption style="text-align:center"> </caption>
<tr><td style='background-color:rgb(250,250,250);'><img title="" alt="" src="../imagens/branco.gif" id='sobeferramentas'/></td></tr>
</table>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="imprimir" alt="" src="../imagens/branco.gif" id='imprimir'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="reinicia" alt="" src="../imagens/branco.gif" id='reinicia'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="extensao" alt="" src="../imagens/branco.gif" id='exten'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="referencia" alt="" src="../imagens/branco.gif" id='referencia'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="insere xy" alt="" src="../imagens/branco.gif" id='inserexy'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="texto" alt="" src="../imagens/branco.gif" id='textofid'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="selecao" alt="" src="../imagens/branco.gif" id='selecao'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="google" alt="" src="../imagens/branco.gif" id='google'/>
</div>
<div style='display:inline;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="insere grafico" alt="" src="../imagens/branco.gif" id='inseregrafico'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="lente" alt="" src="../imagens/branco.gif" id='lentei'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="scielo" alt="" src="../imagens/branco.gif" id='scielo'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="confluencias" alt="" src="../imagens/branco.gif" id='confluence'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="busca na wikipedia" alt="" src="../imagens/branco.gif" id='wiki'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="3d" alt="" src="../imagens/branco.gif" id='v3d'/>
</div>
<div style='display:none;background-color:rgb(250,250,250);'>
<p style='font-size:6px;'> </p>
<img title="fotos" alt="" src="../imagens/branco.gif" id='buscafotos'/>
</div>
<table style="width:100%;"><tr><td style='background-color:rgb(250,250,250);'><p style='font-size:6px;'> </p><img title="" alt="" src="../imagens/branco.gif" id='desceferramentas'/></td></tr></table>
</div>
<script type="text/javascript">
//
//esta função contém o código customizado desta interface
//
function minhaFuncao()
{
var retornoDoResultado = function(retorno)
{
$i("resultadoExemplo").innerHTML += "<br><br>"+retorno.data
}
//
//aqui alguns exemplos de chamada em ajax
//o objeto cpObj já está criado e pode ser reaproveitado
//
//retorna uma string com código javascript
var p = g_locaplic+"/classesphp/mapa_controle.php?funcao=escalagrafica&g_sid="+g_sid;
cpObj.call(p,"retornaBarraEscala",retornoDoResultado);
//retorna um objeto JSON
var p = g_locaplic+"/classesphp/mapa_controle.php?funcao=pegalistademenus&g_sid="+g_sid;
cpObj.call(p,"pegalistademenus",retornoDoResultado);
}
var g_locaplic = protocolo()+"://"+window.location.host+"/i3geo";
var g_templateLegenda = "";
var g_mapaRefDisplay = "block";
var objmapa = new Mapa();
var g_visual = "default";
var g_autoRedesenho = 0;
var g_tempo_aplicar = 4000;
objmapa.guiaTemas = "guia1";
objmapa.guiaMenu = "guia2";
objmapa.guiaLegenda = "guia4";
objmapa.guiaListaMapas = "guia5";
/*
Inicializa o mapa
*/
//
//aqui é definida a função que será executada após a inicialização do mapa
//
objmapa.finaliza = "minhaFuncao()";
objmapa.inicializa();
if($i("escala") && objmapa.w < 500)
{$i("escala").style.display="none";}
</script>
</body>
</html>