Download as
Browse Code »

Commit 68a79ad0034d2485015b81600d8c41a704e54a09

Authored by Edmar Moretti
1 parent 185f4377
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Inclusão de exemplo de customização da árvore de camadas.

Showing 2 changed files with 159 additions and 17 deletions   Show diff stats
classesjs/classe_arvoredecamadas.js
  Diff comments   View file @68a79ad
... ... @@ -47,6 +47,30 @@ Exemplos:
47 47 */
48 48 i3GEO.arvoreDeCamadas = {
49 49 /*
  50 + Propriedade: EXPANDESOLEGENDA
  51 +
  52 + Ao expandir um tema mostra apenas a legenda, sem as outras opções
  53 +
  54 + Default:
  55 + {false}
  56 +
  57 + Type:
  58 + {boolean}
  59 + */
  60 + EXPANDESOLEGENDA: false,
  61 + /*
  62 + Propriedade: PERMITEEXPANDIRTEMAS
  63 +
  64 + Permite que as opções abaixo dos nós referentes acada tema sejam mostradas
  65 +
  66 + Default:
  67 + {true}
  68 +
  69 + Type:
  70 + {boolean}
  71 + */
  72 + PERMITEEXPANDIRTEMAS:true,
  73 + /*
50 74 Propriedade: ARRASTARORDEM
51 75  
52 76 Ativa a opção de arrastar um tema para alterar a ordem de desenho das camadas
... ... @@ -287,11 +311,16 @@ i3GEO.arvoreDeCamadas = {
287 311  
288 312 Parametro:
289 313  
290   - temas {JSON} - Objeto com a lista de camadas e propriedades (veja CAMADAS)
  314 + temas {JSON} - Objeto com a lista de camadas e propriedades (veja CAMADAS). Se não existir, a árvore é redesenhada
291 315 */
292 316 atualiza: function(temas){
293 317 if(typeof(console) !== 'undefined'){console.info("i3GEO.arvoreDeCamadas.atualiza()");}
294   - if(this.comparaTemas(temas,this.CAMADAS)){return;}
  318 + if(arguments.length === 0){
  319 + temas = this.CAMADAS;
  320 + this.CAMADAS = "";
  321 + }
  322 + if(this.comparaTemas(temas,this.CAMADAS))
  323 + {return;}
295 324 var currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,i,j,n,nk,k,incluidos=[];
296 325 if(!document.getElementById(i3GEO.arvoreDeCamadas.IDHTML)){return;}
297 326 document.getElementById(i3GEO.arvoreDeCamadas.IDHTML).innerHTML = "";
... ... @@ -333,9 +362,14 @@ i3GEO.arvoreDeCamadas = {
333 362 c = temas.length;
334 363 for (i=0, j=c; i<j; i++){
335 364 ltema = temas[i];
336   - d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
  365 + d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema",idlegenda:ltema.name};
337 366 temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
338   - temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
  367 + if(i3GEO.arvoreDeCamadas.PERMITEEXPANDIRTEMAS === true){
  368 + if(i3GEO.arvoreDeCamadas.EXPANDESOLEGENDA === false)
  369 + {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);}
  370 + else
  371 + {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.mostraLegenda, 1);}
  372 + }
339 373 temaNode.expanded = i3GEO.arvoreDeCamadas.EXPANDIDA;
340 374 temaNode.enableHighlight = false;
341 375 }
... ... @@ -358,7 +392,7 @@ i3GEO.arvoreDeCamadas = {
358 392 if(ltema.name === i3GEO.configura.grupoLayers[i].layers[j]){
359 393 d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
360 394 temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
361   - temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
  395 + temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
362 396 temaNode.expanded = false;
363 397 temaNode.enableHighlight = false;
364 398 incluidos.push(ltema.name);
... ... @@ -563,7 +597,6 @@ i3GEO.arvoreDeCamadas = {
563 597 var d,conteudo,opcoesNode,idtema,ltema,farol,mfarol,tnome,iconesNode;
564 598 idtema = node.data.id;
565 599 ltema = i3GEO.arvoreDeCamadas.pegaTema(idtema);
566   -
567 600 if(i3GEO.arvoreDeCamadas.OPCOESICONES === true){
568 601 farol = "maisamarelo.png";
569 602 mfarol = "";
... ...
exemplos/arvoredecamadas.htm
  Diff comments   View file @68a79ad
... ... @@ -3,23 +3,132 @@
3 3 <head>
4 4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
5 5 <script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script>
  6 +
6 7 </head>
7 8 <body id="i3geo" style=background-color:white; >
8   -<table>
9   -<tr>
10   - <td>
11   - <div id=listaTemas style='top:15px;'></div>
12   - </td>
13   - <td>
14   -
15   - </td>
16   - </tr>
17   -</table>
  9 +<div id=listaTemas style='position:absolute;top:15px;left:15px'></div>
  10 +<div style='position:absolute;top:15px;left:350px;width:600px'>
  11 +<p class=paragrafo >
  12 +A árvore de camadas mostra a lista de layers que estão disponíveis no mapa atual. A árvore controla
  13 +quais temas estão visíveis ou não, a ordem de sobreposição e possibilita acessar as funções de
  14 +manipulação das características de cada layer, como simbologia, título, etc.
  15 +</p>
  16 +<p class=paragrafo >
  17 +Nesta página são mostradas todos os parâmetros que podem ser utilizados para customizar a árvore,
  18 +modificando o seu comportamento normal.
  19 +</p>
  20 +<p class=paragrafo >
  21 +Você pode testar os parâmetros e obter o código javascript necessário para fazê-los funcionar. Os códigos
  22 +normalmente devem ser inseridos no HTML utilizado para montar o seu mapa. Por exemplo, você pode editar o
  23 +arquivo padrão do i3Geo: i3geo/locaplic/geral.htm. Nesse caso, os códigos devem ser inseridos antes da linha:<br>
  24 +i3GEO.cria();
  25 +</p>
  26 +<p class=paragrafo >
  27 +<input class=aplicar type="button" value="Atualizar a árvore" onclick="ARVatualizar()" />
  28 +</p>
  29 +<div id=ARVparametros >
  30 +<p class=paragrafo ><b>Parâmetros:</b></p>
  31 +<p class=paragrafo >
  32 + <select name="ARRASTARORDEM">
  33 + <option value=true selected >true</option>
  34 + <option value=false >false</option>
  35 + </select>
  36 + Ativa a opção de arrastar um tema para alterar a ordem de desenho das camadas
  37 +</p>
  38 +<p class=paragrafo >
  39 + <select name="ARRASTARLIXEIRA">
  40 + <option value=true selected >true</option>
  41 + <option value=false >false</option>
  42 + </select>
  43 + Ativa a opção de arrastar um tema para a lixeria quando se quer removê-lo do mapa
  44 +</p>
  45 +<p class=paragrafo >
  46 + <select name="LIGARDESLIGARTODOS">
  47 + <option value=true selected >true</option>
  48 + <option value=false >false</option>
  49 + </select>
  50 + Mostra os ícones de desligar/ligar todos os temas
  51 +</p>
  52 +<p class=paragrafo >
  53 + <select name="PERMITEEXPANDIRTEMAS">
  54 + <option value=true selected >true</option>
  55 + <option value=false >false</option>
  56 + </select>
  57 + Permite que as opções abaixo dos nós referentes acada tema sejam mostradas
  58 +</p>
  59 +<p class=paragrafo >
  60 + <select name="EXPANDIDA">
  61 + <option value=true >true</option>
  62 + <option value=false selected >false</option>
  63 + </select>
  64 + 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
  65 +</p>
  66 +<p class=paragrafo >
  67 + <select name="EXPANDESOLEGENDA">
  68 + <option value=true >true</option>
  69 + <option value=false selected >false</option>
  70 + </select>
  71 + Ao expandir um tema mostra apenas a legenda, sem as outras opções
  72 +</p>
  73 +<p class=paragrafo >
  74 + <select name="LEGENDAEXPANDIDA">
  75 + <option value=true >true</option>
  76 + <option value=false selected >false</option>
  77 + </select>
  78 + Indica se a legenda da árvore será montada de forma expandida ou não
  79 +</p>
  80 +<p class=paragrafo >
  81 + <select name="OPCOESICONES">
  82 + <option value=true selected >true</option>
  83 + <option value=false >false</option>
  84 + </select>
  85 + Inclui ou não os ícones de opções em cada tema (farol, zoom para o tema, etc)
  86 +</p>
  87 +<p class=paragrafo >
  88 + <select name="OPCOESTEMAS">
  89 + <option value=true selected >true</option>
  90 + <option value=false >false</option>
  91 + </select>
  92 + Inclui ou não o nó com as opções de manipulação de cada tema
  93 +</p>
  94 +<p class=paragrafo >
  95 + <select name="OPCOESLEGENDA">
  96 + <option value=true selected >true</option>
  97 + <option value=false >false</option>
  98 + </select>
  99 + Inclui ou não o nó para mostrar a legenda do tema
  100 +</p>
  101 +<p class=paragrafo >
  102 + <select name="AGUARDALEGENDA">
  103 + <option value=true >true</option>
  104 + <option value=false selected >false</option>
  105 + </select>
  106 + 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
  107 +</p>
  108 +</div>
  109 +<p class=paragrafo ><b>Código:</b></p>
  110 +<div id=codigo class=paragrafo ></div>
  111 +</div>
18 112 <script type="text/javascript">
19 113 i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
20 114 var g_localimg = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo/imagens";
21   -i3GEO.cria()
  115 +i3GEO.cria();
22 116 i3GEO.inicia();
  117 +i3GEO.ajuda.ATIVAJANELA = false
  118 +function ARVatualizar(){
  119 + var par = $i("ARVparametros").getElementsByTagName("select"),
  120 + n = par.length,
  121 + i,
  122 + codigo = "",
  123 + c;
  124 + for(i = 0;i < n; i++){
  125 + c = "i3GEO.arvoreDeCamadas."+par[i].name+" = "+par[i].value+";";
  126 + eval(c);
  127 + codigo += c+"<br>";
  128 + }
  129 + $i("codigo").innerHTML = codigo;
  130 + i3GEO.arvoreDeCamadas.atualiza()
  131 +}
23 132 </script>
24 133 </body>
25 134  
... ...