camadas4.htm 10.1 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>i3GEO - OpenLayers</title>
<!-- estilo necess&aacute;rio para a ferramenta de edi&ccedil;&atilde;o -->
<style>
.olControlEditingToolbar1 div {
	background-image:url(../mashups/openlayers.png);
	background-repeat:no-repeat;
	float:right;
	right: 0px;
	height:29px;
	margin:2px;
	width:29px;
	cursor:pointer;
}
</style>
</head>
<body id="i3geo">
<!-- inclui o nome do usuario logado -->
<div id="i3GEONomeLogin" style="position:absolute;left:10px;top:12px;font-size:11px;z-index:50000"></div>
<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'>

<!--
	Inclui a barra superior. Se vc n&atilde;o quiser o menu, &eacute; só comentar o TR
-->
<tr style="border:0px">
	<td colspan=2 id="barraSuperior" style="background-image:url('../imagenscabeca.png');height:10px"></td>
</tr>
<tr>
<td>
  <table width=100% cellspacing=0 cellpadding=0 >
   <tr>
   <td></td>
   <td>
    <!--
    	Guias principais, n&atilde;o mude o ID, apenas o nome se for desejado
		Para remover uma guia, basta comentar a linha
    -->
    <div class=verdeescuro style="top:0px;cursor:pointer;">
	 <div id=guia1 class=guia ></div>
	 <div id=guia2 class=guia ></div>
	 <div id=guia4 class=guia ></div>
	 <div id=guia5 class=guia ></div>
    </div>
   </td>

   </tr>
  </table>
</td>
<td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
	<!--
		menu suspenso
	-->
	<div id="menus" ></div>
</td>
</tr>
<tr>
 <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:300px;text-align:left;">
  <!--
  	As divs guiaNobj guardam o conte&uacute;do que &eacute; mostrado quando a guia &eacute; clicada
  	Para cada bot&atilde;o na guia deve haver um div com o conte&uacute;do, pe.
  	o div com id=guia1 deve ter um div com id=guia1obj
  -->
  <div id='guia1obj' >
	<div style='left:5px;top:10px;' id=buscaRapida ></div>
	<!--	Esta div acrescenta a lista de propriedades do mapa -->
  	<div id=listaPropriedades style='top:15px;' ></div>
	<!--	Esta div acrescenta a lista de de camadas do tipo 'baselayers' espec&iacute;ficas da interface Openlayers. Veja tamb&eacute;m a op&ccedil;&atilde;o i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
  	<div id=listaLayersBase style='top:15px;'></div>
	<br>
	<input style="cursor:pointer;left:-60px;top:10px;position:relative;" id=botaoMaisTemas size=10 type=button value="Adicionar mais temas" onclick="janelaMaisTemas()" />

	<!--	Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
  	<div id=listaTemas style='top:15px;'></div>
  </div>
  <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
 </td>
 <td style="vertical-align:top;border-width:0px;">
  <table width="100%" style="vertical-align:top;border-width:0px">
    <tr><td  class=verdeclaro id=contemImg >
    <div id=corpoMapa style="position:relative;background-image:url('../imagens/i3geo1bw.jpg');"></div>
   </td></tr>
  </table>
 </td>
 </tr>

<tr>

 <td class=tdbranca >
 	<!--
 		Nesse div s&atilde;o inclu&iacute;dos os &iacute;cones que permitem ao usu&aacute;rio modificar o visual de cores dos &iacute;cones
 		<div id=visual ></div>
 	-->
	<!-- bot&atilde;o de compartilhamento em redes sociais -->
	<div id=i3GEOcompartilhar style="text-align:left;border-top:1px solid rgb(250,250,250);padding-top:1px" ></div>
 	<!-- aqui ser&aacute; inclu&iacute;do o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
 	<div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
 </td>
 <td class=tdbranca >
  <table width=100% >
  <tr>
	  <td class=tdbranca >
		<!-- aqui ser&aacute; inclu&iacute;da a escala num&eacute;rica -->
		<div id=escala style="text-align:right;" ></div>
	  </td>
	  <td class=tdbranca  >
		<!-- aqui ser&aacute; inclu&iacute;do o gadget que mostra a coordenada geogr&aacute;fica da posi&ccedil;&atilde;o do mouse -->
		<div id=localizarxy style="text-align:left;font-size:10px;display:inline-table">Aguarde...</div>
	  </td>
 	  <!-- aqui ser&atilde;o inclu&iacute;das as bandeiras que permitem a troca de idioma -->
	  <td class=tdbranca  ><div id=seletorIdiomas ></div></td>
	  <!--
		A op&ccedil;&atilde;o de localiza&ccedil;&atilde;o 'onde estou?' baseia-se na identifica&ccedil;&atilde;o do IP do usu&aacute;rio. Para
		que esta op&ccedil;&atilde;o funcione corretamente, deve estar instalado no I3Geo o pacote geoIP. Veja no
		SVN do portal do software p&uacute;blico o diretório arquivos_vers&otilde;es/pacotes para maiores informa&ccedil;&otilde;es
	  -->
	  <td class=tdbranca  ><div id=ondeestou ></div></td>
  </tr>
  <!-- esta div recebe o c&aacute;lculo do posicionamento do mouse em coordenadas UTM
  As coordenadas UTM apenas ser&atilde;o mostradas nessa div se o par&acirc;metro
  i3GEO.gadgets.mostraCoordenadasUTM.idhtml for diferente de i3GEO.gadgets.mostraCoordenadasGEO.idhtml
  se os IDs forem iguais, o tipo de coordenada mostrada ser&aacute; intercalada, ora UTM ora GEO.
  <tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:8px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr>
   -->
  </table>
 </td>
</tr>
<tr style="border:0px"><td colspan=3 id="barraInferior" style="background-image:url('../imagensrodape.png');height:10px"></td></tr>
<!-- aqui s&atilde;o mostradas imagens obtidas do metadata mensagem que pode existir em cada layer -->
<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>
<!-- esse elemento &eacute; preenchido automaticamente pelo i3Geo, conforme definido em ms_configura.php -->
<tr style="border:0px"><td colspan=3 style=background-color:black;color:white id="emailInstituicao">@</td></tr>

</table>
<table id="i3GEOlogoMarcaX" style='margin: 0px auto;box-shadow:0 1px 13px gray;border-radius:5px;'>
	<tr>
		<td><div id=versaoi3geo ></div><h2 style="font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para cria&ccedil;&atilde;o de mapas interativos e geoprocessamento</h2><h3 style="font-size:10px;font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, &eacute; licenciado sob GPL e integra o Portal do Software P&uacute;blico Brasileiro</h3></td>
	</tr>
	<tr>
		<td style="padding:10px;"><img style="width:560px;height:81px" alt="" src='../imagens/logo_inicio.png' ></td>
	</tr>
	<tr>
		<td>
			<!--
			<script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
			-->
		</td>
	</tr>
</table>

<script src="../classesjs/i3geo.js"></script>
<script src="../pacotes/openlayers/OpenLayers2131.js.php"></script>
<script>
i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
i3GEO.configura.autotamanho = false;
i3GEO.Interface.ATUAL = "openlayers";
i3GEO.Interface.IDCORPO = "contemImg";

i3GEO.Interface.openlayers.GADGETS = {
		PanZoomBar:true,
		PanZoom:false,
		LayerSwitcher:true,
		ScaleLine:true,
		OverviewMap:false
	};
i3GEO.Interface.openlayers.TILES = true;
i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}';
i3GEO.cria();
i3GEO.configura.mapaRefDisplay = "none";

i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
i3GEO.barraDeBotoes.OFFSET = -170;

i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.permiteLogin = true;
i3GEO.idioma.IDSELETOR = "seletorIdiomas";

i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";

i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
i3GEO.mapa.AUTORESIZE = true;
OpenLayers.ImgPath = "../pacotes/openlayers/img/";
(function(){
	var oce = new OpenLayers.Layer.ArcGIS93Rest(
		"ESRI Ocean Basemap",
		"http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export",
		{format:"jpg"},
		{isBaseLayer:true,visibility:false}
	);
	var ims = new OpenLayers.Layer.ArcGIS93Rest(
		"ESRI Imagery World 2D",
		"http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export",
		{},
		{isBaseLayer:true,visibility:false}
	);
	var wsm = new OpenLayers.Layer.ArcGIS93Rest(
		"ESRI World Street Map",
		"http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
		{},
		{isBaseLayer:true,visibility:false}
	);
	var bra = new OpenLayers.Layer.WMS(
		"Base carto MMA",
		"http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
		{layers:"baseraster",srs:"EPSG:4618",format:"image/png",isBaseLayer:false},
		{isBaseLayer:true,visibility:false}
	);
	i3GEO.Interface.openlayers.LAYERSADICIONAIS = [oce,ims,wsm,bra];
})();

function janelaMaisTemas(){
	var janela = i3GEO.janela.cria("400px","380px","","","","+ Temas","maisTemas");
	janela[2].style.textAlign="left";
	janela[2].style.background = "white";
	janela[2].style.overflow = "auto";
	janela[2].style.height = "380px";
	janela[2].innerHTML = "<div id='arvoreAdicionaTema' ></div>";
	i3GEO.arvoreDeTemas.ARVORE = false;
	i3GEO.arvoreDeTemas.cria(i3GEO.configura.sid,i3GEO.configura.locaplic,"arvoreAdicionaTema");
}
i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
i3GEO.arvoreDeCamadas.EXPANDIDA = false;
i3GEO.arvoreDeCamadas.LEGENDAEXPANDIDA = false;
i3GEO.arvoreDeCamadas.OPCOESTEMAS = false;
i3GEO.arvoreDeCamadas.OPCOESICONES = false;
i3GEO.configura.templateLegenda = "legenda3.htm";
i3GEO.inicia();
</script>
</body>
</html>