arvoredecamadas.htm 4.69 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script>

</head>
<body id="i3geo" style=background-color:white; >
<div id=listaTemas style='position:absolute;top:15px;left:15px'></div>
<div style='position:absolute;top:15px;left:350px;width:600px'>
<p class=paragrafo >
A árvore de camadas mostra a lista de layers que estão disponíveis no mapa atual. A árvore controla 
quais temas estão visíveis ou não, a ordem de sobreposição e possibilita acessar as funções de 
manipulação das características de cada layer, como simbologia, título, etc.
</p>
<p class=paragrafo >
Nesta página são mostrados os parâmetros principais que podem ser utilizados para customizar a árvore, 
modificando o seu comportamento normal. 
</p>
<p class=paragrafo >
Você pode testar os parâmetros e obter o código javascript necessário para fazê-los funcionar. Os códigos 
normalmente devem ser inseridos no HTML utilizado para montar o seu mapa. Por exemplo, você pode editar o 
arquivo padrão do i3Geo: i3geo/locaplic/geral.htm. Nesse caso, os códigos devem ser inseridos antes da linha:<br>
i3GEO.cria();
</p>
<p class=paragrafo >
<input class=aplicar type="button" value="Atualizar a árvore" onclick="ARVatualizar()" />
</p>
<div id=ARVparametros >
<p class=paragrafo ><b>Parâmetros:</b></p>
<p class=paragrafo >
	<select name="ARRASTARORDEM">
		<option value=true selected >true</option>
		<option value=false >false</option>
	</select>
	Ativa a opção de arrastar um tema para alterar a ordem de desenho das camadas
</p>
<p class=paragrafo >
	<select name="ARRASTARLIXEIRA">
		<option value=true selected >true</option>
		<option value=false >false</option>
	</select>
	Ativa a opção de arrastar um tema para a lixeria quando se quer removê-lo do mapa
</p>
<p class=paragrafo >
	<select name="LIGARDESLIGARTODOS">
		<option value=true selected >true</option>
		<option value=false >false</option>
	</select>
	Mostra os ícones de desligar/ligar todos os temas
</p>
<p class=paragrafo >
	<select name="PERMITEEXPANDIRTEMAS">
		<option value=true  selected >true</option>
		<option value=false >false</option>
	</select>
	Permite que as opções abaixo dos nós referentes acada tema sejam mostradas
</p>
<p class=paragrafo >
	<select name="EXPANDIDA">
		<option value=true  >true</option>
		<option value=false selected >false</option>
	</select>
	Indica se a árvore será montada de forma expandida ou não. Se true, os nós do primeiro nível serão abertos na inicialização da árvore
</p>
<p class=paragrafo >
	<select name="EXPANDESOLEGENDA">
		<option value=true  >true</option>
		<option value=false selected >false</option>
	</select>
	Ao expandir um tema mostra apenas a legenda, sem as outras opções
</p>
<p class=paragrafo >
	<select name="LEGENDAEXPANDIDA">
		<option value=true  >true</option>
		<option value=false selected >false</option>
	</select>
	Indica se a legenda da árvore será montada de forma expandida ou não
</p>
<p class=paragrafo >
	<select name="OPCOESICONES">
		<option value=true  selected >true</option>
		<option value=false >false</option>
	</select>
	Inclui ou não os ícones de opções em cada tema (farol, zoom para o tema, etc)
</p>
<p class=paragrafo >
	<select name="OPCOESTEMAS">
		<option value=true  selected >true</option>
		<option value=false >false</option>
	</select>
	Inclui ou não o nó com as opções de manipulação de cada tema
</p>
<p class=paragrafo >
	<select name="OPCOESLEGENDA">
		<option value=true  selected >true</option>
		<option value=false >false</option>
	</select>
	Inclui ou não o nó para mostrar a legenda do tema
</p>
<p class=paragrafo >
	<select name="AGUARDALEGENDA">
		<option value=true  >true</option>
		<option value=false selected >false</option>
	</select>
	Ativa a opção de aguarde para mostrar a legenda de um tema quando o usuário estaciona o mouse sobre o nome de um tema
</p>
</div>
<p class=paragrafo ><b>Código:</b></p>
<div id=codigo class=paragrafo ></div>
</div>
<script type="text/javascript">
i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
i3GEO.cria();
i3GEO.inicia();
i3GEO.ajuda.ATIVAJANELA = false
function ARVatualizar(){
	var par = $i("ARVparametros").getElementsByTagName("select"),
		n = par.length,
		i,
		codigo = "",
		c;
	for(i = 0;i < n; i++){
		c = "i3GEO.arvoreDeCamadas."+par[i].name+" = "+par[i].value+";";
		eval(c);
		codigo += c+"<br>";
	}
	$i("codigo").innerHTML = codigo;
	i3GEO.arvoreDeCamadas.atualiza()
}
</script>
</body>

</html>