Commit a4921cb3411d56e01a9df412aef4276cd0795b1a
1 parent
6050cc76
Exists in
master
and in
7 other branches
Criação de exemplo para inclusão de controle Openlayers
Showing
1 changed file
with
262 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,262 @@ | @@ -0,0 +1,262 @@ | ||
| 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 | +<title>i3GEO - OpenLayers</title> | ||
| 7 | + | ||
| 8 | +<script src="../classesjs/i3geo.js"></script> | ||
| 9 | +<script src="../pacotes/openlayers/OpenLayers2131.js.php"></script> | ||
| 10 | +<link rel="stylesheet" type="text/css" href="../css/black.css"> | ||
| 11 | + | ||
| 12 | +</head> | ||
| 13 | +<body id="i3geo" style='margin-left: 7px; background: white;'> | ||
| 14 | + <!-- inclui o nome do usuario logado --> | ||
| 15 | + <div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div> | ||
| 16 | + <table id='mst' summary="" style='display: none;' width=100% cellspacing='0'> | ||
| 17 | + <tr> | ||
| 18 | + <td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)"> | ||
| 19 | + <!--menu suspenso--> | ||
| 20 | + <div id="menus" style="height: 0px;"></div> | ||
| 21 | + </td> | ||
| 22 | + </tr> | ||
| 23 | + <tr> | ||
| 24 | + <td style="vertical-align: top; border-width: 0px;"> | ||
| 25 | + <table width="100%" style="vertical-align: top; border-width: 0px"> | ||
| 26 | + <tr> | ||
| 27 | + <td class=verdeclaro id=contemImg> | ||
| 28 | + <div id=corpoMapa style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div> | ||
| 29 | + </td> | ||
| 30 | + </tr> | ||
| 31 | + </table> | ||
| 32 | + </td> | ||
| 33 | + </tr> | ||
| 34 | + <tr> | ||
| 35 | + <td> | ||
| 36 | + <div style="background: black; height: 10px;"> </div> | ||
| 37 | + </td> | ||
| 38 | + </tr> | ||
| 39 | + </table> | ||
| 40 | + <table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'> | ||
| 41 | + <tr> | ||
| 42 | + <td style="height: 30px"><div id=versaoi3geo></div> | ||
| 43 | + <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</h2> | ||
| 44 | + <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></td> | ||
| 45 | + </tr> | ||
| 46 | + <tr> | ||
| 47 | + <td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td> | ||
| 48 | + </tr> | ||
| 49 | + <tr> | ||
| 50 | + <td></td> | ||
| 51 | + </tr> | ||
| 52 | + </table> | ||
| 53 | + | ||
| 54 | + <div id="i3GEOguiaMovel" style="visibility: hidden; position: absolute; display: block; border: 0px solid white; text-align: left; z-index: 2000; background-color: none"> | ||
| 55 | + <div style="cursor: pointer; position: absolute; top: 50%; margin-top: -65px; width: 30px; z-index: 5000; left: 18px;"> | ||
| 56 | + <img src='../imagens/openbars1.png' style="width: 48px; position: absolute; left: -16px; height: 412px; top: -160px;"> | ||
| 57 | + <div id="iconeGuia_temas"></div> | ||
| 58 | + <div id="iconeGuia_adiciona" style="margin-top: 3px;"></div> | ||
| 59 | + <div id="iconeGuia_legenda" style="margin-top: 3px;"></div> | ||
| 60 | + </div> | ||
| 61 | + | ||
| 62 | + <!-- | ||
| 63 | + <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' > | ||
| 64 | + --> | ||
| 65 | + <div id="i3GEOguiaMovelMolde" style="top: 0px; box-shadow: 0 2px 10px 0 #888888; border-radius: 5px 0px 0px 5px; position: absolute; display: none; border: 0px solid white; text-align: left; z-index: 1000; background-color: gray"> | ||
| 66 | + <!-- | ||
| 67 | + <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> | ||
| 68 | + --> | ||
| 69 | + <div id="i3GEOguiaMovelConteudo" style='top: 10px; overflow: auto; display: none; position: absolute; border-color: gray; border-width: 0px 0 0px 0px; left: 0px; height: 0px; background-color: white'> | ||
| 70 | + <div id='guia1obj' style='display: none;'> | ||
| 71 | + <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico --> | ||
| 72 | + <div style='left: 5px; top: 10px;' id=buscaRapida></div> | ||
| 73 | + <!-- Esta div acrescenta a lista de propriedades do mapa --> | ||
| 74 | + <div id=listaPropriedades style='top: 15px;'></div> | ||
| 75 | + <!-- 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 --> | ||
| 76 | + <div id=listaLayersBase style='top: 15px;'></div> | ||
| 77 | + <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual --> | ||
| 78 | + <div id=listaTemas style='top: 15px;'></div> | ||
| 79 | + </div> | ||
| 80 | + <div id='guia2obj' style='display: none;'> | ||
| 81 | + Aguarde... | ||
| 82 | + <img alt="" src="../imagens/branco.gif" width=248 /> | ||
| 83 | + </div> | ||
| 84 | + <div id='guia4obj' style='display: none; text-align: left'> | ||
| 85 | + <div id='legenda' style='text-align: left'></div> | ||
| 86 | + </div> | ||
| 87 | + <!-- | ||
| 88 | + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div> | ||
| 89 | + --> | ||
| 90 | + </div> | ||
| 91 | + </div> | ||
| 92 | + </div> | ||
| 93 | +<style> | ||
| 94 | +.olControlEditingToolbar1 div { | ||
| 95 | + background-image: url(../mashups/openlayers.png); | ||
| 96 | + background-repeat: no-repeat; | ||
| 97 | + float: right; | ||
| 98 | + right: 0px; | ||
| 99 | + height: 29px; | ||
| 100 | + margin: 2px; | ||
| 101 | + width: 29px; | ||
| 102 | + cursor: pointer; | ||
| 103 | + top: 10px; | ||
| 104 | +} | ||
| 105 | +div .olControlMousePosition{ | ||
| 106 | + right: 40px; | ||
| 107 | + font-size: 12px; | ||
| 108 | +} | ||
| 109 | +</style> | ||
| 110 | + <script> | ||
| 111 | + i3GEO.configura.locaplic = i3GEO.util.protocolo() | ||
| 112 | + + "://" | ||
| 113 | + + window.location.host | ||
| 114 | + + "/i3geo"; | ||
| 115 | + | ||
| 116 | + //adiciona um controle especifico via API do openlayers | ||
| 117 | + i3GEO.Interface.openlayers.parametrosMap.controls.push(new OpenLayers.Control.MousePosition({ | ||
| 118 | + formatOutput: function(lonLat) { | ||
| 119 | + var markup = i3GEO.calculo.dd2dms(lonLat.lon,lonLat.lat); | ||
| 120 | + return markup; | ||
| 121 | + } | ||
| 122 | + })); | ||
| 123 | + | ||
| 124 | + i3GEO.configura.autotamanho = false; | ||
| 125 | + i3GEO.Interface.ATUAL = "openlayers"; | ||
| 126 | + i3GEO.Interface.IDCORPO = "contemImg"; | ||
| 127 | + i3GEO.Interface.openlayers.TILES = true; | ||
| 128 | + i3GEO.configura.oMenuData.submenus["interface"] = [ | ||
| 129 | + { | ||
| 130 | + id : "omenudataInterface0a", | ||
| 131 | + text : '<span style=color:gray;text-decoration:underline; ><b>' | ||
| 132 | + + $trad("d27") | ||
| 133 | + + '</b></span>', | ||
| 134 | + url : "#" | ||
| 135 | + }, { | ||
| 136 | + id : "omenudataInterface2", | ||
| 137 | + text : "OpenLayers", | ||
| 138 | + url : "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" | ||
| 139 | + }, { | ||
| 140 | + id : "omenudataInterface2a", | ||
| 141 | + text : "OpenLayers OSM", | ||
| 142 | + url : "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" | ||
| 143 | + }, { | ||
| 144 | + id : "omenudataInterface4", | ||
| 145 | + text : "Google Maps", | ||
| 146 | + url : "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" | ||
| 147 | + }, { | ||
| 148 | + id : "omenudataInterface5", | ||
| 149 | + text : "Google Earth", | ||
| 150 | + url : "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" | ||
| 151 | + }, { | ||
| 152 | + id : "omenudataInterface0b", | ||
| 153 | + text : '<span style=color:gray;text-decoration:underline; ><b>' | ||
| 154 | + + $trad("u27") | ||
| 155 | + + '</b></span>', | ||
| 156 | + url : "#" | ||
| 157 | + }, { | ||
| 158 | + id : "omenudataInterface6", | ||
| 159 | + text : $trad("u21"), | ||
| 160 | + url : "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" | ||
| 161 | + }, { | ||
| 162 | + id : "omenudataInterface7", | ||
| 163 | + text : "Serviços WMS", | ||
| 164 | + url : "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" | ||
| 165 | + }, { | ||
| 166 | + id : "omenudataInterface9", | ||
| 167 | + text : "Download de dados", | ||
| 168 | + url : "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" | ||
| 169 | + }, { | ||
| 170 | + id : "omenudataInterface11", | ||
| 171 | + text : $trad("p20"), | ||
| 172 | + url : "javascript:i3GEO.mapa.dialogo.telaRemota()" | ||
| 173 | + } | ||
| 174 | + ]; | ||
| 175 | + | ||
| 176 | + i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}'; | ||
| 177 | + | ||
| 178 | + i3GEO.cria(); | ||
| 179 | + i3GEO.configura.mapaRefDisplay = "none"; | ||
| 180 | + i3GEO.barraDeBotoes.TIPO = "olhodepeixe"; | ||
| 181 | + //ajusta o deslocamento da barra de botoes | ||
| 182 | + i3GEO.barraDeBotoes.OFFSET = 25; | ||
| 183 | + //ajusta a posicao da barra de botoes no IE | ||
| 184 | + if (navm) { | ||
| 185 | + i3GEO.barraDeBotoes.OFFSET = 25; | ||
| 186 | + } | ||
| 187 | + if (chro) { | ||
| 188 | + i3GEO.barraDeBotoes.OFFSET = 30; | ||
| 189 | + } | ||
| 190 | + | ||
| 191 | + i3GEO.configura.oMenuData["submenus"]["janelas"] = []; | ||
| 192 | + i3GEO.ajuda.ATIVAJANELA = false; | ||
| 193 | + i3GEO.idioma.IDSELETOR = "seletorIdiomas"; | ||
| 194 | + i3GEO.Interface.ATIVAMENUCONTEXTO = false; | ||
| 195 | + //i3GEO.arvoreDeTemas.TIPOBOTAO = "radio"; | ||
| 196 | + i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true; | ||
| 197 | + i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true; | ||
| 198 | + i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false; | ||
| 199 | + i3GEO.mapa.AUTORESIZE = true; | ||
| 200 | + i3GEO.guias.TIPO = "movel"; | ||
| 201 | + i3GEO.guias.guiaMovel.config.topGuiaMovel = 36; | ||
| 202 | + i3GEO.janela.ativaAlerta(); | ||
| 203 | + i3GEO.finaliza = function() { | ||
| 204 | + if ($i("i3GEOlogoMarca")) { | ||
| 205 | + $i("i3GEOlogoMarca").style.display = "none"; | ||
| 206 | + } | ||
| 207 | + i3GEO.mapa.insereDobraPagina( | ||
| 208 | + "googlemaps", | ||
| 209 | + "../imagens/dobragooglemaps.png"); | ||
| 210 | + }; | ||
| 211 | + //indica se a opcao de navegacao nas pastas do servidor sera ativada | ||
| 212 | + i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true; | ||
| 213 | + i3GEO.janela.TRANSICAOSUAVE = true; | ||
| 214 | + | ||
| 215 | + OpenLayers.ImgPath = "../pacotes/openlayers/img/"; | ||
| 216 | + (function() { | ||
| 217 | + var oce = new OpenLayers.Layer.ArcGIS93Rest("ESRI Ocean Basemap", "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/export", { | ||
| 218 | + format : "jpeg" | ||
| 219 | + }, { | ||
| 220 | + isBaseLayer : true, | ||
| 221 | + visibility : false | ||
| 222 | + }); | ||
| 223 | + var ims = new OpenLayers.Layer.ArcGIS93Rest("ESRI Imagery World 2D", "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer/export", { | ||
| 224 | + format : "jpeg" | ||
| 225 | + }, { | ||
| 226 | + isBaseLayer : true, | ||
| 227 | + visibility : false | ||
| 228 | + }); | ||
| 229 | + var wsm = new OpenLayers.Layer.ArcGIS93Rest("ESRI World Street Map", "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export", { | ||
| 230 | + format : "jpeg" | ||
| 231 | + }, { | ||
| 232 | + isBaseLayer : true, | ||
| 233 | + visibility : false | ||
| 234 | + }); | ||
| 235 | + var bra = new OpenLayers.Layer.WMS("Base carto MMA", "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map", { | ||
| 236 | + layers : "baseraster", | ||
| 237 | + srs : "EPSG:4618", | ||
| 238 | + format : "image/png", | ||
| 239 | + isBaseLayer : false | ||
| 240 | + }, { | ||
| 241 | + isBaseLayer : true, | ||
| 242 | + visibility : false | ||
| 243 | + }); | ||
| 244 | + | ||
| 245 | + var tms = new OpenLayers.Layer.TMS("OSGEO", "http://tilecache.osgeo.org/wms-c/Basic.py/", { | ||
| 246 | + layername : "basic", | ||
| 247 | + type : "png", | ||
| 248 | + // set if different than the bottom left of map.maxExtent | ||
| 249 | + tileOrigin : new OpenLayers.LonLat(-180, -90), | ||
| 250 | + isBaseLayer : true, | ||
| 251 | + visibility : false | ||
| 252 | + }); | ||
| 253 | + | ||
| 254 | + i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ | ||
| 255 | + oce, ims, wsm, tms, bra | ||
| 256 | + ]; | ||
| 257 | + })(); | ||
| 258 | + | ||
| 259 | + i3GEO.inicia(); | ||
| 260 | + </script> | ||
| 261 | +</body> | ||
| 262 | +</html> |