Download as
Browse Code »

Commit 4afdf3cdb48461a502bdec4858cccaee61a8f705

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

Exemplo de catálogo baseado em combos ao invés de árvore

Showing 2 changed files with 309 additions and 0 deletions   Show diff stats
exemplos/guias3.htm 0 → 100644
  Diff comments   View file @4afdf3c
... ... @@ -0,0 +1,308 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  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 +<title>i3GEO - OpenLayers</title>
  7 +
  8 +</head>
  9 +<body id="i3geo" style="background-color:white">
  10 +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'>
  11 + <tr style="border:0px">
  12 + <td id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  13 + </tr>
  14 + <tr>
  15 + <td id="contemMenu" style="text-align:right;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  16 + <!--menu suspenso-->
  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 + <!--
  37 + Nesse div são incluídos os ícones que permitem ao usuário modificar o visual de cores dos ícones
  38 + <div id=visual ></div>
  39 + -->
  40 + <!-- botão de compartilhamento em redes sociais -->
  41 + <div id=i3GEOcompartilhar style="text-align:left;border-top:1px solid rgb(250,250,250);padding-top:1px" ></div>
  42 + <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
  43 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  44 + </td>
  45 + <td class=tdbranca >
  46 + <!-- aqui será incluída a escala numérica -->
  47 + <div id=escala style="text-align:right;" ></div>
  48 + </td>
  49 + <td class=tdbranca >
  50 + <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse -->
  51 + <div id=localizarxy style="text-align:left;font-size:10px;display:inline-table"></div>
  52 + </td>
  53 + <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma -->
  54 + <td class=tdbranca >
  55 + <div id=seletorIdiomas ></div>
  56 + </td>
  57 + </tr>
  58 + </table>
  59 + </td>
  60 + </tr>
  61 + <tr style="border:0px">
  62 + <td id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td>
  63 + </tr>
  64 +</table>
  65 +<center>
  66 +<table id="i3GEOlogoMarca">
  67 + <tr>
  68 + <td><center><h1 style="font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;"><div id=versaoi3geo ></div><h2 style="font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para criação de mapas interativos e geoprocessamento<h3 style="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>
  69 + </tr>
  70 + <tr>
  71 + <td style="padding:10px;"><center><img alt="logomarca" src='../imagens/logo_inicio.png'></td>
  72 + </tr>
  73 + <tr>
  74 + <td><center>
  75 + <!--
  76 + <script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
  77 + -->
  78 + </td>
  79 + </tr>
  80 +</table>
  81 +
  82 +<div id="i3GEOguiaMovel" style="position:absolute;display:block;border:0px solid white;text-align:left;z-index:1000;background-color:none">
  83 + <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' >
  84 + <div id="i3GEOguiaMovelMolde" style="position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
  85 + <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>
  86 + <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'>
  87 + <div id='guia1obj' style='display:none;' >
  88 + <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico -->
  89 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  90 + <!-- Esta div acrescenta a lista de propriedades do mapa -->
  91 + <div id=listaPropriedades style='top:15px;' ></div>
  92 + <!-- Esta div acrescenta a lista de de camadas do tipo 'baselayers' específicas da interface Openlayers. Veja também a opção i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
  93 + <div id=listaLayersBase style='top:15px;'></div>
  94 + <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual -->
  95 + <div id=listaTemas style='top:15px;'></div>
  96 + </div>
  97 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  98 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  99 + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
  100 + </div>
  101 + </div>
  102 +</div>
  103 +
  104 +<script src="../classesjs/i3geonaocompacto.js"></script>
  105 +<script src="../pacotes/openlayers/OpenLayers29.js.php"></script>
  106 +<!-- estilo necessário para a ferramenta de edição -->
  107 +<style>
  108 +.olControlEditingToolbar1 div {
  109 + background-image:url(../mashups/openlayers.png);
  110 + background-repeat:no-repeat;
  111 + float:right;
  112 + right: 0px;
  113 + height:29px;
  114 + margin:2px;
  115 + width:29px;
  116 + cursor:pointer;
  117 +}
  118 +</style>
  119 +<script>
  120 +/*
  121 +Title: Interface Openlayers
  122 +
  123 +Abre o i3geo com todas as suas funcionalidades e interface de navegação controlada pela API Openlayers.
  124 +
  125 +File: i3geo/interface/openlayers.htm
  126 +
  127 +Exemplo:
  128 +
  129 +http://<host>/i3geo/ms_criamapa.php
  130 +
  131 +http://<host>/i3geo/interface/openlayers.htm
  132 +
  133 +http://<host>/i3geo
  134 +
  135 +Para definir quais botões das barras de ferramentas serão incluídos no mapa, veja: <classe_barradebotoes.js> i3GEO.barraDeBotoes.INCLUIBOTAO
  136 +
  137 +*/
  138 +/*
  139 + Indica a localização correta do i3geo.
  140 +
  141 + É utilizada para identificar o local correto onde estão os programas em php que são utilizados.
  142 +
  143 + Se não for definida, o i3Geo tentará encontrar o local automaticamente com base na tag javascript
  144 +*/
  145 +//i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  146 +/*
  147 +Para outras configurações, veja i3geo/classesjs/classe_configura.js
  148 +
  149 +exemplo
  150 +
  151 +i3GEO.configura.autotamanho = true;
  152 +*/
  153 +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  154 +i3GEO.configura.autotamanho = false;
  155 +i3GEO.Interface.ATUAL = "openlayers";
  156 +i3GEO.Interface.IDCORPO = "contemImg";
  157 +
  158 +i3GEO.Interface.openlayers.GADGETS = {
  159 + PanZoomBar:true,
  160 + PanZoom:false,
  161 + LayerSwitcher:true,
  162 + ScaleLine:true,
  163 + OverviewMap:false
  164 + };
  165 +i3GEO.Interface.openlayers.TILES = true;
  166 +
  167 +//
  168 +//desabilita o item que abre a interface "default" do menu suspenso
  169 +//
  170 +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}'
  171 +
  172 +/*
  173 +Após a criação, é criado o objeto i3geoOL que corresponde ao objeto map da API do OpenLayers.
  174 +Vc pode usar i3geoOL para aplicar os métodos e verificar as propriedades da API do OpenLayers
  175 +*/
  176 +i3GEO.cria();
  177 +/*
  178 + Inicializa o mapa
  179 +*/
  180 +//não mostra o mapa de referência
  181 +i3GEO.configura.mapaRefDisplay = "none";
  182 +//tipo de barra de botões
  183 +i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
  184 +//ajusta o deslocamento da barra de botões
  185 +i3GEO.barraDeBotoes.OFFSET = -3;
  186 +//ajusta a posição da barra de botões no IE
  187 +//if(navm)
  188 +//{i3GEO.barraDeBotoes.OFFSET = -45;}
  189 +//número máximo de botões na barra de botões inicial
  190 +//i3GEO.barraDeBotoes.MAXBOTOES = 10;
  191 +//remove itens dos menus que não são necessários, já que estão como ícones na barra de botões
  192 +i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
  193 +//
  194 +//barra de botoes normal. descomente para usar
  195 +/*
  196 +i3GEO.barraDeBotoes.TIPO = "yui";
  197 +i3GEO.barraDeBotoes.AUTOALTURA = true;
  198 +i3GEO.barraDeBotoes.ATIVAMENUCONTEXTO = false;
  199 +i3GEO.barraDeBotoes.PERMITEFECHAR = false;
  200 +i3GEO.barraDeBotoes.PERMITEDESLOCAR = false;
  201 +i3GEO.barraDeBotoes.AUTO = true;
  202 +i3GEO.barraDeBotoes.COMPORTAMENTO = "laranja";
  203 +
  204 +i3GEO.Interface.BARRABOTOESLEFT = 0;
  205 +i3GEO.Interface.BARRABOTOESTOP = 2;
  206 +i3GEO.Interface.BARRADEZOOMTOP = 10;
  207 +i3GEO.Interface.BARRADEZOOMLEFT = 40;
  208 +*/
  209 +i3GEO.ajuda.ATIVAJANELA = false;
  210 +i3GEO.idioma.IDSELETOR = "seletorIdiomas";
  211 +i3GEO.Interface.ATIVAMENUCONTEXTO = false;
  212 +i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
  213 +i3GEO.arvoreDeTemas.ATIVATEMAIMEDIATO = true;
  214 +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
  215 +i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
  216 +i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
  217 +i3GEO.mapa.AUTORESIZE = true;
  218 +i3GEO.guias.TIPO = "movel";
  219 +//
  220 +//esta é uma variável interna do OpenLayers que define o endereço do diretório onde estão as imagens usadas nos ícones
  221 +//
  222 +OpenLayers.ImgPath = "../pacotes/openlayers/img/";
  223 +//
  224 +//adiciona camadas que podem ser ativadas como fundo do mapa
  225 +//
  226 +(function(){
  227 + var oce = new OpenLayers.Layer.ArcGIS93Rest(
  228 + "ESRI Ocean Basemap",
  229 + "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export",
  230 + {format:"jpg"},
  231 + {isBaseLayer:true,visibility:false}
  232 + );
  233 + var ims = new OpenLayers.Layer.ArcGIS93Rest(
  234 + "ESRI Imagery World 2D",
  235 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export",
  236 + {},
  237 + {isBaseLayer:true,visibility:false}
  238 + );
  239 + var wsm = new OpenLayers.Layer.ArcGIS93Rest(
  240 + "ESRI World Street Map",
  241 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
  242 + {},
  243 + {isBaseLayer:true,visibility:false}
  244 + );
  245 + var bra = new OpenLayers.Layer.WMS(
  246 + "Base carto MMA",
  247 + "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
  248 + {layers:"baseraster",srs:"EPSG:4291",format:"image/png",isBaseLayer:false},
  249 + {isBaseLayer:true,visibility:false}
  250 + );
  251 + /*
  252 + var osm = new OpenLayers.Layer.WMS(
  253 + "Open Street Map",
  254 + "http://full.wms.geofabrik.de/std/demo_key",
  255 + {layers:""},
  256 + {isBaseLayer:true,visibility:false}
  257 + );
  258 + */
  259 + i3GEO.Interface.openlayers.LAYERSADICIONAIS = [oce,ims,wsm,bra];
  260 +})();
  261 +//
  262 +//substitui a janela de alerta normal do navegador por uma janela estilizada. Pode ser comentado sem problemas. No Safari apresentou problemas.
  263 +//
  264 +//i3GEO.janela.ativaAlerta();
  265 +//
  266 +//inicia o mapa
  267 +//
  268 +//esconde a logomarca ao finalizar o mapa
  269 +i3GEO.finaliza = function(){
  270 + $i("i3GEOlogoMarca").style.display = "none";
  271 +}
  272 +
  273 +i3GEO.guias.CONFIGURA.adiciona.click = function(){
  274 + var ondeArvore;
  275 + i3GEO.guias.mostra("adiciona");
  276 + if(!$i("arvoreAdicionaTema"))
  277 + {
  278 + try{ondeArvore = objmapa.guiaMenu+"obj";}
  279 + catch(e){ondeArvore = "guia2obj";}
  280 + }
  281 + else
  282 + {ondeArvore = "arvoreAdicionaTema";}
  283 + $i(ondeArvore).style.textAlign="left";
  284 + $i(ondeArvore).innerHTML = "" +
  285 + "<div id=ListaDeMenus ></div><br>" +
  286 + "<div id=ListaDeGrupos ></div><br>" +
  287 + "<div id=ListaDeSubGrupos ></div><br>" +
  288 + "<div id=ListaDeTemas ></div><br>";
  289 +
  290 + i3GEO.arvoreDeTemas.comboMenus(i3GEO.configura.locaplic,"escolheuMenu","ListaDeMenus","comboMenus",300,1);
  291 + //i3GEO.arvoreDeTemas.cria(i3GEO.configura.sid,i3GEO.configura.locaplic,ondeArvore);
  292 +}
  293 +function escolheuMenu(id){
  294 + i3GEO.arvoreDeTemas.comboGruposMenu(i3GEO.configura.locaplic,"escolheuGrupo","ListaDeGrupos","comboGrupos",300,1,id)
  295 +}
  296 +function escolheuGrupo(id){
  297 + i3GEO.arvoreDeTemas.comboSubGruposMenu(i3GEO.configura.locaplic,"escolheuSubGrupo","ListaDeSubGrupos","comboSubGrupos",id,300,1)
  298 +}
  299 +function escolheuSubGrupo(idGrupo,idSubGrupo){
  300 + i3GEO.arvoreDeTemas.comboTemasMenu(i3GEO.configura.locaplic,"escolheuTema","ListaDeTemas","ListaDeTemas",idGrupo,idSubGrupo,300,1,$i("comboMenus").value)
  301 +}
  302 +function escolheuTema(idGrupo,idSubGrupo,codigoTema){
  303 + i3GEO.arvoreDeTemas.adicionaTemas([codigoTema])
  304 +}
  305 +i3GEO.inicia();
  306 +</script>
  307 +</body>
  308 +</html>
... ...
exemplos/index.html
  Diff comments   View file @4afdf3c
... ... @@ -30,6 +30,7 @@ API, permitindo modificar o mapa. Alguns parâmetros são controlados por variávei
30 30 <p><a href="openlayers4.htm" target="_blank" >Ativação de um layer de fundo</a></p>
31 31 <p><a href="openlayers5.htm" target="_blank" >Modifica a extensão geográfica máxima de apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT = [-63.712484, -20.765721, -42.385294, -9.136698];</i></p>
32 32 <p><b>Guias, janelas, barras de botões</b></p>
  33 +<p><a href="guias3.htm" target="_blank" >Modificação na guia que mostra o catálogo de dados. Uso de combo ao invés de árvore</a></p>
33 34 <p><a href="guias2.htm" target="_blank" >Guias do tipo sanfona</a></p>
34 35 <p><a href="guias1.htm" target="_blank" >Retorna à guia padrão após adicionar um tema</a></p>
35 36 <p><a href="botoes1.htm" target="_blank" >Barra apenas com os ícones</a></p>
... ...