Download as
Browse Code »

Commit 84461a2c094250e1a413141f653bb20ccad824cd

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

Novo exemplo (barra de botões)

Showing 4 changed files with 258 additions and 2 deletions   Show diff stats
classesjs/classe_barradebotoes.js
  Diff comments   View file @84461a2
... ... @@ -209,7 +209,7 @@ i3GEO.barraDeBotoes = {
209 209  
210 210 Essa opção só funciona se i3GEO.barraDeBotoes.AUTO = true
211 211  
212   - Vc pode também alterar a ordem dos botoes.
  212 + Vc pode também alterar a ordem dos botoes ou adicionar novos
213 213  
214 214 Default:
215 215  
... ...
classesjs/classe_util.js
  Diff comments   View file @84461a2
... ... @@ -506,6 +506,8 @@ i3GEO.util = {
506 506  
507 507 Os cursores disponíveis são definidos por default em classe_configura.js
508 508  
  509 + Exemplo i3GEO.util.mudaCursor("","crosshair")
  510 +
509 511 Parametros:
510 512  
511 513 cursores {i3GEO.configura.cursores} - objeto JSON com as URIs de cada cursor (veja i3GEO.configura.cursores)
... ...
exemplos/botoes5.htm 0 → 100644
  Diff comments   View file @84461a2
... ... @@ -0,0 +1,254 @@
  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 +</head>
  8 +<body id="i3geo">
  9 +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'>
  10 +<tr style="border:0px">
  11 + <td colspan=2 id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  12 +</tr>
  13 +<tr>
  14 +<td>
  15 + <table width=100% cellspacing=0 cellpadding=0 >
  16 + <tr>
  17 + <td></td>
  18 + <td>
  19 + <div class=verdeescuro style="top:0px;cursor:pointer;">
  20 + <div id=guia1 class=guia ></div>
  21 + <div id=guia2 class=guia ></div>
  22 + <div id=guia4 class=guia ></div>
  23 + <div id=guia5 class=guia ></div>
  24 + </div>
  25 + </td>
  26 + </tr>
  27 + </table>
  28 +</td>
  29 +<td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  30 + <div id="menus" ></div>
  31 +</td>
  32 +</tr>
  33 +<tr>
  34 + <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:300px;text-align:left;">
  35 + <div id='guia1obj' >
  36 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  37 + <div id=listaPropriedades style='top:15px;' ></div>
  38 + <div id=listaLayersBase style='top:15px;'></div>
  39 + <div id=listaTemas style='top:15px;'></div>
  40 + </div>
  41 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  42 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  43 + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
  44 + </td>
  45 + <td style="vertical-align:top;border-width:0px;">
  46 + <table width="100%" style="vertical-align:top;border-width:0px">
  47 + <tr><td class=verdeclaro id=contemImg >
  48 + <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div>
  49 + </td></tr>
  50 + </table>
  51 + </td>
  52 + </tr>
  53 +
  54 +<tr>
  55 +
  56 + <td class=tdbranca >
  57 + <div id=i3GEOcompartilhar style="text-align:left;border-top:1px solid rgb(250,250,250);padding-top:1px" ></div>
  58 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  59 + </td>
  60 + <td class=tdbranca >
  61 + <table width=100% >
  62 + <tr>
  63 + <td class=tdbranca >
  64 + <div id=escala style="text-align:right;" ></div>
  65 + </td>
  66 + <td class=tdbranca >
  67 + <div id=localizarxy style="text-align:left;font-size:10px;display:inline-table">Aguarde...</div>
  68 + </td>
  69 + <td class=tdbranca ><div id=seletorIdiomas ></div></td>
  70 + <td class=tdbranca ><div id=ondeestou ></div></td>
  71 + </tr>
  72 + </table>
  73 + </td>
  74 +</tr>
  75 +<tr style="border:0px"><td colspan=3 id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr>
  76 +<tr style="border:0px"><td colspan=3 style=background-color:black ><input style="border:0px none; background-color:black;color:white;font-size:12pt;" type="text" size="1" id="i3geo_letreiro" ></td></tr>
  77 +<tr style="border:0px"><td colspan=3 style=background-color:black;color:white >geoprocessamento@mma.gov.br </td></tr>
  78 +
  79 +</table>
  80 +<center>
  81 +<br><br>
  82 +<table>
  83 +<tr>
  84 + <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>
  85 +</tr>
  86 +<tr>
  87 + <td style="padding:10px;"><center><img alt="logomarca" src='../imagens/logo_inicio.png'></td>
  88 +</tr>
  89 +</table>
  90 +<script src="../classesjs/i3geo.js"></script>
  91 +<script src="../pacotes/openlayers/OpenLayers29.js.php"></script>
  92 +<style>
  93 +.olControlEditingToolbar1 div {
  94 + background-image:url(../mashups/openlayers.png);
  95 + background-repeat:no-repeat;
  96 + float:right;
  97 + right: 0px;
  98 + height:29px;
  99 + margin:2px;
  100 + width:29px;
  101 + cursor:pointer;
  102 +}
  103 +</style>
  104 +<script>
  105 +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  106 +i3GEO.configura.autotamanho = false;
  107 +i3GEO.Interface.ATUAL = "openlayers";
  108 +i3GEO.Interface.IDCORPO = "contemImg";
  109 +i3GEO.Interface.openlayers.GADGETS = {
  110 + PanZoomBar:true,
  111 + PanZoom:false,
  112 + LayerSwitcher:true,
  113 + ScaleLine:true,
  114 + OverviewMap:false
  115 + };
  116 +i3GEO.Interface.openlayers.TILES = true;
  117 +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");'
  118 +i3GEO.cria();
  119 +i3GEO.configura.mapaRefDisplay = "none";
  120 +i3GEO.barraDeBotoes.AUTOALTURA = true;
  121 +i3GEO.barraDeBotoes.ATIVAMENUCONTEXTO = false;
  122 +i3GEO.barraDeBotoes.PERMITEFECHAR = false;
  123 +i3GEO.barraDeBotoes.PERMITEDESLOCAR = false;
  124 +i3GEO.barraDeBotoes.AUTO = true;
  125 +i3GEO.barraDeBotoes.COMPORTAMENTO = "laranja";
  126 +i3GEO.Interface.BARRABOTOESLEFT = 0;
  127 +i3GEO.Interface.BARRABOTOESTOP = 2;
  128 +i3GEO.Interface.BARRADEZOOMTOP = 10;
  129 +i3GEO.Interface.BARRADEZOOMLEFT = 40;
  130 +i3GEO.idioma.IDSELETOR = "seletorIdiomas";
  131 +i3GEO.Interface.ATIVAMENUCONTEXTO = false;
  132 +i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
  133 +i3GEO.arvoreDeTemas.ATIVATEMAIMEDIATO = true;
  134 +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
  135 +i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
  136 +i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
  137 +i3GEO.mapa.AUTORESIZE = true;
  138 +OpenLayers.ImgPath = "../pacotes/openlayers/img/";
  139 +(function(){
  140 + var oce = new OpenLayers.Layer.ArcGIS93Rest(
  141 + "ESRI Ocean Basemap",
  142 + "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export",
  143 + {format:"jpg"},
  144 + {isBaseLayer:true,visibility:false}
  145 + );
  146 + var ims = new OpenLayers.Layer.ArcGIS93Rest(
  147 + "ESRI Imagery World 2D",
  148 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export",
  149 + {},
  150 + {isBaseLayer:true,visibility:false}
  151 + );
  152 + var wsm = new OpenLayers.Layer.ArcGIS93Rest(
  153 + "ESRI World Street Map",
  154 + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
  155 + {},
  156 + {isBaseLayer:true,visibility:false}
  157 + );
  158 + var bra = new OpenLayers.Layer.WMS(
  159 + "Base carto MMA",
  160 + "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
  161 + {layers:"baseraster",srs:"EPSG:4291",format:"image/png",isBaseLayer:false},
  162 + {isBaseLayer:true,visibility:false}
  163 + );
  164 + var osm = new OpenLayers.Layer.WMS(
  165 + "Open Street Map",
  166 + "http://full.wms.geofabrik.de/std/demo_key",
  167 + {layers:""},
  168 + {isBaseLayer:true,visibility:false}
  169 + );
  170 + i3GEO.Interface.openlayers.LAYERSADICIONAIS = [oce,ims,wsm,bra,osm];
  171 +})();
  172 +</script>
  173 +<style>
  174 +#meuBotao
  175 +{
  176 + background-image:URL('http://upload.wikimedia.org/wikipedia/commons/2/26/Smile.png');
  177 + background-repeat: no-repeat;
  178 + background-position: 0 0;
  179 + width: 24px;
  180 + heigth:24px;
  181 +}
  182 +#meuBotao1
  183 +{
  184 + background-image:URL('http://upload.wikimedia.org/wikipedia/commons/2/26/Smile.png');
  185 + background-repeat: no-repeat;
  186 + background-position: 0 0;
  187 + width: 24px;
  188 + heigth:24px;
  189 +}
  190 +</style>
  191 +<script>
  192 +/*
  193 +Adiciona um novo botao na barra de botoes
  194 +*/
  195 +//insere "meuBotao" e "meuBotao1" no objeto com a lista de botoes. Veja estilo acima.
  196 +//
  197 +i3GEO.barraDeBotoes.INCLUIBOTAO = {
  198 + meuBotao: true,
  199 + meuBotao1: true,
  200 + zoomli: true,
  201 + pan: true,
  202 + zoomtot:true,
  203 + identifica: true,
  204 + identificaBalao: true,
  205 + mede: true,
  206 + area: true,
  207 + imprimir: true,
  208 + reinicia: true,
  209 + exten: true,
  210 + referencia: true,
  211 + inserexy: true,
  212 + textofid: true,
  213 + selecao: true,
  214 + google: true,
  215 + buscafotos: true,
  216 + wiki: true,
  217 + metar: true,
  218 + lentei: true,
  219 + confluence: true,
  220 + inseregrafico: true,
  221 + v3d: true
  222 +};
  223 +//
  224 +//adiciona funcionalidade aos botões
  225 +//
  226 +i3GEO.configura.funcoesBotoes.botoes.push({
  227 + iddiv:"meuBotao",
  228 + tipo:"",
  229 + dica:"Meu novo botão",
  230 + funcaoonclick:function(){
  231 + alert("oi vc clicou no meu botão novo");
  232 + }
  233 +});
  234 +i3GEO.configura.funcoesBotoes.botoes.push({
  235 + iddiv:"meuBotao1",
  236 + tipo:"dinamico",
  237 + dica:"Meu novo botão",
  238 + funcaoonclick:function(){
  239 + alert("Clique no mapa");
  240 + i3GEO.util.mudaCursor("","crosshair");
  241 + i3GEO.barraDeBotoes.ativaIcone("meuBotao1");
  242 + cliqueMeuBotaoMapa = function(){
  243 + if (i3GEO.barraDeBotoes.BOTAOCLICADO === "meuBotao1"){
  244 + alert("Vc clicou no mapa: x= "+objposicaocursor.ddx+" y= "+objposicaocursor.ddy);
  245 + }
  246 + };
  247 + if(i3GEO.eventos.MOUSECLIQUE.toString().search("cliqueMeuBotaoMapa()") < 0)
  248 + {i3GEO.eventos.MOUSECLIQUE.push("cliqueMeuBotaoMapa()");}
  249 + }
  250 +});
  251 +i3GEO.inicia();
  252 +</script>
  253 +</body>
  254 +</html>
... ...
exemplos/index.html
  Diff comments   View file @84461a2
... ... @@ -34,7 +34,7 @@ API, permitindo modificar o mapa. Alguns parâmetros são controlados por variávei
34 34 <p><a href="guias1.htm" target="_blank" >Retorna à guia padrão após adicionar um tema</a></p>
35 35 <p><a href="botoes1.htm" target="_blank" >Barra apenas com os ícones</a></p>
36 36 <p><a href="botoeshtm.htm" target="_blank" >Barra com botões criados via HTML</a></p>
37   -
  37 +<p><a href="botoes5.htm" target="_blank" >Como inserir botões na barra de botões</a></p>
38 38 <p><a href="botoes2.htm" target="_blank" >Construção das barras de botões via javascript, sem necessidade de definir elementos no HTML</a></p>
39 39 <p><a href="botoes3.htm" target="_blank" >Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos</a></p>
40 40 <p><a href="botoes4.htm" target="_blank" >Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos e estilo diferente</a></p>
... ...