Download as
Browse Code »

Commit 3f5d53b16ebd52b6cf370fcd2af2fb16b07df7c5

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

Novo exemplo que mostra como desligar/ligar camadas de forma agrupada

Showing 3 changed files with 206 additions and 3 deletions   Show diff stats
exemplos/camadas5.htm 0 → 100644
  Diff comments   View file @3f5d53b
... ... @@ -0,0 +1,204 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 +<html>
  3 +<head>
  4 +<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
  5 +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  6 +
  7 +<title>i3GEO - OpenLayers</title>
  8 +
  9 +</head>
  10 +<body id="i3geo" style="background-color:white">
  11 +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'>
  12 + <tr style="border:0px">
  13 + <td id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  14 + </tr>
  15 + <tr>
  16 + <td id="contemMenu" style="text-align:right;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  17 + <div id="menus" ></div>
  18 + </td>
  19 + </tr>
  20 + <tr>
  21 + <td style="vertical-align:top;border-width:0px;">
  22 + <table width="100%" style="vertical-align:top;border-width:0px">
  23 + <tr>
  24 + <td class=verdeclaro id=contemImg >
  25 + <div id=corpoMapa style="position:relative;background-image:url('../imagens/i3geo1bw.jpg');"></div>
  26 + </td>
  27 + </tr>
  28 + </table>
  29 + </td>
  30 + </tr>
  31 + <tr>
  32 + <td>
  33 + <table width=100% >
  34 + <tr>
  35 + <td class=tdbranca >
  36 + <div id=i3GEOcompartilhar style="text-align:left;border-top:1px solid rgb(250,250,250);padding-top:1px" ></div>
  37 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  38 + </td>
  39 + <td class=tdbranca >
  40 + <div id=escala style="text-align:right;" ></div>
  41 + </td>
  42 + <td class=tdbranca >
  43 + <div id=localizarxy style="text-align:left;font-size:10px;display:inline-table"></div>
  44 + </td>
  45 + <td class=tdbranca >
  46 + <div id=seletorIdiomas ></div>
  47 + </td>
  48 + </tr>
  49 + </table>
  50 + </td>
  51 + </tr>
  52 + <tr style="border:0px">
  53 + <td id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td>
  54 + </tr>
  55 +</table>
  56 +<center>
  57 +<table id="i3GEOlogoMarca" style='box-shadow:0 1px 13px gray;border-radius:5px;'>
  58 + <tr>
  59 + <td><center><h1 style="font-weight:normal;font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;"><div id=versaoi3geo ></div><h2 style="font-weight:normal;font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para criação de mapas interativos e geoprocessamento<h3 style="font-weight:normal;font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, é licenciado sob GPL e integra o Portal do Software Público Brasileiro</h3></h2></h1></td>
  60 + </tr>
  61 + <tr>
  62 + <td style="padding:10px;"><center><img alt="" style="width:560px;height:81px" src='../imagens/logo_inicio.png' ></td>
  63 + </tr>
  64 + <tr>
  65 + <td><center>
  66 + </td>
  67 + </tr>
  68 +</table>
  69 +
  70 +<div id="i3GEOguiaMovel" style="position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none">
  71 + <img id="i3GEOguiaMovelPuxador" onclick='i3GEO.guias.guiaMovel.abreFecha()' style='z-index:2;border:solid 0px white;left:0px;position:absolute;top:0px' width='0px' src='../imagens/openbars.png' >
  72 + <div id="i3GEOguiaMovelMolde" style="box-shadow:-2px 0 2px gray;border-radius:5px 0px 0px 5px;position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
  73 + <div id="i3GEOguiaMovelIcones" style='overflow:none;left:0px;display:none;position:absolute;top:0px;text-align:center;height:0px;width:0px;border:solid 0px white;background-color:white' ></div>
  74 + <div id="i3GEOguiaMovelConteudo" style='overflow:auto;display:none;position:absolute;border-color:gray;border-width:0px 0 0px 0px;left:0px;height:0px;background-color:white'>
  75 + <div id='guia1obj' style='display:none;' >
  76 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  77 + <div id=listaPropriedades style='top:15px;' ></div>
  78 + <div id=listaLayersBase style='top:15px;'></div>
  79 + <div id=listaTemas style='top:15px;'></div>
  80 + </div>
  81 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  82 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  83 + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
  84 + </div>
  85 + </div>
  86 +</div>
  87 +<script src="../classesjs/i3geo.js"></script>
  88 +<script src="../pacotes/openlayers/OpenLayers211.js.php"></script>
  89 +<style>
  90 +.olControlEditingToolbar1 div {
  91 + background-image:url(../mashups/openlayers.png);
  92 + background-repeat:no-repeat;
  93 + float:right;
  94 + right: 0px;
  95 + height:29px;
  96 + margin:2px;
  97 + width:29px;
  98 + cursor:pointer;
  99 +}
  100 +</style>
  101 +<script>
  102 +alert("Experimente abrir a guia móvel e clique na camada Limite Estadual para desativá-la");
  103 +//
  104 +//exemplo de como manipular os checkbox da árvore de camadas
  105 +//
  106 +//aqui é definida a função que será executada após a árvore de camadas original ter sido criada
  107 +i3GEO.arvoreDeCamadas.finaliza = "alteraArvore();";
  108 +//funcao que irá recriar a árvore com uma nova função nos checkbox
  109 +function alteraArvore(){
  110 + //a variável i3GEO.arvoreDeCamadas.ATIVATEMA pode ser utilizada para substituir a função default que liga/desliga uma camada
  111 + i3GEO.arvoreDeCamadas.ATIVATEMA = "novaFuncaoLigaDesliga(this)";
  112 + //força a remontagem da árvore, agora ela irá usar a nova função
  113 + i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true);
  114 +}
  115 +//funcao que vai fazer alguma coisa quando o checkbox for clicado
  116 +function novaFuncaoLigaDesliga(objInput){
  117 + var codigoTema = objInput.value,
  118 + ck;
  119 + //altera a situação de outros temas
  120 + if(codigoTema == "estadosl"){
  121 + //captura o checkbox de outra camada
  122 + ck = i3GEO.arvoreDeCamadas.capturaCheckBox("estados");
  123 + //se o estado da camada desejada for igual ao da camada clicada, não faz nada
  124 + if(ck.checked != objInput.checked){
  125 + //coloca o checkbox no mesmo estado daquele que foi clicado
  126 + ck.checked = objInput.checked;
  127 + //altera o status da camada desejada
  128 + i3GEO.Interface.openlayers.ligaDesliga(ck);
  129 + }
  130 + }
  131 + //executa a função normal
  132 + i3GEO.Interface.openlayers.ligaDesliga(objInput);
  133 + i3GEO.eventos.executaEventos(i3GEO.eventos.ATUALIZAARVORECAMADAS);
  134 +}
  135 +/////////////////////////////////////////////////////////////
  136 +
  137 +
  138 +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  139 +i3GEO.configura.autotamanho = false;
  140 +i3GEO.Interface.ATUAL = "openlayers";
  141 +i3GEO.Interface.IDCORPO = "contemImg";
  142 +i3GEO.Interface.openlayers.GADGETS = {
  143 + PanZoomBar:true,
  144 + PanZoom:false,
  145 + LayerSwitcher:true,
  146 + ScaleLine:true,
  147 + OverviewMap:false
  148 + };
  149 +i3GEO.Interface.openlayers.TILES = true;
  150 +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}'
  151 +i3GEO.cria();
  152 +i3GEO.configura.mapaRefDisplay = "none";
  153 +i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
  154 +i3GEO.barraDeBotoes.OFFSET = -3;
  155 +i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
  156 +i3GEO.ajuda.ATIVAJANELA = false;
  157 +i3GEO.idioma.IDSELETOR = "seletorIdiomas";
  158 +i3GEO.Interface.ATIVAMENUCONTEXTO = false;
  159 +i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
  160 +i3GEO.arvoreDeTemas.ATIVATEMAIMEDIATO = true;
  161 +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
  162 +i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
  163 +i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
  164 +i3GEO.mapa.AUTORESIZE = true;
  165 +i3GEO.guias.TIPO = "movel";
  166 +i3GEO.guias.guiaMovel.config.topGuiaMovel = 0;
  167 +OpenLayers.ImgPath = "../pacotes/openlayers/img/";
  168 +(function(){
  169 + var oce = new OpenLayers.Layer.ArcGIS93Rest(
  170 + "ESRI Ocean Basemap",
  171 + "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export",
  172 + {format:"jpeg"},
  173 + {isBaseLayer:true,visibility:false}
  174 + );
  175 + var ims = new OpenLayers.Layer.ArcGIS93Rest(
  176 + "ESRI Imagery World 2D",
  177 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export",
  178 + {format:"jpeg"},
  179 + {isBaseLayer:true,visibility:false}
  180 + );
  181 + var wsm = new OpenLayers.Layer.ArcGIS93Rest(
  182 + "ESRI World Street Map",
  183 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
  184 + {format:"jpeg"},
  185 + {isBaseLayer:true,visibility:false}
  186 + );
  187 + var bra = new OpenLayers.Layer.WMS(
  188 + "Base carto MMA",
  189 + "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
  190 + {layers:"baseraster",srs:"EPSG:4618",format:"image/png",isBaseLayer:false},
  191 + {isBaseLayer:true,visibility:false}
  192 + );
  193 + i3GEO.Interface.openlayers.LAYERSADICIONAIS = [oce,ims,wsm,bra];
  194 +})();
  195 +i3GEO.finaliza = function(){
  196 + if($i("i3GEOlogoMarca"))
  197 + {$i("i3GEOlogoMarca").style.display = "none";}
  198 + i3GEO.mapa.insereDobraPagina("googlemaps","../imagens/dobragooglemaps.png");
  199 +}
  200 +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true;
  201 +i3GEO.inicia();
  202 +</script>
  203 +</body>
  204 +</html>
... ...
exemplos/index.html
  Diff comments   View file @3f5d53b
... ... @@ -12,8 +12,7 @@ position:relative;
12 12 font-size:10pt;
13 13 padding-bottom:10px;
14 14 }
15   -</style>
16   -</head>
  15 +</style></head>
17 16 <body class="yui-skin-sam fundoPonto">
18 17 <center>
19 18 <div class="bordaSuperior">&nbsp;</div>
... ... @@ -87,7 +86,7 @@ de fotos em uma guia&lt;/a&gt;&lt;/p&gt;
87 86 <p><a href="aplic1.htm" target="_blank">Busca
88 87 rápida</a></p>
89 88 <p><a href="aplic2.htm" target="_blank">Adiciona
90   -uma camada extra via javascript</a></p><b>Inclusão de um mapa dentro de uma página usando DIV</b>
  89 +uma camada extra via javascript</a></p><p><a href="camadas5.htm" target="_blank">Vincula temas na árvore de camadas para ligar/desligar em bloco</a></p><b>Inclusão de um mapa dentro de uma página usando DIV</b>
91 90 <p><a href="mashup1.htm" target="_blank">Exemplo
92 91 1 </a>- Botões com destaque laranja, em dois grupos na parte
93 92 superior e mapa com zoom</p>
... ...
pacotes/openlayers/img/close.gif 0 → 100644
View file @3f5d53b

1.05 KB