Download as
Browse Code »

Commit 87cb088c9fa2f1f393c6e36e7d24ad5cf96abe43

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

Novas opções na árvore de camadas quando utilizada a forma de organização em gru… 

…pos. Agora pode-se expandir/recolher os grupos e ligar/desligar os temas de uma só vez
Showing 3 changed files with 69 additions and 22 deletions   Show diff stats
classesjs/classe_arvoredecamadas.js
  Diff comments   View file @87cb088
... ... @@ -384,7 +384,7 @@ i3GEO.arvoreDeCamadas = {
384 384 temas = i3GEO.arvoreDeCamadas.CAMADAS;
385 385 i3GEO.arvoreDeCamadas.CAMADAS = "";
386 386 }
387   - var temp,currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,i,j,n,nk,k,incluidos=[];
  387 + var estilo,temp,currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,grupoNode,i,j,n,nk,k,incluidos=[];
388 388 //
389 389 //essa verificacao é necessaria quando a arvore é criada fora dos padrões normais
390 390 //
... ... @@ -430,6 +430,13 @@ i3GEO.arvoreDeCamadas = {
430 430 tempNode = new YAHOO.widget.HTMLNode(d, root, true,true);
431 431 tempNode.enableHighlight = false;
432 432 //
  433 + //estilo usado no input qd existirem grupos
  434 + //
  435 + if(navm)
  436 + {estilo = "text-align:left;font-size:11px;vertical-align:middle;display:table-cell;";}
  437 + else
  438 + {estilo = "text-align:left;font-size:11px;vertical-align:vertical-align:top;padding-top:4px;";}
  439 + //
433 440 //monta a árvore.
434 441 //se i3GEO.configura.grupoLayers estiver definido
435 442 //o processo é diferenciado
... ... @@ -462,10 +469,16 @@ i3GEO.arvoreDeCamadas = {
462 469 c = i3GEO.configura.grupoLayers.length;
463 470 //grupos
464 471 for(i=0;i<c; i++){
465   - d = {html:"<b>"+i3GEO.configura.grupoLayers[i].nome+"</b>"};
466   - temaNode = new YAHOO.widget.HTMLNode(d, tempNode, false,true);
467   - temaNode.expanded = false;
468   - temaNode.enableHighlight = false;
  472 + temp = "";
  473 + if(i3GEO.configura.grupoLayers[i].icone && i3GEO.configura.grupoLayers[i].icone==true){
  474 + temp += "<p style="+estilo+" ><input style=cursor:pointer onclick='i3GEO.arvoreDeCamadas.ligaDesligaTemas(\""+i3GEO.configura.grupoLayers[i].layers+"\",this.checked)' type=checkbox title='Ligar/desligar temas do grupo' />&nbsp;";
  475 + }
  476 + temp += "<span style="+estilo+";vertical-align:top ><b>"+i3GEO.configura.grupoLayers[i].nome+"</b></span></p>";
  477 + d = {html:temp};
  478 + grupoNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
  479 + grupoNode.enableHighlight = false;
  480 + if(i3GEO.configura.grupoLayers[i].expandido && i3GEO.configura.grupoLayers[i].expandido==true)
  481 + {grupoNode.expanded = true;}
469 482 n = i3GEO.configura.grupoLayers[i].layers.length;
470 483 //layers de um grupo
471 484 for(j=0;j<n; j++){
... ... @@ -474,7 +487,12 @@ i3GEO.arvoreDeCamadas = {
474 487 ltema = temas[k];
475 488 if(ltema.name === i3GEO.configura.grupoLayers[i].layers[j] && ltema.escondido == "nao"){
476 489 d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
477   - temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
  490 +
  491 + if(i3GEO.configura.grupoLayers[i].dinamico && i3GEO.configura.grupoLayers[i].dinamico==true)
  492 + {temaNode = new YAHOO.widget.HTMLNode(d, grupoNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);}
  493 + else
  494 + {temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);}
  495 +
478 496 temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
479 497 temaNode.expanded = false;
480 498 temaNode.enableHighlight = false;
... ... @@ -485,9 +503,9 @@ i3GEO.arvoreDeCamadas = {
485 503 }
486 504 //inclui os temas não agrupados
487 505 d = {html:"<b>Outros</b>"};
488   - temaNode = new YAHOO.widget.HTMLNode(d, tempNode, false,true);
489   - temaNode.expanded = false;
490   - temaNode.enableHighlight = false;
  506 + grupoNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
  507 + grupoNode.expanded = false;
  508 + grupoNode.enableHighlight = false;
491 509 c = incluidos.length;
492 510 for(k=0;k<nk; k++){
493 511 ltema = temas[k];
... ... @@ -498,7 +516,7 @@ i3GEO.arvoreDeCamadas = {
498 516 }
499 517 if (n === false){
500 518 d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
501   - temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
  519 + temaNode = new YAHOO.widget.HTMLNode(d, grupoNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
502 520 temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
503 521 temaNode.expanded = false;
504 522 temaNode.enableHighlight = false;
... ... @@ -530,6 +548,26 @@ i3GEO.arvoreDeCamadas = {
530 548  
531 549 },
532 550 /*
  551 + Function: ligaDesligaTemas
  552 +
  553 + Marca ou desmarca os checkbox da árvore de uma lista de temas
  554 +
  555 + Parametros:
  556 +
  557 + lista {string} - lista, separada por vírgulas, dos códigos dos temas
  558 +
  559 + status {boolean} - marca ou desmarca
  560 + */
  561 + ligaDesligaTemas: function(lista,status){
  562 + var n,i;
  563 + lista = lista.split(",");
  564 + n = lista.length;
  565 + for(i=0;i<n;i++){
  566 + i3GEO.arvoreDeCamadas.capturaCheckBox(lista[i]).checked = status;
  567 + }
  568 + i3GEO.arvoreDeCamadas.aplicaTemas();
  569 + },
  570 + /*
533 571 Function: ativaDragDrop
534 572  
535 573 Ativa a funcionalidade de arrastar um tema para mudar sua ordem de desenho ou excluir do mapa
... ...
classesjs/classe_configura.js
  Diff comments   View file @87cb088
... ... @@ -57,12 +57,20 @@ i3GEO.configura = {
57 57 Lista de grupos e seus respectivos layers, para montagem da árvore de camadas.
58 58  
59 59 Se essa propriedade estiver definida, as camadas serão agrupadas na árvore de camadas conforme os grupos definidos.
  60 +
  61 + Layers que não constarem nessa propriedade serão incluídos no grupo "outros"
  62 +
  63 + Ao definir grupos, a árvore não conterá as opções de mudança da prdem de desenho das camadas
  64 + ( veja http://localhost/i3geo/exemplos/legenda2.htm )
60 65  
61 66 Por exemplo
62 67 i3GEO.configura.grupoLayers = [
63   - {nome:"Grupo 1",layers:["zee","estadosl"]},
64   - {nome:"Grupo 2",layers:["mundo"]}
65   - ]
  68 + {nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["zee","estadosl"]},
  69 + {nome:"Grupo 2",icone:false,dinamico:true,expandido:false,layers:["mundo"]}
  70 + ];
  71 +
  72 + Onde "icone" indica se o ícone de ligar/desligar todos os temas do grupo será mostrado,
  73 + "dinamico" significa que o nó pode ser expandido ou não, e "expandido" significa que o nó inicia aberto se a árvore for dinâmica
66 74  
67 75 Type:
68 76 {JSON}
... ... @@ -154,11 +162,11 @@ i3GEO.configura = {
154 162 { id:"omenudataArquivos5",text: $trad("u20a"), url: "javascript:i3GEO.mapa.dialogo.convertekml()" }
155 163 ],
156 164 "interface": [
157   - { id:"omenudataInterface1",text: "Interface normal", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/'+i3GEO.parametros.interfacePadrao+'?'+i3GEO.configura.sid" },
158   - { id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/openlayers.htm?'+i3GEO.configura.sid" },
159   - { id:"omenudataInterface3",text: "Flash", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/flamingo.htm?'+i3GEO.configura.sid" },
160   - { id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/googlemaps.phtml?'+i3GEO.configura.sid" },
161   - { id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/googleearth.phtml?'+i3GEO.configura.sid" },
  165 + { id:"omenudataInterface1",text: "Interface normal", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/geral.htm?'+i3GEO.configura.sid" },
  166 + { id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/openlayers.htm?'+i3GEO.configura.sid" },
  167 + { id:"omenudataInterface3",text: "Flash", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/flamingo.htm?'+i3GEO.configura.sid" },
  168 + { id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googlemaps.phtml?'+i3GEO.configura.sid" },
  169 + { id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
162 170 { id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
163 171 { id:"omenudataInterface7",text: "Serviços WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
164 172 { id:"omenudataInterface8",text: "Hiperbólica", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/hiperbolica.html')" },
... ...
exemplos/legenda2.htm
  Diff comments   View file @87cb088
... ... @@ -4,7 +4,7 @@
4 4 <meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile">
5 5 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
6 6 <title>i3Geo - Mapa interativo</title>
7   -<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  7 +<script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script>
8 8 <style>
9 9 .yui-log .i3geo {background-color:yellow;} /* customize a color */
10 10 .yui-log .redesenho {background-color:yellow;} /* customize a color */
... ... @@ -167,9 +167,10 @@
167 167 i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
168 168 i3GEO.configura.templateLegenda = "legendagrupos.htm";
169 169 i3GEO.configura.grupoLayers = [
170   - {nome:"Grupo 1",layers:["zee","estadosl"]},
171   - {nome:"Grupo 2",layers:["mundo"]}
172   - ]
  170 + {nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["zee","estadosl"]},
  171 + {nome:"Grupo 2",icone:true,dinamico:true,expandido:true,layers:["mundo"]}
  172 +];
  173 +
173 174 i3GEO.cria();
174 175 i3GEO.inicia();
175 176  
... ...