Commit 87cb088c9fa2f1f393c6e36e7d24ad5cf96abe43
1 parent
1ea4b8b2
Exists in
master
and in
7 other branches
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
... | ... | @@ -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' /> "; | |
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
... | ... | @@ -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
... | ... | @@ -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 | ... | ... |