index.html
15.6 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
343
344
345
346
347
348
349
350
<!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 {
text-align: left;
border: 0px solid #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
font-size: 0.8em;
padding-bottom: 10px;
}
</style>
<script>
/*
@TODO sempre verificar os exemplos
*/
</script>
</head>
<body class="yui-skin-sam fundoPonto">
<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="guiamovel1.htm" target="_blank">Ícones inseridas 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>
</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>
</p>
</fieldset>
<fieldset>
<p>
A interface OpenLayers passou a ser o padrão do i3Geo com a versão 4.4. O Modo TILE permite que o mapa seja construído em pequenas partes (TILES) apresentando uma navegabilidade contínua quando se desloca o mapa (pan). No modo normal, é desenhada apenas uma imagem para cada camada do mapa. Esse último modo pode apresentar uma performance melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou não é controlado pela
variável <i>i3GEO.Interface.openlayers.TILES = false|true</i>
</p>
<p>
<a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES = false</a>
</p>
<p>
<a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES = true</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">Ativação de um layer de fundo</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="botoeshtm.htm" target="_blank">Barra com botões criados via HTML</a>
</p>
<p>
<a href="botoes5.htm" target="_blank">Como inserir botões na barra de botões</a>
</p>
<p>
<a href="botoes2.htm" target="_blank">Construção das barras de botões via javascript, sem necessidade de definir elementos no HTML</a>
</p>
<p>
<a href="botoes3.htm" target="_blank">Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos</a>
</p>
<p>
<a href="botoes4.htm" target="_blank">Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos e estilo diferente</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="fotos.htm" target="_blank">Mapa com a ferramenta "carousel" posicionada início do mapa</a>
</p>
<p>
<a href="fotos.htm" target="_blank">Lista de fotos em uma guia</a>
</p>
<p>
<a href="aplic1.htm" target="_blank">Busca rápida</a>
</p>
<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>