Download as
Browse Code »

Commit 9b83a02d5ad86ffea85657d57da7ccd87be4336d

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

Atualização da interface de mapa interativo do editor de mapfiles

Showing 4 changed files with 120 additions and 59 deletions   Show diff stats
admin/admin.db
View file @9b83a02
No preview for this file type
admin1/black_editor.php
  Diff comments   View file @9b83a02
... ... @@ -29,7 +29,9 @@
29 29 background: none;
30 30 margin-bottom: 15px;
31 31 }
32   -
  32 +.foraDoMapa + span > span {
  33 + background-color: yellow;
  34 +}
33 35 </style>
34 36 </head>
35 37 <!-- As palavras entre {{{}}} sao utilizadas para a traducao. Veja i3geo/js/dicionario.js
... ... @@ -40,7 +42,9 @@
40 42 <div id="i3GEONomeLogin"
41 43 style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
42 44 -->
43   - <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps -->
  45 + <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
  46 + Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
  47 + -->
44 48 <div id="mapai3Geo" >
45 49 </div>
46 50 <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
... ... @@ -49,13 +53,13 @@
49 53 </form>
50 54  
51 55 <!-- aqui sera incluido o gadget que mostra a coordenada geografica da posicao do mouse -->
52   - <div class="localizarxy fundoRodape hidden-xs hidden-sm">
  56 + <div class="localizarxy fundoRodape hidden-xs hidden-sm" >
53 57 <div class="i3GeoMascaraCoord" style="display: block;">
54 58 <select onchange="javascript:i3GEO.coordenadas.mudaTipo(this,'localizarxy');" class="i3geoCoordenadasComboTipo">
55 59 <option>DMS:</option>
56 60 <option value="janela">janela</option>
57 61 <option value="geoProj">DMS</option>
58   - <option value="dd">Déc. de grau</option>
  62 + <option value="dd">Dec. de grau</option>
59 63 <option value="geohash">GeoHash</option>
60 64 <option value="policonicaSad69">Polic SAD-69</option>
61 65 <option value="utmSad69Proj">UTM Sad-69</option>
... ... @@ -96,27 +100,26 @@
96 100 Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
97 101 </div>
98 102 </div>
99   -
100   - <!-- barra de ícones de navegacao -->
101   - <div class="ol-i3GEOcontrols ol-control">
102   - <button onclick="i3GEO.Interface.zoom2ext(i3GEO.parametros.extentTotal)" style="float: left;">
  103 + <!-- barra de icones de navegacao -->
  104 + <div class="ol-i3GEOcontrols ol-control" data-traduzir="true">
  105 + <button title="{{{d2t}}}" onclick="i3GEO.Interface.zoom2ext(i3GEO.parametros.extentTotal)" style="float: left;">
103 106 <img style="width:20px;" src="../imagens/gisicons/projection.png">
104 107 </button>
105 108 <button onclick="i3GEO.Interface.zoomli()" style="float: left;">
106 109 <img style="width:20px;" src="../imagens/gisicons/zoom-region.png">
107 110 </button>
108 111 <br>
109   - <button onclick="i3GEO.navega.extensaoAnterior()" style="float: left;">
  112 + <button title="{{{volta}}}" onclick="i3GEO.navega.extensaoAnterior()" style="float: left;">
110 113 <img style="width:16px;" src="../imagens/oxygen/16x16/draw-triangle1.png">
111 114 </button>
112   - <button onclick="i3GEO.navega.extensaoProximo()" style="float: left;">
  115 + <button title="{{{avanca}}}" onclick="i3GEO.navega.extensaoProximo()" style="float: left;">
113 116 <img style="width:16px;" src="../imagens/oxygen/16x16/draw-triangle2.png">
114 117 </button>
115 118 <br>
116   - <button data-template="templates/ferramentasLink.html" onclick="i3GEO.marcador.inicia(this)" style="float: left;">
  119 + <button title="{{{x79}}}" data-template="../interface/templates/ferramentasLink.html" onclick="i3GEO.marcador.inicia(this)" style="float: left;">
117 120 <img style="width:20px;" src="../imagens/gisicons/save1.png">
118 121 </button>
119   - <button onclick="i3GEO.maparef.inicia()" style="float: left;">
  122 + <button title="{{{d9}}}" onclick="i3GEO.maparef.inicia()" style="float: left;">
120 123 <img style="width:20px;" src="../imagens/gisicons/map-reference.png">
121 124 </button>
122 125 </div>
... ... @@ -144,7 +147,7 @@
144 147 data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
145 148 -->
146 149 <div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
147   - <button title="{{{u15a}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  150 + <button title="{{{u15a}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
148 151 <img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
149 152 </button>
150 153 </div>
... ... @@ -156,7 +159,7 @@
156 159 do metadata existente na camada. Deixe vazio para nao ativar a operacao.
157 160 -->
158 161 <div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
159   - <button title="{{{g4a}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  162 + <button title="{{{g4a}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
160 163 <img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
161 164 </button>
162 165 </div>
... ... @@ -170,34 +173,34 @@
170 173 i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
171 174 -->
172 175 <div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
173   - <button title="{{{g1a}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  176 + <button title="{{{g1a}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
174 177 <img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
175 178 </button>
176 179 </div>
177 180 <!-- legenda -->
178 181 <div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
179   - <button title="{{{g3}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  182 + <button title="{{{g3}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
180 183 <img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
181 184 </button>
182 185 </div>
183 186 <div onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
184   - <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  187 + <button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
185 188 <img src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
186 189 </button>
187 190 </div>
188 191 <!-- Busca -->
189 192 <div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
190   - <button class="iconeGuiaMovel" style="box-shadow: none;">
  193 + <button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
191 194 <img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
192 195 </button>
193 196 </div>
194 197 <div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
195   - <button title="{{{d7a}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  198 + <button title="{{{d7a}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
196 199 <img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
197 200 </button>
198 201 </div>
199 202 <div onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
200   - <button title="{{{d7}}}" class="iconeGuiaMovel" style="box-shadow: none;">
  203 + <button title="{{{d7}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
201 204 <img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
202 205 </button>
203 206 </div>
... ... @@ -210,9 +213,9 @@
210 213 <!-- camadas existentes no mapa -->
211 214 <div id='guia1obj' data-traduzir="true" style='display: none;'>
212 215 <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{g4a}}}</span>X</div>
213   - <div class="btn-group noprint" >
214   - <a href="javascript:void(0)" class="btn btn-default btn-raised" style="width: 250px;">{{{opcoes}}}</a>
215   - <a href="javascript:void(0)" data-target="#" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown">
  216 + <div class="noprint" >
  217 + <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
  218 + {{{opcoes}}}
216 219 <span class="caret"></span>
217 220 </a>
218 221 <ul class="dropdown-menu">
... ... @@ -228,7 +231,7 @@
228 231 </ul>
229 232 </div>
230 233 <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
231   - <div id="listaTemas" style="overflow:none;" data-template="templates/camada.html"></div>
  234 + <div id="listaTemas" style="overflow:none;" data-template="../interface/templates/camada.html"></div>
232 235 <!-- Esta div acrescenta a lista de de camadas de fundo
233 236 A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
234 237 Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
... ... @@ -241,7 +244,7 @@
241 244 </a>
242 245 <div style="margin-left:0px;" class="collapse text-left" id="collapseFundo">
243 246 <form>
244   - <div id="listaFundo" class="form-group" data-template="templates/camadaFundo.html"></div>
  247 + <div id="listaFundo" class="form-group" data-template="../interface/templates/camadaFundo.html"></div>
245 248 </form>
246 249 </div>
247 250 </div>
... ... @@ -250,13 +253,13 @@
250 253 <div id='guia2obj' data-traduzir="true" style='display: none; text-align:left;'>
251 254 <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();"><span class="pull-left">{{{g1a}}}</span> X</div>
252 255 <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
253   - <div id="catalogoMigalha" data-template="templates/catalogoMigalha.html"></div>
  256 + <div id="catalogoMigalha" data-template="../interface/templates/catalogoMigalha.html"></div>
254 257 <div id="catalogoNavegacao"></div>
255 258 <!-- Opcoes -->
256 259 <div id="catalogoPrincipal">
257   - <div class="btn-group noprint" >
258   - <a href="javascript:void(0)" class="btn btn-default btn-raised" style="width: 250px;">{{{opcoes}}}</a>
259   - <a href="javascript:void(0)" data-target="#" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown">
  260 + <div class="noprint" >
  261 + <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
  262 + {{{opcoes}}}
260 263 <span class="caret"></span>
261 264 </a>
262 265 <ul class="dropdown-menu">
... ... @@ -286,7 +289,7 @@
286 289 <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
287 290 </li>
288 291 <li>
289   - <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatísticos</a>
  292 + <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>
290 293 </li>
291 294 <li><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
292 295 </li>
... ... @@ -311,7 +314,7 @@
311 314 "idCatalogoNavegacao": "catalogoNavegacao",
312 315 "idOndeMigalha": "catalogoMigalha"
313 316 -->
314   - <div id="catalogoMenus" data-templateDir="templates/dir.html" data-templateTema="templates/tema.html"></div>
  317 + <div id="catalogoMenus" data-templateDir="../interface/templates/dir.html" data-templateTema="../interface/templates/tema.html"></div>
315 318  
316 319 <div id="arvoreAdicionaTema"></div>
317 320  
... ... @@ -408,7 +411,8 @@
408 411 <!-- Legenda -->
409 412 <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left'>
410 413 <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{g3}}}</span>X</div>
411   - <div id="legendaHtml" data-template="templates/legenda.html" data-size="35,25" style='display: block; text-align: left'></div>
  414 + <a href='javascript:void(0)' onclick="i3GEO.legenda.janela()" class='btn btn-primary btn-sm btn-raised'>{{{x11}}}</a>
  415 + <div id="legendaHtml" data-template="../interface/templates/legenda.html" data-size="35,25" style='display: block; text-align: left'></div>
412 416 </div>
413 417 <!-- busca
414 418 Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
... ... @@ -424,13 +428,13 @@
424 428 <input class="form-control" type="text" value="" name="valorBuscaRapida">
425 429 <span class="input-group-btn">
426 430 <a onclick="i3GEO.busca.inicia(this);return false;"
427   - data-templateGoogle="templates/buscaEmTemas.html"
  431 + data-templateGoogle="../interface/templates/buscaEmTemas.html"
428 432 data-inputGoogle="[name=google]"
429 433 data-ondeGoogle=".i3GEOresultadoBuscaGoogle"
430   - data-templateTemasMapa="templates/buscaEmTemas.html"
  434 + data-templateTemasMapa="../interface/templates/buscaEmTemas.html"
431 435 data-inputTemasMapa="[name=temasMapa]"
432 436 data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa"
433   - data-templateServico="templates/buscaEmServico.html"
  437 + data-templateServico="../interface/templates/buscaEmServico.html"
434 438 data-ondeConteiner="#guia7obj"
435 439 data-inputOndePalavra="[name=valorBuscaRapida]"
436 440 data-inputServicosExternos="[name=servicosExternos]"
... ... @@ -481,13 +485,13 @@
481 485 <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{u15a}}}</span> X</div>
482 486 <div class="form-inline" style="width:100%;">
483 487 <div class="text-center form-group" style="margin:4px;">
484   - <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.medeArea.inicia();" role="button" class="btn btn-success btn-fab btn-fab-mini" href="javascript:void(0)">
  488 + <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-mini" href="javascript:void(0)">
485 489 <img style="margin-top:4px;" src="../imagens/gisicons/area-measure.png">
486 490 </a>
487 491 <h6>{{{d21at}}}</h6>
488 492 </div>
489 493 <div class="text-center form-group" style="margin:4px;">
490   - <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.medeDistancia.inicia();" role="button" class="btn btn-success btn-fab btn-fab-mini" href="javascript:void(0)">
  494 + <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-mini" href="javascript:void(0)">
491 495 <img style="margin-top:4px;" src="../imagens/gisicons/length-measure.png">
492 496 </a>
493 497 <h6>{{{d21t}}}</h6>
... ... @@ -507,22 +511,19 @@
507 511 </div>
508 512 <div class="clearfix"></div>
509 513 <hr>
510   - <div id="migalhaFerramentas" data-template="templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
511   - <div id="listaFerramentasLinks" data-template="templates/ferramentasLink.html" style='display: block; text-align: left'></div>
512   - <div id="listaFerramentas" data-template="templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
  514 + <div id="migalhaFerramentas" data-template="../interface/templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
  515 + <div id="listaFerramentasLinks" data-template="../interface/templates/ferramentasLink.html" style='display: block; text-align: left'></div>
  516 + <div id="listaFerramentas" data-template="../interface/templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
513 517 </div>
514 518 </div>
515 519 </div>
516 520 </div>
517   - <!-- templates -->
518   -
519   - <!-- para mostrar o banner de abertura, basta ter esse ID -->
  521 + <!-- para mostrar o banner de abertura -->
520 522 <script id="i3GEOlogoMarcaTemplate" type="x-tmpl-mustache">
521 523 <div>
522 524 <table>
523 525 <tr>
524 526 <td>
525   - <div id=versaoi3geo></div>
526 527 <h4 >i3Geo - Software livre para cria&ccedil;&atilde;o de mapas
527 528 interativos e geoprocessamento</h4>
528 529 <h4 >Baseado no Mapserver, &eacute; licenciado sob GPL e integra o
... ... @@ -537,23 +538,83 @@
537 538 </div>
538 539 </script>
539 540 <script>
540   - i3GEO.finaliza = function() {
541   - i3GEO.mapa.ativaTema("<?php echo strip_tags($_GET["temaEdicao"]); ?>");
542   - i3GEO.mapa.dialogo.atalhosedicao();
543   - };
544   - var parametrosMapa = {
545   - layers: {
546   - add: ["<?php echo strip_tags($_GET["temaEdicao"]); ?>"],
547   - on: ["<?php echo strip_tags($_GET["temaEdicao"]); ?>"],
548   - off: []
  541 + //ativa o banner de inicializacao
  542 + i3GEO.janela.tempoMsg($i("i3GEOlogoMarcaTemplate").innerHTML,4000);
  543 + (function() {
  544 + var parametrosMapa = {
  545 + layers: {
  546 + add: ["<?php echo strip_tags($_GET["temaEdicao"]); ?>"],
  547 + on: ["<?php echo strip_tags($_GET["temaEdicao"]); ?>"],
  548 + off: []
  549 + }
  550 + };
  551 + var config = {
  552 + //id do elemento HTML onde o corpo do mapa sera renderizado
  553 + mapBody : "mapai3Geo",
  554 + //tipo de mapa. Pode ser:
  555 + //OL - utiliza o OpenLayers e coordenadas geograficas
  556 + //OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
  557 + //GM - utiliza o GoogleMaps como motor de controle do mapa
  558 + mapType : "OL",
  559 + //armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
  560 + saveExtension : true,
  561 + //aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
  562 + posRenderType : "",
  563 + //Altura e largura do tooltip (balao identifica)
  564 + toolTipSize : ["100px","200px"],
  565 + //Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
  566 + //Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
  567 + i3GeoServer : "",
  568 + //Funcao que sera executada apos a inicializacao do mapa
  569 + afterStart : function(){
  570 + i3GEO.mapa.ativaTema("<?php echo strip_tags($_GET["temaEdicao"]); ?>");
  571 + i3GEO.mapa.dialogo.atalhosedicao();
549 572 },
  573 + //configuracoes especificas para a interface que utiliza o OpenLayers
  574 + openLayers : {
  575 + //utiliza ou nao tiles ao renderizar as camadas do mapa
  576 + //a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
  577 + singleTile : false,
  578 + //opcoes de inicializacao do mapa conforme definido na API do OpenLayers
  579 + MapOptions : {
  580 + layers : [],
  581 + controls : [
  582 + new ol.control.Zoom(),
  583 + new ol.control.ZoomSlider(),
  584 + new ol.control.ScaleLine(),
  585 + new ol.control.Attribution({
  586 + collapsible: false
  587 + })
  588 + ],
  589 + loadTilesWhileAnimating : true,
  590 + loadTilesWhileInteracting : true,
  591 + //os objetos devem ser comentados na interface googleMaps
  592 + interactions : [
  593 + new ol.interaction.DoubleClickZoom(),
  594 + new ol.interaction.KeyboardPan(),
  595 + new ol.interaction.KeyboardZoom(),
  596 + new ol.interaction.MouseWheelZoom(),
  597 + new ol.interaction.PinchRotate(),
  598 + new ol.interaction.PinchZoom(),
  599 + new ol.interaction.DragZoom(),
  600 + new ol.interaction.DragPan()
  601 + ]
  602 + },
  603 + //opcoes para o objeto view, que e uma instancia de MapOptions
  604 + ViewOptions : {
  605 +
  606 + }
  607 + }
550 608 };
551   - //inicia o mapa
552   - //Veja tambem config.php
553   - //
554   - //o primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes
555   - //
556   - i3GEO.init(parametrosMapa);
  609 + //
  610 + //inicia o mapa
  611 + //Veja tambem config.php
  612 + //
  613 + //O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
  614 + //O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
  615 + //
  616 + i3GEO.init(parametrosMapa,config);
  617 + })();
557 618 </script>
558 619 </body>
559 620  
... ...
css/i3geo7.css.php 100644 → 100755
  Diff comments   View file @9b83a02
js/i3geo_tudo_compacto7.js.php 100644 → 100755
  Diff comments   View file @9b83a02