Commit f76fff6205230269c96768e9adbbfc259e09707e
1 parent
9e1bf720
Exists in
master
and in
7 other branches
Atualização dos exemplos
Showing
6 changed files
with
534 additions
and
398 deletions
Show diff stats
admin/admin.db
No preview for this file type
classesjs/classe_arvoredetemas.js
... | ... | @@ -1740,23 +1740,37 @@ i3GEO.arvoreDeTemas = { |
1740 | 1740 | */ |
1741 | 1741 | adicionaTemas: function(tsl){ |
1742 | 1742 | if(typeof(console) !== 'undefined'){console.info("i3GEO.arvoreDeTemas.adicionaTemas()");} |
1743 | - var temp; | |
1744 | - // | |
1745 | - //zera o contador de tempo | |
1746 | - // | |
1747 | - /* | |
1748 | - try{ | |
1749 | - clearTimeout(tempoBotaoAplicar); | |
1750 | - }catch(e){} | |
1751 | - tempoBotaoAplicar = ""; | |
1752 | - */ | |
1743 | + var temp, | |
1744 | + tempAdiciona = function(retorno){ | |
1745 | + i3GEO.atualiza(); | |
1746 | + // | |
1747 | + //verifica se deve ser ativada uma outra guia que nao a atual | |
1748 | + // | |
1749 | + if(i3GEO.arvoreDeTemas.RETORNAGUIA !== ""){ | |
1750 | + if(i3GEO.arvoreDeTemas.RETORNAGUIA !== i3GEO.guias.ATUAL){ | |
1751 | + i3GEO.guias.escondeGuias(); | |
1752 | + i3GEO.guias.mostra(i3GEO.arvoreDeTemas.RETORNAGUIA); | |
1753 | + } | |
1754 | + } | |
1755 | + // | |
1756 | + //verifica se a janela da ferramenta identifica esta ativa para atualizar a lista de temas | |
1757 | + // | |
1758 | + try{ | |
1759 | + if($i("i3GEOidentificalistaTemas")){ | |
1760 | + i3GEOF.identifica.listaTemas(); | |
1761 | + g_tipoacao = "identifica"; | |
1762 | + } | |
1763 | + } | |
1764 | + catch(r){ | |
1765 | + if(typeof(console) !== 'undefined'){console.error(r);} | |
1766 | + } | |
1767 | + }; | |
1753 | 1768 | i3GEO.mapa.ativaTema(""); |
1754 | 1769 | // |
1755 | 1770 | //pega os temas ativados na arvore de menus |
1756 | 1771 | // |
1757 | 1772 | if(arguments.length !== 1) |
1758 | 1773 | {tsl = i3GEO.arvoreDeTemas.listaTemasAtivos();} |
1759 | - //i3GEO.arvoreDeTemas.desativaCheckbox(); | |
1760 | 1774 | // |
1761 | 1775 | //se forem encontrados temas ativos na arvore de menus, o mapa e redesenhado com a adicao de novos temas |
1762 | 1776 | // |
... | ... | @@ -1768,48 +1782,29 @@ i3GEO.arvoreDeTemas = { |
1768 | 1782 | } |
1769 | 1783 | if(tsl.length > 0){ |
1770 | 1784 | //verifica se o tema esta vinculado ao sistema de metadados estatisticos |
1771 | - temp = i3GEO.arvoreDeTemas.ARVORE.getNodeByProperty("idtema",tsl[0]); | |
1772 | - if(temp && temp.data.tipoa_tema === "META"){ | |
1773 | - //obtem os parametros do tema | |
1774 | - temp = function(retorno){ | |
1775 | - var id = retorno.data[tsl[0]]["METAESTAT_ID_MEDIDA_VARIAVEL"]; | |
1776 | - i3GEO.util.dialogoFerramenta( | |
1777 | - "i3GEO.mapa.dialogo.metaestat()", | |
1778 | - "metaestat", | |
1779 | - "metaestat", | |
1780 | - "index.js", | |
1781 | - "i3GEOF.metaestat.inicia('flutuanteSimples','',"+id+")" | |
1782 | - ); | |
1785 | + if(i3GEO.arvoreDeTemas.ARVORE){ | |
1786 | + temp = i3GEO.arvoreDeTemas.ARVORE.getNodeByProperty("idtema",tsl[0]); | |
1787 | + if(temp && temp.data.tipoa_tema === "META"){ | |
1788 | + //obtem os parametros do tema | |
1789 | + temp = function(retorno){ | |
1790 | + var id = retorno.data[tsl[0]]["METAESTAT_ID_MEDIDA_VARIAVEL"]; | |
1791 | + i3GEO.util.dialogoFerramenta( | |
1792 | + "i3GEO.mapa.dialogo.metaestat()", | |
1793 | + "metaestat", | |
1794 | + "metaestat", | |
1795 | + "index.js", | |
1796 | + "i3GEOF.metaestat.inicia('flutuanteSimples','',"+id+")" | |
1797 | + ); | |
1783 | 1798 | |
1784 | - }; | |
1785 | - i3GEO.php.pegaMetaData(temp,tsl[0]); | |
1799 | + }; | |
1800 | + i3GEO.php.pegaMetaData(temp,tsl[0]); | |
1801 | + } | |
1802 | + else{ | |
1803 | + i3GEO.php.adtema(tempAdiciona,tsl.toString()); | |
1804 | + } | |
1786 | 1805 | } |
1787 | 1806 | else{ |
1788 | - temp = function(retorno){ | |
1789 | - i3GEO.atualiza(); | |
1790 | - // | |
1791 | - //verifica se deve ser ativada uma outra guia que nao a atual | |
1792 | - // | |
1793 | - if(i3GEO.arvoreDeTemas.RETORNAGUIA !== ""){ | |
1794 | - if(i3GEO.arvoreDeTemas.RETORNAGUIA !== i3GEO.guias.ATUAL){ | |
1795 | - i3GEO.guias.escondeGuias(); | |
1796 | - i3GEO.guias.mostra(i3GEO.arvoreDeTemas.RETORNAGUIA); | |
1797 | - } | |
1798 | - } | |
1799 | - // | |
1800 | - //verifica se a janela da ferramenta identifica esta ativa para atualizar a lista de temas | |
1801 | - // | |
1802 | - try{ | |
1803 | - if($i("i3GEOidentificalistaTemas")){ | |
1804 | - i3GEOF.identifica.listaTemas(); | |
1805 | - g_tipoacao = "identifica"; | |
1806 | - } | |
1807 | - } | |
1808 | - catch(r){ | |
1809 | - if(typeof(console) !== 'undefined'){console.error(r);} | |
1810 | - } | |
1811 | - }; | |
1812 | - i3GEO.php.adtema(temp,tsl.toString()); | |
1807 | + i3GEO.php.adtema(tempAdiciona,tsl.toString()); | |
1813 | 1808 | } |
1814 | 1809 | } |
1815 | 1810 | }, | ... | ... |
exemplos/camadas5.htm
... | ... | @@ -91,7 +91,7 @@ |
91 | 91 | background-image:url(../mashups/openlayers.png); |
92 | 92 | background-repeat:no-repeat; |
93 | 93 | float:right; |
94 | - right: 0px; | |
94 | + right: 0px; | |
95 | 95 | height:29px; |
96 | 96 | margin:2px; |
97 | 97 | width:29px; |
... | ... | @@ -99,7 +99,8 @@ |
99 | 99 | } |
100 | 100 | </style> |
101 | 101 | <script> |
102 | -alert("Experimente abrir a guia móvel e clique na camada Limite Estadual para desativá-la"); | |
102 | +i3GEO.configura.mashuppar = "&temasa=estadosl locali"; | |
103 | +alert("Experimente abrir a guia movel e clique na camada Limite Estadual para desativa-la"); | |
103 | 104 | // |
104 | 105 | //exemplo de como manipular os checkbox da árvore de camadas |
105 | 106 | // |
... | ... | @@ -119,7 +120,7 @@ function novaFuncaoLigaDesliga(objInput){ |
119 | 120 | //altera a situação de outros temas |
120 | 121 | if(codigoTema == "estadosl"){ |
121 | 122 | //captura o checkbox de outra camada |
122 | - ck = i3GEO.arvoreDeCamadas.capturaCheckBox("estados"); | |
123 | + ck = i3GEO.arvoreDeCamadas.capturaCheckBox("locali"); | |
123 | 124 | //se o estado da camada desejada for igual ao da camada clicada, não faz nada |
124 | 125 | if(ck.checked != objInput.checked){ |
125 | 126 | //coloca o checkbox no mesmo estado daquele que foi clicado |
... | ... | @@ -144,7 +145,7 @@ i3GEO.Interface.openlayers.GADGETS = { |
144 | 145 | PanZoom:false, |
145 | 146 | LayerSwitcher:true, |
146 | 147 | ScaleLine:true, |
147 | - OverviewMap:false | |
148 | + OverviewMap:false | |
148 | 149 | }; |
149 | 150 | i3GEO.Interface.openlayers.TILES = true; |
150 | 151 | i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}' |
... | ... | @@ -166,25 +167,25 @@ i3GEO.guias.TIPO = "movel"; |
166 | 167 | i3GEO.guias.guiaMovel.config.topGuiaMovel = 0; |
167 | 168 | OpenLayers.ImgPath = "../pacotes/openlayers/img/"; |
168 | 169 | (function(){ |
169 | - var oce = new OpenLayers.Layer.ArcGIS93Rest( | |
170 | + var oce = new OpenLayers.Layer.ArcGIS93Rest( | |
170 | 171 | "ESRI Ocean Basemap", |
171 | 172 | "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export", |
172 | 173 | {format:"jpeg"}, |
173 | 174 | {isBaseLayer:true,visibility:false} |
174 | 175 | ); |
175 | - var ims = new OpenLayers.Layer.ArcGIS93Rest( | |
176 | + var ims = new OpenLayers.Layer.ArcGIS93Rest( | |
176 | 177 | "ESRI Imagery World 2D", |
177 | 178 | "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export", |
178 | 179 | {format:"jpeg"}, |
179 | 180 | {isBaseLayer:true,visibility:false} |
180 | 181 | ); |
181 | - var wsm = new OpenLayers.Layer.ArcGIS93Rest( | |
182 | + var wsm = new OpenLayers.Layer.ArcGIS93Rest( | |
182 | 183 | "ESRI World Street Map", |
183 | 184 | "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export", |
184 | 185 | {format:"jpeg"}, |
185 | 186 | {isBaseLayer:true,visibility:false} |
186 | 187 | ); |
187 | - var bra = new OpenLayers.Layer.WMS( | |
188 | + var bra = new OpenLayers.Layer.WMS( | |
188 | 189 | "Base carto MMA", |
189 | 190 | "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map", |
190 | 191 | {layers:"baseraster",srs:"EPSG:4618",format:"image/png",isBaseLayer:false}, | ... | ... |
exemplos/index.html
1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
2 | -<html><head><title>i3Geo</title> | |
3 | - | |
4 | -<link rel="stylesheet" type="text/css" href="../admin/html/admin.css"> | |
2 | +<html> | |
3 | +<head> | |
4 | +<title>i3Geo</title> | |
5 | + | |
6 | +<link rel="stylesheet" type="text/css" href="../admin/html/admin.css"> | |
5 | 7 | <style> |
6 | -body,td | |
7 | -{ | |
8 | -text-align:left; | |
9 | -border: 0px solid #FFFFFF; | |
10 | -font-family: Verdana, Arial, Helvetica, sans-serif; | |
11 | -position:relative; | |
12 | -font-size:10pt; | |
13 | -padding-bottom:10px; | |
8 | +body,td { | |
9 | + text-align: left; | |
10 | + border: 0px solid #FFFFFF; | |
11 | + font-family: Verdana, Arial, Helvetica, sans-serif; | |
12 | + position: relative; | |
13 | + font-size: 10pt; | |
14 | + padding-bottom: 10px; | |
14 | 15 | } |
15 | -</style></head> | |
16 | -<body class="yui-skin-sam fundoPonto"> | |
17 | -<center> | |
18 | -<div class="bordaSuperior"> </div> | |
19 | -<div class="mascaraPrincipal" id="divGeral" style="width: 700px; "> <img src="../imagens/i3geo1.jpg"><br> | |
20 | -<h1>Exemplos de configuração da interface do i3geo</h1> | |
21 | -<h2>Mashups</h2> | |
22 | -<a href="mashupol1.htm" target="_blank">Openlayers | |
23 | -em um iframe</a> | |
24 | -<h2>Interface OpenLayers</h2> | |
25 | -<p>A | |
26 | -interface OpenLayers passou a ser o padrão do i3Geo com a versão 4.4. O | |
27 | -Modo TILE permite que o mapa seja construído em pequenas partes (TILES) | |
28 | -apresentando uma navegabilidade contínua quando se desloca o mapa | |
29 | -(pan). No modo normal, é desenhada apenas uma imagem para cada camada | |
30 | -do mapa. Esse último modo pode apresentar uma performance melhor em | |
31 | -sistemas baseados no Windows (MS4W). O uso de "TILES" ou não é | |
32 | -controlado pela variável <i>i3GEO.Interface.openlayers.TILES = | |
33 | -false|true</i> </p> | |
34 | -<p><a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES | |
35 | -= false</a></p> | |
36 | -<p><a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES | |
37 | -= true</a></p> | |
38 | -<p>A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> | |
39 | -com base na API do OpenLayers. Esse objeto pode receber os métodos | |
40 | -dessa API, permitindo modificar o mapa. Alguns parâmetros são | |
41 | -controlados por variáveis específicas do i3Geo.</p> | |
42 | -<p><a href="openlayers3.htm" target="_blank">Modo | |
43 | -TILE com uma área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER | |
44 | -= 1;</i></p> | |
45 | -<p><a href="openlayers4.htm" target="_blank">Ativação | |
46 | -de um layer de fundo</a></p> | |
47 | -<p><a href="openlayers5.htm" target="_blank">Modifica | |
48 | -a extensão geográfica máxima de apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT | |
49 | -= [-63.712484, -20.765721, -42.385294, -9.136698];</i></p> | |
50 | -<p><b>Menu</b></p> | |
51 | -<p><a href="menus1.htm" target="_blank">Modifica | |
52 | -o menu suspenso</a></p> | |
53 | -<p><b>Guias e janelas </b></p> | |
54 | -<p><span style="font-weight: bold;"></span><a href="guias3.htm" target="_blank">Modificação na guia | |
55 | -que mostra o catálogo de dados. Uso de combo ao invés de árvore</a></p> | |
56 | -<p><a href="guias2.htm" target="_blank">Guias | |
57 | -do tipo sanfona</a></p> | |
58 | -<p><a href="fotos1.htm" target="_blank">Guias | |
59 | -do tipo sanfona com fotos</a></p> | |
60 | -<p><a href="guias1.htm" target="_blank">Retorna | |
61 | -à guia padrão após adicionar um tema</a></p> | |
62 | -<p><b>Barras de botões do tipo janela flutuante</b> </p> | |
63 | -<p><a href="botoes6.htm" target="_blank">Apenas alguns ícones são mostrados e com uma função alterada (binóculo)</a></p> | |
64 | -<p><a href="botoes1.htm" target="_blank">Barra | |
65 | -apenas com os ícones</a></p> | |
66 | -<p><a href="botoeshtm.htm" target="_blank">Barra | |
67 | -com botões criados via HTML</a></p> | |
68 | -<p><a href="botoes5.htm" target="_blank">Como | |
69 | -inserir botões na barra de botões</a></p> | |
70 | -<p><a href="botoes2.htm" target="_blank">Construção | |
71 | -das barras de botões via javascript, sem necessidade de definir | |
72 | -elementos no HTML</a></p> | |
73 | -<p><a href="botoes3.htm" target="_blank">Construção | |
74 | -das barras de botões via javascript, com escolha dos botões que irão | |
75 | -ser incluídos</a></p> | |
76 | -<p><a href="botoes4.htm" target="_blank">Construção | |
77 | -das barras de botões via javascript, com escolha dos botões que irão | |
78 | -ser incluídos e estilo diferente</a></p> | |
79 | -<p><b>Legenda</b></p> | |
80 | -<p><a href="legenda1.htm" target="_blank">Legenda | |
81 | -com grupos</a></p> | |
82 | -<p><b>Customização de ferramentas existentes</b></p> | |
83 | -<p><a href="fotos.htm" target="_blank">Mapa | |
84 | -com a ferramenta "carousel" posicionada início do mapa</a></p> | |
85 | -<p><a href="fotos.htm" target="_blank">Lista | |
86 | -de fotos em uma guia</a></p> | |
87 | -<p><a href="aplic1.htm" target="_blank">Busca | |
88 | -rápida</a></p> | |
89 | -<p><a href="aplic2.htm" target="_blank">Adiciona | |
90 | -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 | -<p><a href="mashup1.htm" target="_blank">Exemplo | |
92 | -1 </a>- Botões com destaque laranja, em dois grupos na parte | |
93 | -superior e mapa com zoom</p> | |
94 | -<p><a href="mashup2.htm" target="_blank">Exemplo | |
95 | -2 </a>- Botões com destaque laranja, em um único grupo na parte | |
96 | -superior e mapa sem zoom</p> | |
97 | -<p><a href="mashup3.htm" target="_blank">Exemplo | |
98 | -3 </a>- Sem as guias, com os botões na parte superior e a | |
99 | -legenda em um outro local da página</p> | |
100 | -<p><a href="mashup4.htm" target="_blank">Exemplo | |
101 | -4 </a>- Sem as guias, com os botões na parte superior e a | |
102 | -legenda em uma janela flutuante</p> | |
103 | -<p><a href="mashup5.htm" target="_blank">Exemplo | |
104 | -5 </a>- Sem as guias e apenas com os botões de naveção em uma | |
105 | -janela flutuante</p> | |
106 | -<p><a href="mashup6.htm" target="_blank">Exemplo | |
107 | -6 </a>- Mapa posicionado no canto superior esquerdo, sem as | |
108 | -guias e apenas com os botões de naveção em uma janela flutuante</p> | |
109 | -<p><b>Inclusão de um mapa dentro de uma página em um IFRAME</b></p> | |
110 | -<p><a href="iframe1.htm" target="_blank">Exemplo | |
111 | -1</a> - Sem controle de tamanho</p> | |
112 | -<p><a href="iframe2.htm" target="_blank">Exemplo | |
113 | -2</a> - Com tamanho controlado<br></p><h2>Interface Google Maps</h2> | |
114 | -<p><a href="googlemapssanfona.phtml" target="_blank">Guias | |
115 | -do tipo sanfona</a></p> | |
116 | -<h2>Configuração de janelas, árvores de camadas e adição de temas</h2> | |
117 | -<p><a href="janelas.htm" target="_blank">Opções | |
118 | -de criação de janelas flutuantes</a></p> | |
119 | -<p><a href="arvoredetemas.htm" target="_blank">Construtor | |
120 | -de opções da árvore de adição de temas</a></p> | |
121 | -<p><a href="arvoredecamadas.htm" target="_blank">Construtor | |
122 | -de opções da árvore de camadas</a></p> | |
123 | -<p><a href="combos.htm" target="_blank">Criação | |
124 | -de combos baseados na árvore de camadas e lista de colunas de um tema</a></p> | |
125 | -<p><a href="camadas1.htm" target="_blank">Árvore | |
126 | -expandida</a></p> | |
127 | -<p><a href="camadas2.htm" target="_blank">Legenda | |
128 | -expandida</a></p> | |
129 | -<p><a href="camadas3.htm" target="_blank">Árvore | |
130 | -simplificada</a></p> | |
131 | -<p><a href="camadas4.htm" target="_blank">Opção | |
132 | -"mais temas" na guia de camadas</a></p> | |
133 | -<p><a href="legenda2.htm" target="_blank">Árvore | |
134 | -com grupos</a></p> | |
135 | -<h2>Cálculos</h2> | |
136 | -<p><a href="calculo1.htm" target="_blank">Distâncias</a></p> | |
137 | -<h2>Login</h2> | |
138 | -<p><a href="login.htm" target="_blank">Login simples</a> Abre uma janela de diálogo para que o usuário faça login. Nesse exemplo não é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.</p> | |
139 | -<p><a href="login1.htm" target="_blank">Login simples com verificação</a> Abre uma janela de diálogo para que o usuário faça login. Ao contrário do anterior nesse exemplo é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.</p> | |
140 | -<p><a href="login2.htm" target="_blank">Login com página de verificação anterior</a> Abre uma janela de diálogo para que o usuário faça login. O código javascript só fica exposto após o login.</p> | |
141 | -<p><a href="login3.php" target="_blank">Exigência de login </a>A página só é aberta se o usuário estiver logado.</p> | |
142 | -<p><a href="login4.htm" target="_blank">Exige login e verifica acesso à página </a>O mapa só é aberto se o usuário estiver cadastrado em um dos papéis que pode acessar essa operação.</p> | |
143 | -</div> | |
144 | -<script> | |
145 | -/* | |
146 | -Title: Exemplos de configuração | |
147 | -Exemplos que mostram como o i3Geo pode ser customizado ou utilizado com diferentes interfaces. | |
148 | -Link: | |
149 | -http://localhost/i3geo/exemplos | |
150 | -Arquivo: | |
151 | -exemplos/index.htm | |
152 | -Licenca: | |
153 | -GPL2 | |
154 | -I3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet | |
155 | -Direitos Autorais Reservados (c) 2006 Ministério do Meio Ambiente Brasil | |
156 | -Desenvolvedor: Edmar Moretti edmar.moretti@mma.gov.br | |
157 | -Este programa é software livre; você pode redistribuí-lo | |
158 | -e/ou modificá-lo sob os termos da Licença Pública Geral | |
159 | -GNU conforme publicada pela Free Software Foundation; | |
160 | -Este programa é distribuído na expectativa de que seja útil, | |
161 | -porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita | |
162 | -de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA. | |
163 | -Consulte a Licença Pública Geral do GNU para mais detalhes. | |
164 | -Você deve ter recebido uma cópia da Licença Pública Geral do | |
165 | -GNU junto com este programa; se não, escreva para a | |
166 | -Free Software Foundation, Inc., no endereço | |
167 | -59 Temple Street, Suite 330, Boston, MA 02111-1307 USA. | |
168 | -*/ | |
169 | -</script></center> | |
170 | -</body></html> | |
171 | 16 | \ No newline at end of file |
17 | +</style> | |
18 | +<script> | |
19 | +/* | |
20 | +@TODO sempre verificar os exemplos | |
21 | +*/ | |
22 | +</script> | |
23 | +</head> | |
24 | +<body class="yui-skin-sam fundoPonto"> | |
25 | + <center> | |
26 | + <div class="bordaSuperior"> </div> | |
27 | + <div class="mascaraPrincipal" id="divGeral" style="width: 700px;"> | |
28 | + <img src="../imagens/i3geo1.jpg"><br> | |
29 | + <h1>Exemplos de configuração da interface do i3geo</h1> | |
30 | + <h2>Mashups</h2> | |
31 | + <a href="mashupol1.htm" target="_blank">Openlayers em um iframe</a> | |
32 | + <h2>Interface OpenLayers</h2> | |
33 | + <p> | |
34 | + A interface OpenLayers passou a ser o padrão do i3Geo com a | |
35 | + versão 4.4. O Modo TILE permite que o mapa seja | |
36 | + construído em pequenas partes (TILES) apresentando uma | |
37 | + navegabilidade contínua quando se desloca o mapa (pan). No | |
38 | + modo normal, é desenhada apenas uma imagem para cada camada | |
39 | + do mapa. Esse último modo pode apresentar uma performance | |
40 | + melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou | |
41 | + não é controlado pela variável <i>i3GEO.Interface.openlayers.TILES | |
42 | + = false|true</i> | |
43 | + </p> | |
44 | + <p> | |
45 | + <a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES | |
46 | + = false</a> | |
47 | + </p> | |
48 | + <p> | |
49 | + <a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES | |
50 | + = true</a> | |
51 | + </p> | |
52 | + <p> | |
53 | + A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com | |
54 | + base na API do OpenLayers. Esse objeto pode receber os | |
55 | + métodos dessa API, permitindo modificar o mapa. Alguns | |
56 | + parâmetros são controlados por variáveis | |
57 | + específicas do i3Geo. | |
58 | + </p> | |
59 | + <p> | |
60 | + <a href="openlayers3.htm" target="_blank">Modo TILE com uma | |
61 | + área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER | |
62 | + = 1;</i> | |
63 | + </p> | |
64 | + <p> | |
65 | + <a href="openlayers4.htm" target="_blank">Ativação | |
66 | + de um layer de fundo</a> | |
67 | + </p> | |
68 | + <p> | |
69 | + <a href="openlayers5.htm" target="_blank">Modifica a | |
70 | + extensão geográfica máxima de | |
71 | + apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT | |
72 | + = [-63.712484, -20.765721, -42.385294, -9.136698];</i> | |
73 | + </p> | |
74 | + <p> | |
75 | + <b>Menu</b> | |
76 | + </p> | |
77 | + <p> | |
78 | + <a href="menus1.htm" target="_blank">Modifica o menu suspenso</a> | |
79 | + </p> | |
80 | + <p> | |
81 | + <b>Guias e janelas </b> | |
82 | + </p> | |
83 | + <p> | |
84 | + <span style="font-weight: bold;"></span><a href="guias3.htm" | |
85 | + target="_blank">Modificação na guia que mostra o | |
86 | + catálogo de dados. Uso de combo ao invés de | |
87 | + árvore</a> | |
88 | + </p> | |
89 | + <p> | |
90 | + <a href="guias2.htm" target="_blank">Guias do tipo sanfona</a> | |
91 | + </p> | |
92 | + <p> | |
93 | + <a href="fotos1.htm" target="_blank">Guias do tipo sanfona com | |
94 | + fotos</a> | |
95 | + </p> | |
96 | + <p> | |
97 | + <a href="guias1.htm" target="_blank">Retorna à guia | |
98 | + padrão após adicionar um tema</a> | |
99 | + </p> | |
100 | + <p> | |
101 | + <b>Barras de botões do tipo janela flutuante</b> | |
102 | + </p> | |
103 | + <p> | |
104 | + <a href="botoes6.htm" target="_blank">Apenas alguns | |
105 | + ícones são mostrados e com uma função | |
106 | + alterada (binóculo)</a> | |
107 | + </p> | |
108 | + <p> | |
109 | + <a href="botoes1.htm" target="_blank">Barra apenas com os | |
110 | + ícones</a> | |
111 | + </p> | |
112 | + <p> | |
113 | + <a href="botoeshtm.htm" target="_blank">Barra com botões | |
114 | + criados via HTML</a> | |
115 | + </p> | |
116 | + <p> | |
117 | + <a href="botoes5.htm" target="_blank">Como inserir botões | |
118 | + na barra de botões</a> | |
119 | + </p> | |
120 | + <p> | |
121 | + <a href="botoes2.htm" target="_blank">Construção | |
122 | + das barras de botões via javascript, sem necessidade de | |
123 | + definir elementos no HTML</a> | |
124 | + </p> | |
125 | + <p> | |
126 | + <a href="botoes3.htm" target="_blank">Construção | |
127 | + das barras de botões via javascript, com escolha dos | |
128 | + botões que irão ser incluídos</a> | |
129 | + </p> | |
130 | + <p> | |
131 | + <a href="botoes4.htm" target="_blank">Construção | |
132 | + das barras de botões via javascript, com escolha dos | |
133 | + botões que irão ser incluídos e estilo | |
134 | + diferente</a> | |
135 | + </p> | |
136 | + <p> | |
137 | + <b>Legenda</b> | |
138 | + </p> | |
139 | + <p> | |
140 | + <a href="legenda1.htm" target="_blank">Legenda com grupos</a> | |
141 | + </p> | |
142 | + <p> | |
143 | + <b>Customização de ferramentas existentes</b> | |
144 | + </p> | |
145 | + <p> | |
146 | + <a href="fotos.htm" target="_blank">Mapa com a ferramenta | |
147 | + "carousel" posicionada início do mapa</a> | |
148 | + </p> | |
149 | + <p> | |
150 | + <a href="fotos.htm" target="_blank">Lista de fotos em uma guia</a> | |
151 | + </p> | |
152 | + <p> | |
153 | + <a href="aplic1.htm" target="_blank">Busca rápida</a> | |
154 | + </p> | |
155 | + <p> | |
156 | + <a href="aplic2.htm" target="_blank">Adiciona uma camada extra | |
157 | + via javascript</a> | |
158 | + </p> | |
159 | + <p> | |
160 | + <a href="camadas5.htm" target="_blank">Vincula temas na | |
161 | + árvore de camadas para ligar/desligar em bloco</a> | |
162 | + </p> | |
163 | + <b>Inclusão de um mapa dentro de uma página usando | |
164 | + DIV</b> | |
165 | + <p> | |
166 | + <a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Botões | |
167 | + com destaque laranja, em dois grupos na parte superior e mapa com | |
168 | + zoom | |
169 | + </p> | |
170 | + <p> | |
171 | + <a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Botões | |
172 | + com destaque laranja, em um único grupo na parte superior e | |
173 | + mapa sem zoom | |
174 | + </p> | |
175 | + <p> | |
176 | + <a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias, | |
177 | + com os botões na parte superior e a legenda em um outro local | |
178 | + da página | |
179 | + </p> | |
180 | + <p> | |
181 | + <a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias, | |
182 | + com os botões na parte superior e a legenda em uma janela | |
183 | + flutuante | |
184 | + </p> | |
185 | + <p> | |
186 | + <a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e | |
187 | + apenas com os botões de naveção em uma janela | |
188 | + flutuante | |
189 | + </p> | |
190 | + <p> | |
191 | + <a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa | |
192 | + posicionado no canto superior esquerdo, sem as guias e apenas com os | |
193 | + botões de naveção em uma janela flutuante | |
194 | + </p> | |
195 | + <p> | |
196 | + <b>Inclusão de um mapa dentro de uma página em um | |
197 | + IFRAME</b> | |
198 | + </p> | |
199 | + <p> | |
200 | + <a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle | |
201 | + de tamanho | |
202 | + </p> | |
203 | + <p> | |
204 | + <a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho | |
205 | + controlado<br> | |
206 | + </p> | |
207 | + <h2>Interface Google Maps</h2> | |
208 | + <p> | |
209 | + <a href="googlemapssanfona.phtml" target="_blank">Guias do tipo | |
210 | + sanfona</a> | |
211 | + </p> | |
212 | + <h2>Configuração de janelas, árvores de | |
213 | + camadas e adição de temas</h2> | |
214 | + <p> | |
215 | + <a href="janelas.htm" target="_blank">Opções de | |
216 | + criação de janelas flutuantes</a> | |
217 | + </p> | |
218 | + <p> | |
219 | + <a href="arvoredetemas.htm" target="_blank">Construtor de | |
220 | + opções da árvore de adição de | |
221 | + temas</a> | |
222 | + </p> | |
223 | + <p> | |
224 | + <a href="arvoredecamadas.htm" target="_blank">Construtor de | |
225 | + opções da árvore de camadas</a> | |
226 | + </p> | |
227 | + <p> | |
228 | + <a href="combos.htm" target="_blank">Criação de | |
229 | + combos baseados na árvore de camadas e lista de colunas de | |
230 | + um tema</a> | |
231 | + </p> | |
232 | + <p> | |
233 | + <a href="camadas1.htm" target="_blank">Árvore expandida</a> | |
234 | + </p> | |
235 | + <p> | |
236 | + <a href="camadas2.htm" target="_blank">Legenda expandida</a> | |
237 | + </p> | |
238 | + <p> | |
239 | + <a href="camadas3.htm" target="_blank">Árvore | |
240 | + simplificada</a> | |
241 | + </p> | |
242 | + <p> | |
243 | + <a href="camadas4.htm" target="_blank">Opção "mais | |
244 | + temas" na guia de camadas</a> | |
245 | + </p> | |
246 | + <p> | |
247 | + <a href="legenda2.htm" target="_blank">Árvore com grupos</a> | |
248 | + </p> | |
249 | + <h2>Cálculos</h2> | |
250 | + <p> | |
251 | + <a href="calculo1.htm" target="_blank">Distâncias</a> | |
252 | + </p> | |
253 | + <h2>Login</h2> | |
254 | + <p> | |
255 | + <a href="login.htm" target="_blank">Login simples</a> Abre uma | |
256 | + janela de diálogo para que o usuário faça | |
257 | + login. Nesse exemplo não é considerado se o login | |
258 | + já foi feito antes ou não. Essa técnica | |
259 | + não oferece muita segurança pois o código | |
260 | + javascript fica exposto e um usuário mais experiente pode | |
261 | + burlar o login. | |
262 | + </p> | |
263 | + <p> | |
264 | + <a href="login1.htm" target="_blank">Login simples com | |
265 | + verificação</a> Abre uma janela de diálogo para | |
266 | + que o usuário faça login. Ao contrário do | |
267 | + anterior nesse exemplo é considerado se o login já foi | |
268 | + feito antes ou não. Essa técnica não oferece | |
269 | + muita segurança pois o código javascript fica exposto | |
270 | + e um usuário mais experiente pode burlar o login. | |
271 | + </p> | |
272 | + <p> | |
273 | + <a href="login2.htm" target="_blank">Login com página de | |
274 | + verificação anterior</a> Abre uma janela de | |
275 | + diálogo para que o usuário faça login. O | |
276 | + código javascript só fica exposto após o login. | |
277 | + </p> | |
278 | + <p> | |
279 | + <a href="login3.php" target="_blank">Exigência de login </a>A | |
280 | + página só é aberta se o usuário estiver | |
281 | + logado. | |
282 | + </p> | |
283 | + <p> | |
284 | + <a href="login4.htm" target="_blank">Exige login e verifica | |
285 | + acesso à página </a>O mapa só é aberto se o | |
286 | + usuário estiver cadastrado em um dos papéis que pode | |
287 | + acessar essa operação. | |
288 | + </p> | |
289 | + </div> | |
290 | + </center> | |
291 | +</body> | |
292 | +</html> | |
172 | 293 | \ No newline at end of file | ... | ... |
exemplos/legenda2.htm
1 | -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
1 | +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
2 | 2 | <html> |
3 | 3 | <head> |
4 | -<meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile"> | |
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 | -<title>i3Geo - Mapa interativo</title> | |
7 | -<script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script> | |
8 | - <style> | |
9 | - .yui-log .i3geo {background-color:yellow;} /* customize a color */ | |
10 | - .yui-log .redesenho {background-color:yellow;} /* customize a color */ | |
11 | - .yui-log .janela {background-color:yellow;} /* customize a color */ | |
12 | - .yui-log-bd {text-align:left;} | |
13 | - .yui-log-entry yui-log-verbose, p{text-align:left;} | |
14 | - .info {text-align:left;} | |
15 | - </style> | |
16 | -</head> | |
17 | -<body id="i3geo"> | |
18 | 6 | |
19 | -<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'> | |
20 | -<tr style="border:0px"> | |
21 | - <td colspan=2 id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td> | |
22 | -</tr> | |
23 | -<tr> | |
24 | -<td> | |
25 | - <table width=100% cellspacing=0 cellpadding=0 > | |
26 | - <tr> | |
27 | - <td title="libera guias" class=tdclaro id=encolheFerramentas style="vertical-align:top;width:5px;text-align:left;"></td> | |
28 | - <td> | |
29 | - <div class=verdeescuro style="top:0px;cursor:pointer;"> | |
30 | - <div id=guia1 class=guia >Temas</div> | |
31 | - <div id=guia2 class=guia >Adiciona</div> | |
32 | - <div id=guia4 class=guia >Legenda</div> | |
33 | - <div id=guia5 class=guia >Links</div> | |
34 | - </div> | |
35 | - </td> | |
36 | - </tr> | |
37 | - </table> | |
38 | -</td> | |
39 | -<td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)"> | |
40 | - <div id="menus" ></div> | |
41 | -</td> | |
42 | -</tr> | |
43 | -<tr> | |
44 | - <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:300px;text-align:left;"> | |
45 | - <div id='guia1obj' > | |
46 | - <div style='left:5px;top:10px;' id=buscaRapida ></div> | |
47 | - <div id=listaPropriedades style='top:15px;' ></div> | |
48 | - <div id=listaTemas style='top:15px;'></div> | |
49 | - </div> | |
50 | - <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div> | |
51 | - <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div> | |
52 | - <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div> | |
53 | - </td> | |
54 | - <td style="vertical-align:top;border-width:0px;"> | |
55 | - <table width="100%" style="vertical-align:top;border-width:0px"> | |
56 | - <tr><td class=verdeclaro id=contemImg > | |
57 | - <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div> | |
58 | - </td></tr> | |
59 | - </table> | |
60 | - </td> | |
61 | - </tr> | |
62 | -<tr> | |
63 | - <td class=tdbranca > | |
64 | - <div id=visual ></div> | |
65 | - <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div> | |
66 | - </td> | |
67 | - <td class=tdbranca > | |
68 | - <table width=100% ><tr> | |
69 | - <td class=tdbranca ></td> | |
70 | - <td class=tdbranca style=text-align:center > | |
71 | - <div id=localizarxy > | |
72 | - Aguarde... | |
73 | - </div> | |
74 | - </td> | |
75 | - <td class=tdbranca ><div id=escala ></div></td> | |
76 | - <td class=tdbranca ><div id=ondeestou ></div></td> | |
77 | - </tr> | |
78 | - <tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:10px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr> | |
79 | - </table> | |
80 | - </td> | |
81 | -</tr> | |
82 | -<tr style="border:0px"><td colspan=3 id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr> | |
83 | -<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> | |
84 | -<tr style="border:0px"><td colspan=3 style=background-color:black;color:white id="emailInstituicao">geoprocessamento@mma.gov.br</td></tr> | |
7 | +<title>i3GEO - OpenLayers</title> | |
8 | +<!-- estilo necessário para a ferramenta de edição --> | |
85 | 9 | |
10 | +</head> | |
11 | +<body id="i3geo" style="background-color:white"> | |
12 | +<!-- inclui o nome do usuario logado --> | |
13 | +<div id="i3GEONomeLogin" style="position:absolute;left:10px;top:12px;font-size:11px;z-index:50000"></div> | |
14 | +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'> | |
15 | + <tr style="border:0px"> | |
16 | + <td id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td> | |
17 | + </tr> | |
18 | + <tr> | |
19 | + <td id="contemMenu" style="text-align:right;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)"> | |
20 | + <!--menu suspenso--> | |
21 | + <div id="menus" ></div> | |
22 | + </td> | |
23 | + </tr> | |
24 | + <tr> | |
25 | + <td style="vertical-align:top;border-width:0px;"> | |
26 | + <table width="100%" style="vertical-align:top;border-width:0px"> | |
27 | + <tr> | |
28 | + <td class=verdeclaro id=contemImg > | |
29 | + <div id=corpoMapa style="position:relative;background-image:url('../imagens/i3geo1bw.jpg');"></div> | |
30 | + </td> | |
31 | + </tr> | |
32 | + </table> | |
33 | + </td> | |
34 | + </tr> | |
35 | + <tr> | |
36 | + <td> | |
37 | + <table width=100% > | |
38 | + <tr> | |
39 | + <td class=tdbranca > | |
40 | + <!-- | |
41 | + Nesse div são incluídos os ícones que permitem ao usuário modificar o visual de cores dos ícones | |
42 | + <div id=visual ></div> | |
43 | + --> | |
44 | + <!-- botão de compartilhamento em redes sociais --> | |
45 | + <div id=i3GEOcompartilhar style="width:170px;margin:auto;text-align:left;border-top:1px solid rgb(250,250,250);padding-top:1px" ></div> | |
46 | + <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo --> | |
47 | + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div> | |
48 | + </td> | |
49 | + <td class=tdbranca > | |
50 | + <!-- aqui será incluída a escala numérica --> | |
51 | + <div id=escala style="text-align:right;" ></div> | |
52 | + </td> | |
53 | + <td class=tdbranca > | |
54 | + <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse --> | |
55 | + <div id=localizarxy style="margin:auto;text-align:left;font-size:10px;display:inline-table"></div> | |
56 | + </td> | |
57 | + <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma --> | |
58 | + <td class=tdbranca > | |
59 | + <div id=seletorIdiomas ></div> | |
60 | + </td> | |
61 | + </tr> | |
62 | + </table> | |
63 | + </td> | |
64 | + </tr> | |
65 | + <tr style="border:0px"> | |
66 | + <td id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td> | |
67 | + </tr> | |
68 | +</table> | |
69 | +<table id="i3GEOlogoMarca" style='margin: 0px auto;box-shadow:0 1px 13px gray;border-radius:5px;'> | |
70 | + <tr> | |
71 | + <td><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</h2><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></td> | |
72 | + </tr> | |
73 | + <tr> | |
74 | + <td style="padding:10px;"><img style="width:560px;height:81px" alt="" src='../imagens/logo_inicio.png' ></td> | |
75 | + </tr> | |
76 | + <tr> | |
77 | + <td> | |
78 | + <!-- | |
79 | + <script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script> | |
80 | + --> | |
81 | + </td> | |
82 | + </tr> | |
86 | 83 | </table> |
87 | -</center> | |
88 | -<div id=barraDeBotoes1 style='display:none'> | |
89 | - <table style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><div ID='historicozoom' ></div></td></tr><tr><td style=height:5px ></td></tr></table> | |
90 | - <table title="zoom" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/></td></tr></table> | |
91 | - <table title="desloca" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="desloca" alt="" src="../imagens/branco.gif" ID='pan'/></td></tr></table> | |
92 | - <table title="info" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="info" alt="" src="../imagens/branco.gif" id='identifica'/></td></tr></table> | |
93 | - <table title="geral" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="geral" alt="" src="../imagens/branco.gif" ID='zoomtot'/></td></tr></table> | |
94 | - <table title="mede" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="mede" alt="" src="../imagens/branco.gif" id='mede'/></td></tr></table> | |
95 | - <table title="area" style="width:100%"><caption style="text-align:center"> </caption><tr><td style='background-color:rgb(250,250,250);'><img title="area" alt="" src="../imagens/branco.gif" id='area'/></td></tr></table> | |
96 | -</div> | |
97 | -<div id=barraDeBotoes2 style='display:none'> | |
98 | - <table style="width:100%"><caption style="text-align:center"> </caption> | |
99 | - <tr><td style='background-color:rgb(250,250,250);'><img title="" alt="" src="../imagens/branco.gif" id='sobeferramentas'/></td></tr> | |
100 | - </table> | |
101 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
102 | - <p style='font-size:6px;'> </p> | |
103 | - <img title="imprimir" alt="" src="../imagens/branco.gif" id='imprimir'/> | |
104 | - </div> | |
105 | - | |
106 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
107 | - <p style='font-size:6px;'> </p> | |
108 | - <img title="reinicia" alt="" src="../imagens/branco.gif" id='reinicia'/> | |
109 | - </div> | |
110 | - | |
111 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
112 | - <p style='font-size:6px;'> </p> | |
113 | - <img title="extensao" alt="" src="../imagens/branco.gif" id='exten'/> | |
114 | - </div> | |
115 | 84 | |
116 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
117 | - <p style='font-size:6px;'> </p> | |
118 | - <img title="referencia" alt="" src="../imagens/branco.gif" id='referencia'/> | |
119 | - </div> | |
120 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
121 | - <p style='font-size:6px;'> </p> | |
122 | - <img title="insere xy" alt="" src="../imagens/branco.gif" id='inserexy'/> | |
123 | - </div> | |
124 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
125 | - <p style='font-size:6px;'> </p> | |
126 | - <img title="texto" alt="" src="../imagens/branco.gif" id='textofid'/> | |
127 | - </div> | |
128 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
129 | - <p style='font-size:6px;'> </p> | |
130 | - <img title="selecao" alt="" src="../imagens/branco.gif" id='selecao'/> | |
131 | - </div> | |
132 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
133 | - <p style='font-size:6px;'> </p> | |
134 | - <img title="google" alt="" src="../imagens/branco.gif" id='google'/> | |
135 | - </div> | |
136 | - <div style='display:inline;background-color:rgb(250,250,250);'> | |
137 | - <p style='font-size:6px;'> </p> | |
138 | - <img title="insere grafico" alt="" src="../imagens/branco.gif" id='inseregrafico'/> | |
139 | - </div> | |
140 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
141 | - <p style='font-size:6px;'> </p> | |
142 | - <img title="lente" alt="" src="../imagens/branco.gif" id='lentei'/> | |
85 | +<div id="i3GEOguiaMovel" style="position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none"> | |
86 | + <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' > | |
87 | + <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"> | |
88 | + <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> | |
89 | + <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'> | |
90 | + <div id='guia1obj' style='display:none;' > | |
91 | + <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico --> | |
92 | + <div style='left:5px;top:10px;' id=buscaRapida ></div> | |
93 | + <!-- Esta div acrescenta a lista de propriedades do mapa --> | |
94 | + <div id=listaPropriedades style='top:15px;' ></div> | |
95 | + <!-- 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 --> | |
96 | + <div id=listaLayersBase style='top:15px;'></div> | |
97 | + <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual --> | |
98 | + <div id=listaTemas style='top:15px;'></div> | |
99 | + </div> | |
100 | + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div> | |
101 | + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div> | |
102 | + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div> | |
103 | + </div> | |
143 | 104 | </div> |
144 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
145 | - <p style='font-size:6px;'> </p> | |
146 | - <img title="scielo" alt="" src="../imagens/branco.gif" id='scielo'/> | |
147 | - </div> | |
148 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
149 | - <p style='font-size:6px;'> </p> | |
150 | - <img title="confluencias" alt="" src="../imagens/branco.gif" id='confluence'/> | |
151 | - </div> | |
152 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
153 | - <p style='font-size:6px;'> </p> | |
154 | - <img title="busca na wikipedia" alt="" src="../imagens/branco.gif" id='wiki'/> | |
155 | - </div> | |
156 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
157 | - <p style='font-size:6px;'> </p> | |
158 | - <img title="3d" alt="" src="../imagens/branco.gif" id='v3d'/> | |
159 | - </div> | |
160 | - <div style='display:none;background-color:rgb(250,250,250);'> | |
161 | - <p style='font-size:6px;'> </p> | |
162 | - <img title="fotos" alt="" src="../imagens/branco.gif" id='buscafotos'/> | |
163 | - </div> | |
164 | - <table style="width:100%;"><tr><td style='background-color:rgb(250,250,250);'><p style='font-size:6px;'> </p><img title="" alt="" src="../imagens/branco.gif" id='desceferramentas'/></td></tr></table> | |
165 | 105 | </div> |
166 | -<script type="text/javascript"> | |
106 | + | |
107 | +<script src="../classesjs/i3geo47.js"></script> | |
108 | +<script src="../pacotes/openlayers/OpenLayers211.js.php"></script> | |
109 | +<style> | |
110 | +.olControlEditingToolbar1 div { | |
111 | + background-image:url(../mashups/openlayers.png); | |
112 | + background-repeat:no-repeat; | |
113 | + float:right; | |
114 | + right: 0px; | |
115 | + height:29px; | |
116 | + margin:2px; | |
117 | + width:29px; | |
118 | + cursor:pointer; | |
119 | +} | |
120 | +</style> | |
121 | +<script> | |
167 | 122 | i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo"; |
123 | +i3GEO.configura.autotamanho = false; | |
124 | +i3GEO.Interface.ATUAL = "openlayers"; | |
125 | +i3GEO.Interface.IDCORPO = "contemImg"; | |
126 | +i3GEO.Interface.openlayers.GADGETS = { | |
127 | + PanZoomBar:true, | |
128 | + PanZoom:false, | |
129 | + LayerSwitcher:true, | |
130 | + ScaleLine:true, | |
131 | + OverviewMap:false | |
132 | + }; | |
133 | +i3GEO.Interface.openlayers.TILES = true; | |
134 | +i3GEO.Interface.openlayers.parametrosMap.scales = [ | |
135 | + 105000000,50000000,21000000,10000000,5000000,1000000,500000,250000,100000,50000,25000,10000,5000,1000,100 | |
136 | +]; | |
137 | + | |
138 | +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}'; | |
139 | +i3GEO.configura.mashuppar = "&temasa=estadosl locali"; | |
140 | +//grupos************************************************************ | |
168 | 141 | i3GEO.configura.templateLegenda = "legendagrupos.htm"; |
169 | 142 | i3GEO.configura.grupoLayers = [ |
170 | - {nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["zee","estadosl"]}, | |
143 | + {nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["locali","estadosl"]}, | |
171 | 144 | {nome:"Grupo 2",icone:true,dinamico:true,expandido:true,layers:["mundo"]} |
172 | 145 | ]; |
146 | +// | |
173 | 147 | |
174 | 148 | i3GEO.cria(); |
175 | -i3GEO.inicia(); | |
176 | - | |
149 | +i3GEO.configura.mapaRefDisplay = "none"; | |
150 | +i3GEO.barraDeBotoes.TIPO = "olhodepeixe"; | |
151 | +i3GEO.barraDeBotoes.OFFSET = -3; | |
152 | +i3GEO.configura.oMenuData["submenus"]["janelas"] = []; | |
153 | +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.permiteLogin = true; | |
154 | +i3GEO.barraDeBotoes.ATIVA = true; | |
155 | +i3GEO.ajuda.ATIVAJANELA = false; | |
156 | +i3GEO.idioma.IDSELETOR = "seletorIdiomas"; | |
157 | +i3GEO.Interface.ATIVAMENUCONTEXTO = false; | |
158 | +i3GEO.arvoreDeTemas.TIPOBOTAO = "radio"; | |
177 | 159 | |
160 | +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true; | |
161 | +i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true; | |
162 | +i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false; | |
163 | +i3GEO.mapa.AUTORESIZE = true; | |
164 | +i3GEO.guias.TIPO = "movel"; | |
165 | +i3GEO.guias.guiaMovel.config.topGuiaMovel = 0; | |
166 | +OpenLayers.ImgPath = "../pacotes/openlayers/img/"; | |
167 | +(function(){ | |
168 | + var oce = new OpenLayers.Layer.ArcGIS93Rest( | |
169 | + "ESRI Ocean Basemap", | |
170 | + "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export", | |
171 | + {format:"jpeg"}, | |
172 | + {isBaseLayer:true,visibility:false} | |
173 | + ); | |
174 | + var ims = new OpenLayers.Layer.ArcGIS93Rest( | |
175 | + "ESRI Imagery World 2D", | |
176 | + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export", | |
177 | + {format:"jpeg"}, | |
178 | + {isBaseLayer:true,visibility:false} | |
179 | + ); | |
180 | + var wsm = new OpenLayers.Layer.ArcGIS93Rest( | |
181 | + "ESRI World Street Map", | |
182 | + "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export", | |
183 | + {format:"jpeg"}, | |
184 | + {isBaseLayer:true,visibility:false} | |
185 | + ); | |
186 | + var bra = new OpenLayers.Layer.WMS( | |
187 | + "Base carto MMA", | |
188 | + "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map", | |
189 | + {layers:"baseraster",srs:"EPSG:4618",format:"image/png",isBaseLayer:false}, | |
190 | + {isBaseLayer:true,visibility:false} | |
191 | + ); | |
192 | + i3GEO.Interface.openlayers.LAYERSADICIONAIS = [oce,ims,wsm,bra]; | |
193 | +})(); | |
194 | +i3GEO.finaliza = function(){ | |
195 | + if($i("i3GEOlogoMarca")) | |
196 | + {$i("i3GEOlogoMarca").style.display = "none";} | |
197 | + i3GEO.mapa.insereDobraPagina("googlemaps","../imagens/dobragooglemaps.png"); | |
198 | +}; | |
199 | +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true; | |
200 | +i3GEO.inicia(); | |
178 | 201 | </script> |
179 | 202 | </body> |
180 | 203 | </html> |
181 | 204 | \ No newline at end of file | ... | ... |
exemplos/openlayers5.htm
... | ... | @@ -31,7 +31,7 @@ |
31 | 31 | </table> |
32 | 32 | </td> |
33 | 33 | <td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)"> |
34 | - <div id="menus" ></div> | |
34 | + <div id="menus" ></div> | |
35 | 35 | </td> |
36 | 36 | </tr> |
37 | 37 | <tr> |
... | ... | @@ -84,7 +84,7 @@ |
84 | 84 | background-image:url(../mashups/openlayers.png); |
85 | 85 | background-repeat:no-repeat; |
86 | 86 | float:right; |
87 | - right: 0px; | |
87 | + right: 0px; | |
88 | 88 | height:29px; |
89 | 89 | margin:2px; |
90 | 90 | width:29px; |
... | ... | @@ -97,6 +97,7 @@ var g_localimg = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo/image |
97 | 97 | // |
98 | 98 | //muda a extensão máxima |
99 | 99 | // |
100 | +i3GEO.configura.mashuppar = "&mapext=-63.712484 -20.765721 -42.385294 -9.136698"; | |
100 | 101 | i3GEO.Interface.openlayers.MAXEXTENT = [-63.712484, -20.765721, -42.385294, -9.136698]; |
101 | 102 | |
102 | 103 | i3GEO.Interface.openlayers.TILES = true; |
... | ... | @@ -108,7 +109,7 @@ i3GEO.Interface.openlayers.GADGETS = { |
108 | 109 | PanZoom:false, |
109 | 110 | LayerSwitcher:false, |
110 | 111 | ScaleLine:true, |
111 | - OverviewMap:false | |
112 | + OverviewMap:false | |
112 | 113 | }; |
113 | 114 | i3GEO.cria(); |
114 | 115 | i3GEO.configura.mapaRefDisplay = "none"; |
... | ... | @@ -128,31 +129,26 @@ i3GEO.Interface.ATIVAMENUCONTEXTO = true |
128 | 129 | i3GEO.arvoreDeTemas.TIPOBOTAO = "radio"; |
129 | 130 | i3GEO.arvoreDeTemas.ATIVATEMAIMEDIATO = true |
130 | 131 | OpenLayers.ImgPath = "../pacotes/openlayers/img/" |
131 | -var ims = new OpenLayers.Layer.ArcGIS93Rest( | |
132 | +var ims = new OpenLayers.Layer.ArcGIS93Rest( | |
132 | 133 | "ESRI Imagery World 2D", |
133 | 134 | "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export", |
134 | 135 | {}, |
135 | 136 | {isBaseLayer:true,visibility:false} |
136 | 137 | ); |
137 | -var wsm = new OpenLayers.Layer.ArcGIS93Rest( | |
138 | +var wsm = new OpenLayers.Layer.ArcGIS93Rest( | |
138 | 139 | "ESRI World Street Map", |
139 | 140 | "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export", |
140 | 141 | {}, |
141 | 142 | {isBaseLayer:true,visibility:false} |
142 | 143 | ); |
143 | -var bra = new OpenLayers.Layer.WMS( | |
144 | +var bra = new OpenLayers.Layer.WMS( | |
144 | 145 | "Base carto MMA", |
145 | 146 | "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map", |
146 | 147 | {layers:"baseraster",srs:"EPSG:4618",format:"image/png",isBaseLayer:false}, |
147 | 148 | {isBaseLayer:true,visibility:false} |
148 | 149 | ); |
149 | -var osm = new OpenLayers.Layer.WMS( | |
150 | - "Open Street Map", | |
151 | - "http://data1.vizure.net/server/services/request.php?jname=/wms", | |
152 | - {}, | |
153 | - {isBaseLayer:true,visibility:false} | |
154 | -); | |
155 | -i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ims,wsm,bra,osm]; | |
150 | + | |
151 | +i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ims,wsm,bra]; | |
156 | 152 | i3GEO.inicia(); |
157 | 153 | </script> |
158 | 154 | </body> | ... | ... |