index.html
15.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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>i3Geo</title>
<link rel="stylesheet" type="text/css" href="../admin/html/admin.css">
<style>
body, td {
padding-top: 0px;
COLOR: #2F4632;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: rgb(250, 250, 250);
margin: auto;
font-size: 12px;
}
</style>
<script>
/*
@TODO sempre verificar os exemplos
*/
</script>
</head>
<body class="yui-skin-sam">
<center>
<div class="bordaSuperior"> </div>
<div class="mascaraPrincipal" id="divGeral">
<img src="../imagens/i3geo1.jpg">
<br>
<h1>Exemplos de configuração da interface do i3geo</h1>
<h2>Diversos</h2>
<fieldset>
<p>
Para ver os parâmetros de inicialização com ms_configura basta digitar <a href="http://localhost/i3geo/ms_criamapa.php?ajuda" target=_blank >http://localhost/i3geo/ms_criamapa.php?ajuda</a>
</p>
<p>
<a href="vinde.htm" target="_blank">Navegador de WMS cadastrados na INDE Brasileira</a>
</p>
<p>
<a href="vindegm.phtml" target="_blank">Navegador de WMS cadastrados na INDE Brasileira com Google Maps</a>
</p>
<p>
<a href="guiamovel1.htm" target="_blank">Ícones inseridos no puxador lateral da guia móvel</a>
</p>
<p>
<a href="guiamovel2.htm" target="_blank">Puxador lateral da guia móvel sem ícones</a>
</p>
<p>
<a href="guiaesquerda.htm" target="_blank">Guias laterais posicionados à esquerda do mapa</a>
</p>
<p>
<a href="../ms_criamapa.php?mapext=&perfil=&temasa=&layers=&restauramapa=8&interface=exemplos/painel1.htm" target="_blank">Painel que abre um mapa e gráficos. O mapa é restaurado de um mapa salvo anteriormente e que contém dois gráficos</a>
</p>
<p>
<a href="infodiv.htm" target="_blank">Ao clicar no mapa (tip) as informações são mostradas em uma posição fixa no mapa</a>
</p>
<p>
<a href="dobra.htm" target="_blank">Botão de troca de interface localizado no canto inferior direito</a>
</p>
<p>
<a href="semdobra.htm" target="_blank">Botão de troca de interface localizado na guia móvel</a>
</p>
</fieldset>
<h2>Mashups</h2>
<fieldset>
<p>
<a href="mashupol1.htm" target="_blank">Openlayers em um iframe</a>
</p>
<p>
<a href="../mashups" target="_blank">Mais sobre mashups</a>
</p>
</fieldset>
<h2>Interface OpenLayers</h2>
<fieldset id="seqOL">
<p>
Sequência de exemplos que abordam a construção de interfaces customizadas. O código dos exemplos são mostrados em uma janela flutuante e foram organizados para facilitar o entendimento do funcionamento do código do i3Geo<br>
<i>Para abrir o exemplo sem a apresentação do código, basta alterar a URL eliminando o texto "codemirror.php?&pagina="</i>
</p>
<p>
<a title="Carregamento do codigo" href="codemirror.php?&pagina=cursodsv1.htm" target="_blank">[1]</a>
<a title="Cria" href="codemirror.php?&pagina=cursodsv2.htm" target="_blank">[2]</a>
<a title="Cria e inicia o mapa" href="codemirror.php?&pagina=cursodsv3.htm" target="_blank">[3]</a>
<a title="Mostra o mapa" href="codemirror.php?&pagina=cursodsv4.htm" target="_blank">[4]</a>
<a title="Tamanho definido no estilo" href="codemirror.php?&pagina=cursodsv5.htm" target="_blank">[5]</a>
<a title="Posicionamento definido no estilo" href="codemirror.php?&pagina=cursodsv6.htm" target="_blank">[6]</a>
<a title="Inclusao da escala numerica" href="codemirror.php?&pagina=cursodsv7.htm" target="_blank">[7]</a>
<a title="Inclusao da arvore de camadas" href="codemirror.php?&pagina=cursodsv8.htm" target="_blank">[8]</a>
<a title="Controle da arvore com YUI" href="codemirror.php?&pagina=cursodsv9.htm" target="_blank">[9]</a>
<a title="Ajuste da arvore via parametros" href="codemirror.php?&pagina=cursodsv10.htm" target="_blank">[10]</a>
<a title="Mostra apenas a opcao de legenda na arvore" href="codemirror.php?&pagina=cursodsv11.htm" target="_blank">[11]</a>
<a title="Legenda aberta na arvore" href="codemirror.php?&pagina=cursodsv12.htm" target="_blank">[12]</a>
<a title="Exemplo de uso de templates na legenda" href="codemirror.php?&pagina=cursodsv13.htm" target="_blank">[13]</a>
<a title="Alteracao da arvore via JS " href="codemirror.php?&pagina=cursodsv14.htm" target="_blank">[14]</a>
<a title="Arvore do catalogo" href="codemirror.php?&pagina=cursodsv15.htm" target="_blank">[15]</a>
<a title="Menu suspenso" href="codemirror.php?&pagina=cursodsv16.htm" target="_blank">[16]</a>
<a title="Alteracao no menu" href="codemirror.php?&pagina=cursodsv17.htm" target="_blank">[17]</a>
<a title="Componentes OpenLayers" href="codemirror.php?&pagina=cursodsv18.htm" target="_blank">[18]</a>
<a title="Barra de botoes" href="codemirror.php?&pagina=cursodsv19.htm" target="_blank">[19]</a>
<a title="Inclusao de um novo botao" href="codemirror.php?&pagina=cursodsv20.htm" target="_blank">[20]</a>
<a title="Barra de botoes em linha" href="codemirror.php?&pagina=cursodsv21.htm" target="_blank">[21]</a>
<a title="Botao com funcao Ajax" href="codemirror.php?&pagina=cursodsv22.htm" target="_blank">[22]</a>
<a title="Barra de botoes fora do mapa" href="codemirror.php?&pagina=cursodsv23.htm" target="_blank">[23]</a>
<a title="Legenda fora do mapa" href="codemirror.php?&pagina=cursodsv24.htm" target="_blank">[24]</a>
<a title="Altera a funcao de atualizacao da legenda" href="codemirror.php?&pagina=cursodsv25.htm" target="_blank">[25]</a>
<a title="Legenda sem alteracao da funcao de atualizacao" href="codemirror.php?&pagina=cursodsv26.htm" target="_blank">[26]</a>
<a title="Desenho de poligono" href="codemirror.php?&pagina=cursodsv27.htm" target="_blank">[27]</a>
<a title="Catalogo customizado" href="codemirror.php?&pagina=cursodsv28.htm" target="_blank">[28]</a>
<a title="Coordenadas no rodape do mapa e dobra de troca de API" href="codemirror.php?&pagina=cursodsv29.htm" target="_blank">[29]</a>
</p>
</fieldset>
<fieldset>
<p>
A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com base na API do OpenLayers. Esse objeto pode receber os métodos dessa API, permitindo modificar o mapa. Alguns parâmetros são controlados por variáveis específicas do i3Geo.
</p>
<p>
<a href="openlayers3.htm" target="_blank">Modo TILE com uma área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER = 1;</i>
</p>
<p>
<a href="openlayers4.htm" target="_blank">Sem nenhum layer de fundo. A lista de layers de fundo e o controle sobre qual será mostrado no início do mapa é feito simplesmente modificando-se os parâmetros desses layers no HTML utilizado no mapa</a>
</p>
<p>
<a href="openlayers5.htm" target="_blank">Modifica a extensão geográfica máxima de apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT = [-63.712484, -20.765721, -42.385294, -9.136698];</i>
</p>
</fieldset>
<fieldset>
<p>
Como incluir um controle baseado na API do OpenLayers
</p>
<p>
<a href="controleol.htm" target="_blank">Posição do mouse</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Menu</b>
</legend>
<p>
<a href="menus1.htm" target="_blank">Modifica o menu suspenso</a>
</p>
<p>
<a href="menus2.htm" target="_blank">Não mostra o menu de administração</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Guias e janelas </b>
</legend>
<p>
<span style="font-weight: bold;"></span><a href="guias3.htm" target="_blank">Modificação na guia que mostra o catálogo de dados. Uso de combo ao invés de árvore</a>
</p>
<p>
<a href="guias2.htm" target="_blank">Guias do tipo sanfona</a>
</p>
<p>
<span style="font-weight: bold;"></span><a href="guias4.htm" target="_blank">Inicia com uma guia específica</a>
</p>
<p>
<a href="fotos1.htm" target="_blank">Guias do tipo sanfona com fotos</a>
</p>
<p>
<a href="guias1.htm" target="_blank">Retorna à guia padrão após adicionar um tema</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Barras de botões</b>
</legend>
<p>
<a href="barraemlinha.htm" target="_blank">Barra de botões em linha, com formatação livre</a>
</p>
<p>
<a href="barraemlinha1.htm" target="_blank">Barra de botões em linha, posicionada dentro do corpo do mapa</a>
<p>
<a href="barraemlinha2.htm" target="_blank">Barra de botões em linha, posicionada dentro do corpo do mapa e com aplicação de estilo transparente</a>
<p>
<a href="botoestop.htm" target="_blank">Barra do tipo "olho de peixe" posicionada na parte superior do mapa</a>
</p>
<p>
<a href="botoes6.htm" target="_blank">Apenas alguns ícones são mostrados e com uma função alterada (binóculo)</a>
</p>
<p>
<a href="botoes1.htm" target="_blank">Barra apenas com os ícones</a>
</p>
<p>
<a href="botoes5.htm" target="_blank">Como inserir botões na barra de botões</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Legenda</b>
</legend>
<p>
<a href="legenda1.htm" target="_blank">Legenda com grupos</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Customização de ferramentas existentes</b>
</legend>
<p>
<a href="aplic2.htm" target="_blank">Adiciona uma camada extra via javascript</a>
</p>
<p>
<a href="camadas5.htm" target="_blank">Vincula temas na árvore de camadas para ligar/desligar em bloco</a>
</p>
</fieldset>
<fieldset>
<legend>
<b>Inclusão de um mapa dentro de uma página usando DIV</b>
</legend>
<p>
<a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Botões com destaque laranja, em dois grupos na parte superior e mapa com zoom
</p>
<p>
<a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Botões com destaque laranja, em um único grupo na parte superior e mapa sem zoom
</p>
<p>
<a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias, com os botões na parte superior e a legenda em um outro local da página
</p>
<p>
<a href="mashup9.htm" target="_blank">Exemplo 3a </a>- O mesmo que o 3 mas usando o Open Street Map
</p>
<p>
<a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias, com os botões na parte superior e a legenda em uma janela flutuante
</p>
<p>
<a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e apenas com os botões de naveção em uma janela flutuante
</p>
<p>
<a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa posicionado no canto superior esquerdo, sem as guias e apenas com os botões de naveção em uma janela flutuante
</p>
</fieldset>
<fieldset>
<legend>
<b>Inclusão de um mapa dentro de uma página em um IFRAME</b>
</legend>
<p>
<a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle de tamanho
</p>
<p>
<a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho controlado<br>
</p>
</fieldset>
<h2>Interface Google Maps</h2>
<fieldset>
<p>
<a href="googlemapssanfona.phtml" target="_blank">Guias do tipo sanfona</a>
</p>
<p>
<a href="googlemapscomogc.php" target="_blank">Como adicionar uma camada WMS do i3Geo em um mapa normal do Google Maps</a>
</p>
</fieldset>
<h2>Configuração de janelas, árvores de camadas e adição de temas</h2>
<fieldset>
<p>
<a href="adicionatema.htm" target="_blank">Como definir as camadas que serão incluídas no mapa na inicialização por meio da configuração de propriedades via Javascript</a>
</p>
<p>
<a href="janelas.htm" target="_blank">Opções de criação de janelas flutuantes</a>
</p>
<p>
<a href="arvoredetemas.htm" target="_blank">Construtor de opções da árvore de adição de temas</a>
</p>
<p>
<a href="arvoredecamadas.htm" target="_blank">Construtor de opções da árvore de camadas</a>
</p>
<p>
<a href="combos.htm" target="_blank">Criação de combos baseados na árvore de camadas e lista de colunas de um tema</a>
</p>
<p>
<a href="camadas1.htm" target="_blank">Árvore expandida</a>
</p>
<p>
<a href="camadas2.htm" target="_blank">Legenda expandida</a>
</p>
<p>
<a href="camadas3.htm" target="_blank">Árvore simplificada</a>
</p>
<p>
<a href="camadas4.htm" target="_blank">Opção "mais temas" na guia de camadas</a>
</p>
<p>
<a href="legenda2.htm" target="_blank">Árvore com grupos</a>
</p>
</fieldset>
<h2>Cálculos</h2>
<fieldset>
<p>
<a href="calculo1.htm" target="_blank">Distâncias</a>
</p>
</fieldset>
<h2>Login</h2>
<fieldset>
<p>
<a href="login.htm" target="_blank">Login simples</a> Abre uma janela de diálogo para que o usuário faça login. Nesse exemplo não é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.
</p>
<p>
<a href="login1.htm" target="_blank">Login simples com verificação</a> Abre uma janela de diálogo para que o usuário faça login. Ao contrário do anterior nesse exemplo é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.
</p>
<p>
<a href="login2.htm" target="_blank">Login com página de verificação anterior</a> Abre uma janela de diálogo para que o usuário faça login. O código javascript só fica exposto após o login.
</p>
<p>
<a href="login3.php" target="_blank">Exigência de login </a>A página só é aberta se o usuário estiver logado.
</p>
<p>
<a href="login4.htm" target="_blank">Exige login e verifica acesso à página </a>O mapa só é aberto se o usuário estiver cadastrado em um dos papéis que pode acessar essa operação.
</p>
</fieldset>
</div>
</center>
</body>
</html>