root / i3geo / exemplos / index.html @ 4972
History | View | Annotate | Download (11.7 KB)
| 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|---|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<title>i3Geo</title> |
| 5 |
|
| 6 |
<link rel="stylesheet" type="text/css" href="../admin/html/admin.css"> |
| 7 |
<style>
|
| 8 |
body,td {
|
| 9 |
text-align: left;
|
| 10 |
border: 0px solid #FFFFFF;
|
| 11 |
font-family: Verdana, Arial, Helvetica, sans-serif;
|
| 12 |
position: relative;
|
| 13 |
font-size: 0.8em;
|
| 14 |
padding-bottom: 10px;
|
| 15 |
}
|
| 16 |
</style>
|
| 17 |
<script>
|
| 18 |
/*
|
| 19 |
@TODO sempre verificar os exemplos
|
| 20 |
*/
|
| 21 |
</script>
|
| 22 |
</head>
|
| 23 |
<body class="yui-skin-sam fundoPonto"> |
| 24 |
<center>
|
| 25 |
<div class="bordaSuperior"> </div> |
| 26 |
<div class="mascaraPrincipal" id="divGeral"> |
| 27 |
<img src="../imagens/i3geo1.jpg"> |
| 28 |
<br>
|
| 29 |
<h1>Exemplos de configuração da interface do i3geo</h1> |
| 30 |
<h2>Diversos</h2> |
| 31 |
<fieldset>
|
| 32 |
<p>
|
| 33 |
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> |
| 34 |
</p>
|
| 35 |
<p>
|
| 36 |
<a href="vinde.htm" target="_blank">Navegador de WMS cadastrados na INDE Brasileira</a> |
| 37 |
</p>
|
| 38 |
<p>
|
| 39 |
<a href="guiamovel1.htm" target="_blank">Ícones inseridas no puxador lateral da guia móvel</a> |
| 40 |
</p>
|
| 41 |
<p>
|
| 42 |
<a href="guiamovel2.htm" target="_blank">Puxador lateral da guia móvel sem ícones</a> |
| 43 |
</p>
|
| 44 |
<p>
|
| 45 |
<a href="guiaesquerda.htm" target="_blank">Guias laterais posicionados à esquerda do mapa</a> |
| 46 |
</p>
|
| 47 |
</fieldset>
|
| 48 |
<h2>Mashups</h2> |
| 49 |
<fieldset>
|
| 50 |
<p>
|
| 51 |
<a href="mashupol1.htm" target="_blank">Openlayers em um iframe</a> |
| 52 |
</p>
|
| 53 |
<p>
|
| 54 |
<a href="../mashups" target="_blank">Mais sobre mashups</a> |
| 55 |
</p>
|
| 56 |
</fieldset>
|
| 57 |
<h2>Interface OpenLayers</h2> |
| 58 |
<fieldset>
|
| 59 |
<p>
|
| 60 |
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 |
| 61 |
variável <i>i3GEO.Interface.openlayers.TILES = false|true</i> |
| 62 |
</p>
|
| 63 |
<p>
|
| 64 |
<a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES = false</a> |
| 65 |
</p>
|
| 66 |
<p>
|
| 67 |
<a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES = true</a> |
| 68 |
</p>
|
| 69 |
</fieldset>
|
| 70 |
<fieldset>
|
| 71 |
<p>
|
| 72 |
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. |
| 73 |
</p>
|
| 74 |
<p>
|
| 75 |
<a href="openlayers3.htm" target="_blank">Modo TILE com uma área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER = 1;</i> |
| 76 |
</p>
|
| 77 |
<p>
|
| 78 |
<a href="openlayers4.htm" target="_blank">Ativação de um layer de fundo</a> |
| 79 |
</p>
|
| 80 |
<p>
|
| 81 |
<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> |
| 82 |
</p>
|
| 83 |
</fieldset>
|
| 84 |
<fieldset>
|
| 85 |
<p>
|
| 86 |
Como incluir um controle baseado na API do OpenLayers |
| 87 |
</p>
|
| 88 |
<p>
|
| 89 |
<a href="controleol.htm" target="_blank">Posição do mouse</a> |
| 90 |
</p>
|
| 91 |
</fieldset>
|
| 92 |
<fieldset>
|
| 93 |
<legend>
|
| 94 |
<b>Menu</b> |
| 95 |
</legend>
|
| 96 |
<p>
|
| 97 |
<a href="menus1.htm" target="_blank">Modifica o menu suspenso</a> |
| 98 |
</p>
|
| 99 |
<p>
|
| 100 |
<a href="menus2.htm" target="_blank">Não mostra o menu de administração</a> |
| 101 |
</p>
|
| 102 |
</fieldset>
|
| 103 |
<fieldset>
|
| 104 |
<legend>
|
| 105 |
<b>Guias e janelas </b> |
| 106 |
</legend>
|
| 107 |
<p>
|
| 108 |
<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> |
| 109 |
</p>
|
| 110 |
<p>
|
| 111 |
<a href="guias2.htm" target="_blank">Guias do tipo sanfona</a> |
| 112 |
</p>
|
| 113 |
<p>
|
| 114 |
<span style="font-weight: bold;"></span><a href="guias4.htm" target="_blank">Inicia com uma guia específica</a> |
| 115 |
</p>
|
| 116 |
<p>
|
| 117 |
<a href="fotos1.htm" target="_blank">Guias do tipo sanfona com fotos</a> |
| 118 |
</p>
|
| 119 |
<p>
|
| 120 |
<a href="guias1.htm" target="_blank">Retorna à guia padrão após adicionar um tema</a> |
| 121 |
</p>
|
| 122 |
</fieldset>
|
| 123 |
<fieldset>
|
| 124 |
<legend>
|
| 125 |
<b>Barras de botões</b> |
| 126 |
</legend>
|
| 127 |
<p>
|
| 128 |
<a href="botoestop.htm" target="_blank">Barra do tipo "olho de peixe" posicionada na parte superior do mapa</a> |
| 129 |
</p>
|
| 130 |
<p>
|
| 131 |
<a href="botoes6.htm" target="_blank">Apenas alguns ícones são mostrados e com uma função alterada (binóculo)</a> |
| 132 |
</p>
|
| 133 |
<p>
|
| 134 |
<a href="botoes1.htm" target="_blank">Barra apenas com os ícones</a> |
| 135 |
</p>
|
| 136 |
<p>
|
| 137 |
<a href="botoeshtm.htm" target="_blank">Barra com botões criados via HTML</a> |
| 138 |
</p>
|
| 139 |
<p>
|
| 140 |
<a href="botoes5.htm" target="_blank">Como inserir botões na barra de botões</a> |
| 141 |
</p>
|
| 142 |
<p>
|
| 143 |
<a href="botoes2.htm" target="_blank">Construção das barras de botões via javascript, sem necessidade de definir elementos no HTML</a> |
| 144 |
</p>
|
| 145 |
<p>
|
| 146 |
<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> |
| 147 |
</p>
|
| 148 |
<p>
|
| 149 |
<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> |
| 150 |
</p>
|
| 151 |
</fieldset>
|
| 152 |
<fieldset>
|
| 153 |
<legend>
|
| 154 |
<b>Legenda</b> |
| 155 |
</legend>
|
| 156 |
<p>
|
| 157 |
<a href="legenda1.htm" target="_blank">Legenda com grupos</a> |
| 158 |
</p>
|
| 159 |
</fieldset>
|
| 160 |
<fieldset>
|
| 161 |
<legend>
|
| 162 |
<b>Customização de ferramentas existentes</b> |
| 163 |
</legend>
|
| 164 |
<p>
|
| 165 |
<a href="fotos.htm" target="_blank">Mapa com a ferramenta "carousel" posicionada início do mapa</a> |
| 166 |
</p>
|
| 167 |
<p>
|
| 168 |
<a href="fotos.htm" target="_blank">Lista de fotos em uma guia</a> |
| 169 |
</p>
|
| 170 |
<p>
|
| 171 |
<a href="aplic1.htm" target="_blank">Busca rápida</a> |
| 172 |
</p>
|
| 173 |
<p>
|
| 174 |
<a href="aplic2.htm" target="_blank">Adiciona uma camada extra via javascript</a> |
| 175 |
</p>
|
| 176 |
<p>
|
| 177 |
<a href="camadas5.htm" target="_blank">Vincula temas na árvore de camadas para ligar/desligar em bloco</a> |
| 178 |
</p>
|
| 179 |
</fieldset>
|
| 180 |
<fieldset>
|
| 181 |
<legend>
|
| 182 |
<b>Inclusão de um mapa dentro de uma página usando DIV</b> |
| 183 |
</legend>
|
| 184 |
<p>
|
| 185 |
<a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Botões com destaque laranja, em dois grupos na parte superior e mapa com zoom |
| 186 |
</p>
|
| 187 |
<p>
|
| 188 |
<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 |
| 189 |
</p>
|
| 190 |
<p>
|
| 191 |
<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 |
| 192 |
</p>
|
| 193 |
<p>
|
| 194 |
<a href="mashup9.htm" target="_blank">Exemplo 3a </a>- O mesmo que o 3 mas usando o Open Street Map |
| 195 |
</p>
|
| 196 |
<p>
|
| 197 |
<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 |
| 198 |
</p>
|
| 199 |
<p>
|
| 200 |
<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 |
| 201 |
</p>
|
| 202 |
<p>
|
| 203 |
<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 |
| 204 |
</p>
|
| 205 |
</fieldset>
|
| 206 |
<fieldset>
|
| 207 |
<legend>
|
| 208 |
<b>Inclusão de um mapa dentro de uma página em um IFRAME</b> |
| 209 |
</legend>
|
| 210 |
<p>
|
| 211 |
<a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle de tamanho |
| 212 |
</p>
|
| 213 |
<p>
|
| 214 |
<a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho controlado<br> |
| 215 |
</p>
|
| 216 |
</fieldset>
|
| 217 |
<h2>Interface Google Maps</h2> |
| 218 |
<fieldset>
|
| 219 |
<p>
|
| 220 |
<a href="googlemapssanfona.phtml" target="_blank">Guias do tipo sanfona</a> |
| 221 |
</p>
|
| 222 |
<p>
|
| 223 |
<a href="googlemapscomogc.php" target="_blank">Como adicionar uma camada WMS do i3Geo em um mapa normal do Google Maps</a> |
| 224 |
</p>
|
| 225 |
</fieldset>
|
| 226 |
<h2>Configuração de janelas, árvores de camadas e adição de temas</h2> |
| 227 |
<fieldset>
|
| 228 |
<p>
|
| 229 |
<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> |
| 230 |
</p>
|
| 231 |
<p>
|
| 232 |
<a href="janelas.htm" target="_blank">Opções de criação de janelas flutuantes</a> |
| 233 |
</p>
|
| 234 |
<p>
|
| 235 |
<a href="arvoredetemas.htm" target="_blank">Construtor de opções da árvore de adição de temas</a> |
| 236 |
</p>
|
| 237 |
<p>
|
| 238 |
<a href="arvoredecamadas.htm" target="_blank">Construtor de opções da árvore de camadas</a> |
| 239 |
</p>
|
| 240 |
<p>
|
| 241 |
<a href="combos.htm" target="_blank">Criação de combos baseados na árvore de camadas e lista de colunas de um tema</a> |
| 242 |
</p>
|
| 243 |
<p>
|
| 244 |
<a href="camadas1.htm" target="_blank">Árvore expandida</a> |
| 245 |
</p>
|
| 246 |
<p>
|
| 247 |
<a href="camadas2.htm" target="_blank">Legenda expandida</a> |
| 248 |
</p>
|
| 249 |
<p>
|
| 250 |
<a href="camadas3.htm" target="_blank">Árvore simplificada</a> |
| 251 |
</p>
|
| 252 |
<p>
|
| 253 |
<a href="camadas4.htm" target="_blank">Opção "mais temas" na guia de camadas</a> |
| 254 |
</p>
|
| 255 |
<p>
|
| 256 |
<a href="legenda2.htm" target="_blank">Árvore com grupos</a> |
| 257 |
</p>
|
| 258 |
</fieldset>
|
| 259 |
<h2>Cálculos</h2> |
| 260 |
<fieldset>
|
| 261 |
<p>
|
| 262 |
<a href="calculo1.htm" target="_blank">Distâncias</a> |
| 263 |
</p>
|
| 264 |
</fieldset>
|
| 265 |
<h2>Login</h2> |
| 266 |
<fieldset>
|
| 267 |
<p>
|
| 268 |
<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. |
| 269 |
</p>
|
| 270 |
<p>
|
| 271 |
<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. |
| 272 |
</p>
|
| 273 |
<p>
|
| 274 |
<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. |
| 275 |
</p>
|
| 276 |
<p>
|
| 277 |
<a href="login3.php" target="_blank">Exigência de login </a>A página só é aberta se o usuário estiver logado. |
| 278 |
</p>
|
| 279 |
<p>
|
| 280 |
<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. |
| 281 |
</p>
|
| 282 |
</fieldset>
|
| 283 |
</div>
|
| 284 |
</center>
|
| 285 |
</body>
|
| 286 |
</html>
|