index.html 15.5 KB
<!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">&nbsp;</div>
		<div class="mascaraPrincipal" id="divGeral">
			<img src="../imagens/i3geo1.jpg">
			<br>
			<h1>Exemplos de configura&ccedil;&atilde;o da interface do i3geo</h1>
			<h2>Diversos</h2>
			<fieldset>
				<p>
					Para ver os par&acirc;metros de inicializa&ccedil;&atilde;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">&Iacute;cones inseridos no puxador lateral da guia m&oacute;vel</a>
				</p>
				<p>
					<a href="guiamovel2.htm" target="_blank">Puxador lateral da guia m&oacute;vel sem &iacute;cones</a>
				</p>
				<p>
					<a href="guiaesquerda.htm" target="_blank">Guias laterais posicionados &agrave; 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&aacute;ficos. O mapa &eacute; restaurado de um mapa salvo anteriormente e que cont&eacute;m dois gr&aacute;ficos</a>
				</p>
				<p>
					<a href="infodiv.htm" target="_blank">Ao clicar no mapa (tip) as informa&ccedil;&otilde;es s&atilde;o mostradas em uma posi&ccedil;&atilde;o fixa no mapa</a>
				</p>
				<p>
					<a href="dobra.htm" target="_blank">Bot&atilde;o de troca de interface localizado no canto inferior direito</a>
				</p>
				<p>
					<a href="semdobra.htm" target="_blank">Bot&atilde;o de troca de interface localizado na guia m&oacute;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&ecirc;ncia de exemplos que abordam a constru&ccedil;&atilde;o de interfaces customizadas. O c&oacute;digo dos exemplos s&atilde;o mostrados em uma janela flutuante e foram organizados para facilitar o entendimento do funcionamento do c&oacute;digo do i3Geo<br>
					<i>Para abrir o exemplo sem a apresenta&ccedil;&atilde;o do c&oacute;digo, basta alterar a URL eliminando o texto &quot;codemirror.php?&amp;pagina=&quot;</i>
				</p>
				<p>
					<a title="Carregamento do codigo" href="codemirror.php?&pagina=cursodsv1.htm" target="_blank">[1]</a>
					&nbsp;&nbsp;
					<a title="Cria" href="codemirror.php?&pagina=cursodsv2.htm" target="_blank">[2]</a>
					&nbsp;&nbsp;
					<a title="Cria e inicia o mapa" href="codemirror.php?&pagina=cursodsv3.htm" target="_blank">[3]</a>
					&nbsp;&nbsp;
					<a title="Mostra o mapa" href="codemirror.php?&pagina=cursodsv4.htm" target="_blank">[4]</a>
					&nbsp;&nbsp;
					<a title="Tamanho definido no estilo" href="codemirror.php?&pagina=cursodsv5.htm" target="_blank">[5]</a>
					&nbsp;&nbsp;
					<a title="Posicionamento definido no estilo" href="codemirror.php?&pagina=cursodsv6.htm" target="_blank">[6]</a>
					&nbsp;&nbsp;
					<a title="Inclusao da escala numerica" href="codemirror.php?&pagina=cursodsv7.htm" target="_blank">[7]</a>
					&nbsp;&nbsp;
					<a title="Inclusao da arvore de camadas" href="codemirror.php?&pagina=cursodsv8.htm" target="_blank">[8]</a>
					&nbsp;&nbsp;
					<a title="Controle da arvore com YUI" href="codemirror.php?&pagina=cursodsv9.htm" target="_blank">[9]</a>
					&nbsp;&nbsp;
					<a title="Ajuste da arvore via parametros" href="codemirror.php?&pagina=cursodsv10.htm" target="_blank">[10]</a>
					&nbsp;&nbsp;
					<a title="Mostra apenas a opcao de legenda na arvore" href="codemirror.php?&pagina=cursodsv11.htm" target="_blank">[11]</a>
					&nbsp;&nbsp;
					<a title="Legenda aberta na arvore" href="codemirror.php?&pagina=cursodsv12.htm" target="_blank">[12]</a>
					&nbsp;&nbsp;
					<a title="Exemplo de uso de templates na legenda" href="codemirror.php?&pagina=cursodsv13.htm" target="_blank">[13]</a>
					&nbsp;&nbsp;
					<a title="Alteracao da arvore via JS " href="codemirror.php?&pagina=cursodsv14.htm" target="_blank">[14]</a>
					&nbsp;&nbsp;
					<a title="Arvore do catalogo" href="codemirror.php?&pagina=cursodsv15.htm" target="_blank">[15]</a>
					&nbsp;&nbsp;
					<a title="Menu suspenso" href="codemirror.php?&pagina=cursodsv16.htm" target="_blank">[16]</a>
					&nbsp;&nbsp;
					<a title="Alteracao no menu" href="codemirror.php?&pagina=cursodsv17.htm" target="_blank">[17]</a>
					&nbsp;&nbsp;
					<a title="Componentes OpenLayers" href="codemirror.php?&pagina=cursodsv18.htm" target="_blank">[18]</a>
					&nbsp;&nbsp;
					<a title="Barra de botoes" href="codemirror.php?&pagina=cursodsv19.htm" target="_blank">[19]</a>
					&nbsp;&nbsp;
					<a title="Inclusao de um novo botao" href="codemirror.php?&pagina=cursodsv20.htm" target="_blank">[20]</a>
					&nbsp;&nbsp;
					<a title="Barra de botoes em linha" href="codemirror.php?&pagina=cursodsv21.htm" target="_blank">[21]</a>
					&nbsp;&nbsp;
					<a title="Botao com funcao Ajax" href="codemirror.php?&pagina=cursodsv22.htm" target="_blank">[22]</a>
					&nbsp;&nbsp;
					<a title="Barra de botoes fora do mapa" href="codemirror.php?&pagina=cursodsv23.htm" target="_blank">[23]</a>
					&nbsp;&nbsp;
					<a title="Legenda fora do mapa" href="codemirror.php?&pagina=cursodsv24.htm" target="_blank">[24]</a>
					&nbsp;&nbsp;
					<a title="Altera a funcao de atualizacao da legenda" href="codemirror.php?&pagina=cursodsv25.htm" target="_blank">[25]</a>
					&nbsp;&nbsp;
					<a title="Legenda sem alteracao da funcao de atualizacao" href="codemirror.php?&pagina=cursodsv26.htm" target="_blank">[26]</a>
					&nbsp;&nbsp;
					<a title="Desenho de poligono" href="codemirror.php?&pagina=cursodsv27.htm" target="_blank">[27]</a>
					&nbsp;&nbsp;
					<a title="Catalogo customizado" href="codemirror.php?&pagina=cursodsv28.htm" target="_blank">[28]</a>
					&nbsp;&nbsp;
					<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&eacute;todos dessa API, permitindo modificar o mapa. Alguns par&acirc;metros s&atilde;o controlados por vari&aacute;veis espec&iacute;ficas do i3Geo.
				</p>
				<p>
					<a href="openlayers3.htm" target="_blank">Modo TILE com uma &aacute;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&aacute; mostrado no in&iacute;cio do mapa &eacute; feito simplesmente modificando-se os par&acirc;metros desses layers no HTML utilizado no mapa</a>
				</p>
				<p>
					<a href="openlayers5.htm" target="_blank">Modifica a extens&atilde;o geogr&aacute;fica m&aacute;xima de apresenta&ccedil;&atilde;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&ccedil;&atilde;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&atilde;o mostra o menu de administra&ccedil;&atilde;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&ccedil;&atilde;o na guia que mostra o cat&aacute;logo de dados. Uso de combo ao inv&eacute;s de &aacute;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&iacute;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 &agrave; guia padr&atilde;o ap&oacute;s adicionar um tema</a>
				</p>
			</fieldset>
			<fieldset>
				<legend>
					<b>Barras de bot&otilde;es</b>
				</legend>
				<p>
					<a href="barraemlinha.htm" target="_blank">Barra de bot&otilde;es em linha, com formata&ccedil;&atilde;o livre</a>
				</p>
				<p>
					<a href="barraemlinha1.htm" target="_blank">Barra de bot&otilde;es em linha, posicionada dentro do corpo do mapa</a>
				<p>
					<a href="barraemlinha2.htm" target="_blank">Barra de bot&otilde;es em linha, posicionada dentro do corpo do mapa e com aplica&ccedil;&atilde;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 &iacute;cones s&atilde;o mostrados e com uma fun&ccedil;&atilde;o alterada (bin&oacute;culo)</a>
				</p>
				<p>
					<a href="botoes1.htm" target="_blank">Barra apenas com os &iacute;cones</a>
				</p>
				<p>
					<a href="botoes5.htm" target="_blank">Como inserir bot&otilde;es na barra de bot&otilde;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&ccedil;&atilde;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 &aacute;rvore de camadas para ligar/desligar em bloco</a>
				</p>
			</fieldset>
			<fieldset>
				<legend>
					<b>Inclus&atilde;o de um mapa dentro de uma p&aacute;gina usando DIV</b>
				</legend>
				<p>
					<a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Bot&otilde;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&otilde;es com destaque laranja, em um &uacute;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&otilde;es na parte superior e a legenda em um outro local da p&aacute;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&otilde;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&otilde;es de nave&ccedil;&atilde;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&otilde;es de nave&ccedil;&atilde;o em uma janela flutuante
				</p>
			</fieldset>
			<fieldset>
				<legend>
					<b>Inclus&atilde;o de um mapa dentro de uma p&aacute;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&ccedil;&atilde;o de janelas, &aacute;rvores de camadas e adi&ccedil;&atilde;o de temas</h2>
			<fieldset>
				<p>
					<a href="adicionatema.htm" target="_blank">Como definir as camadas que ser&atilde;o inclu&iacute;das no mapa na inicializa&ccedil;&atilde;o por meio da configura&ccedil;&atilde;o de propriedades via Javascript</a>
				</p>
				<p>
					<a href="janelas.htm" target="_blank">Op&ccedil;&otilde;es de cria&ccedil;&atilde;o de janelas flutuantes</a>
				</p>
				<p>
					<a href="arvoredetemas.htm" target="_blank">Construtor de op&ccedil;&otilde;es da &aacute;rvore de adi&ccedil;&atilde;o de temas</a>
				</p>
				<p>
					<a href="arvoredecamadas.htm" target="_blank">Construtor de op&ccedil;&otilde;es da &aacute;rvore de camadas</a>
				</p>
				<p>
					<a href="combos.htm" target="_blank">Cria&ccedil;&atilde;o de combos baseados na &aacute;rvore de camadas e lista de colunas de um tema</a>
				</p>
				<p>
					<a href="camadas1.htm" target="_blank">&Aacute;rvore expandida</a>
				</p>
				<p>
					<a href="camadas2.htm" target="_blank">Legenda expandida</a>
				</p>
				<p>
					<a href="camadas3.htm" target="_blank">&Aacute;rvore simplificada</a>
				</p>
				<p>
					<a href="camadas4.htm" target="_blank">Op&ccedil;&atilde;o "mais temas" na guia de camadas</a>
				</p>
				<p>
					<a href="legenda2.htm" target="_blank">&Aacute;rvore com grupos</a>
				</p>
			</fieldset>
			<h2>C&aacute;lculos</h2>
			<fieldset>
				<p>
					<a href="calculo1.htm" target="_blank">Dist&acirc;ncias</a>
				</p>
			</fieldset>
			<h2>Login</h2>
			<fieldset>
				<p>
					<a href="login.htm" target="_blank">Login simples</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. Nesse exemplo n&atilde;o &eacute; considerado se o login j&aacute; foi feito antes ou n&atilde;o. Essa t&eacute;cnica n&atilde;o oferece muita seguran&ccedil;a pois o c&oacute;digo javascript fica exposto e um usu&aacute;rio mais experiente pode burlar o login.
				</p>
				<p>
					<a href="login1.htm" target="_blank">Login simples com verifica&ccedil;&atilde;o</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. Ao contr&aacute;rio do anterior nesse exemplo &eacute; considerado se o login j&aacute; foi feito antes ou n&atilde;o. Essa t&eacute;cnica n&atilde;o oferece muita seguran&ccedil;a pois o c&oacute;digo javascript fica exposto e um usu&aacute;rio mais experiente pode burlar o login.
				</p>
				<p>
					<a href="login2.htm" target="_blank">Login com p&aacute;gina de verifica&ccedil;&atilde;o anterior</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. O c&oacute;digo javascript s&oacute; fica exposto ap&oacute;s o login.
				</p>
				<p>
					<a href="login3.php" target="_blank">Exig&ecirc;ncia de login </a>A p&aacute;gina s&oacute; &eacute; aberta se o usu&aacute;rio estiver logado.
				</p>
				<p>
					<a href="login4.htm" target="_blank">Exige login e verifica acesso &agrave; p&aacute;gina </a>O mapa s&oacute; &eacute; aberto se o usu&aacute;rio estiver cadastrado em um dos pap&eacute;is que pode acessar essa opera&ccedil;&atilde;o.
				</p>
			</fieldset>
		</div>
	</center>
</body>
</html>