Commit b43b96bc6d77f7dbec42e2be9cd132244d0bcb4d

Authored by Edmar Moretti
1 parent b3bac571

implementação do plugin para mapa de cluster no openlayers

admin/admin.db
No preview for this file type
classesjs/classe_plugini3geo.js
1 1 /**
2 2 * Title: PluginI3Geo
3   - *
  3 + *
4 4 * i3GEO.pluginI3geo
5   - *
  5 + *
6 6 * Implementa os plugins do i3Geo que adicionam camadas especiais ao mapa, normalmente dados vetoriais processados no navegador Web.
7   - *
  7 + *
8 8 * Arquivo:
9   - *
  9 + *
10 10 * i3geo/classesjs/classe_plugini3geo.js
11   - *
  11 + *
12 12 * Licença:
13   - *
  13 + *
14 14 * GPL2
15   - *
  15 + *
16 16 * i3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet
17   - *
  17 + *
18 18 * Direitos Autorais Reservados (c) 2006 Ministério do Meio Ambiente Brasil Desenvolvedor: Edmar Moretti edmar.moretti@gmail.com
19   - *
  19 + *
20 20 * Este programa é software livre; você pode redistribuí-lo e/ou modificá-lo sob os termos da Licença
21 21 * Pública Geral GNU conforme publicada pela Free Software Foundation;
22   - *
  22 + *
23 23 * Este programa é distribuído na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a
24 24 * garantia implícita de COMERCIABILIDADE OU ADEQUACÃO A UMA FINALIDADE ESPECÍFICA. Consulte a Licença
25 25 * Pública Geral do GNU para mais detalhes. Você deve ter recebido uma cópia da Licença Pública Geral do
... ... @@ -34,7 +34,7 @@ i3GEO.pluginI3geo =
34 34 OBJETOS : {},
35 35 /**
36 36 * Lista de plugins
37   - *
  37 + *
38 38 * Utilizado no editor de mapfiles do sistema de administracao
39 39 */
40 40 PLUGINS : [
... ... @@ -51,11 +51,11 @@ i3GEO.pluginI3geo =
51 51 ],
52 52 /**
53 53 * Inicia a execucao de um plugin
54   - *
  54 + *
55 55 * Camada e um objeto gerado pelo i3Geo quando uma camada e adicionada ao mapa O objeto i3GEO.arvoreDeCamadas.CAMADAS guarda todas
56 56 * as camadas adicionadas ao mapa Ao adicionar uma camada pelo catalogo, o i3Geo verifica se a camada possui plugin e direciona para
57 57 * ca Os plugins sao definidos como metadados em cada mapfile de cada tema
58   - *
  58 + *
59 59 * Veja em i3geo/classesphp/classe_mapa.php funcao parametrostemas
60 60 */
61 61 inicia : function(camada) {
... ... @@ -116,7 +116,7 @@ i3GEO.pluginI3geo =
116 116 },
117 117 /**
118 118 * Aplica as propriedades em um objeto do tipo tema
119   - *
  119 + *
120 120 * tema e fornecido por i3GEO.arvoreDeCamadas o ajuste das propriedades e necessario para que as propriedades aparecam de forma
121 121 * correta na arvore de camadas
122 122 */
... ... @@ -128,29 +128,29 @@ i3GEO.pluginI3geo =
128 128 },
129 129 /**
130 130 * Function: heatmap
131   - *
  131 + *
132 132 * Mapa de calor
133   - *
  133 + *
134 134 * Gera um layer do tipo mapa de calor e adiciona ao mapa
135   - *
  135 + *
136 136 * As dependências em javascript sao carregadas via script tag por meio de ferramentas/heatmap
137   - *
  137 + *
138 138 * Esse programa também obtém os dados necessários ao plugin
139   - *
  139 + *
140 140 * O layer existente no mapfile deve conter um metadata chamado PLUGINI3GEO
141   - *
  141 + *
142 142 * Esse matadado deve conter uma string que será transformada em um objeto javascript para uso no plugin
143   - *
  143 + *
144 144 * Exemplo:
145   - *
  145 + *
146 146 * "PLUGINI3GEO" '{"plugin":"heatmap","parametros":{"tipoGradiente": "default","coluna":"teste","max":"10","radius":"15"}}'
147   - *
  147 + *
148 148 * Coluna é a que contém os dados numéricos que definem a quantidade de uma medida em cada ponto e é
149 149 * usada para gerar a representação. Se for vazia, considera-se o valor como 1
150   - *
  150 + *
151 151 * As cores das classes existentes no LAYER serão utilizadas para calcular as cores do mapa de calor. Se tipoGradiente for
152 152 * igual a "default" será utilizado o gradiente padrão.
153   - *
  153 + *
154 154 */
155 155 heatmap : {
156 156 linkAjuda : function() {
... ... @@ -380,26 +380,26 @@ i3GEO.pluginI3geo =
380 380 },
381 381 /**
382 382 * Function: markercluster
383   - *
  383 + *
384 384 * Markercluster
385   - *
  385 + *
386 386 * Gera um layer que agrupa pontos conforme a distância entre eles e insere um contador adiciona ao mapa
387   - *
  387 + *
388 388 * As dependências em javascript sao carregadas via script tag por meio de ferramentas/markercluster
389   - *
  389 + *
390 390 * Esse programa também obtém os dados necessários ao plugin
391   - *
  391 + *
392 392 * O layer existente no mapfile deve conter um metadata chamado PLUGINI3GEO
393   - *
  393 + *
394 394 * Esse matadado deve conter uma string que será transformada em um objeto javascript para uso no plugin
395   - *
  395 + *
396 396 * Exemplo:
397   - *
  397 + *
398 398 * "PLUGINI3GEO" '{"plugin":"markercluster","parametros":{"coluna":"teste","gridSize":"50"}}'
399   - *
  399 + *
400 400 * Coluna é a que contém os dados numéricos que definem a quantidade de uma medida em cada ponto e é
401 401 * usada para gerar a representação. Se for vazia, considera-se o valor como 1
402   - *
  402 + *
403 403 */
404 404 markercluster : {
405 405 linkAjuda : function() {
... ... @@ -422,7 +422,8 @@ i3GEO.pluginI3geo =
422 422 + "<br><input name='tipoEstilos' type='text' value='"
423 423 + parametros.tipoEstilos
424 424 + "' size='30'></p>"
425   - + "<p></p>";
  425 + + "<p>Os s&iacute;mbolos utilizados podem ser customizados alterando-se as classes do Mapfile</p>"
  426 + + "<p>Veja o exemplo utilizado no tema _lmapadecluster.map</p>";
426 427  
427 428 return ins;
428 429 },
... ... @@ -454,8 +455,90 @@ i3GEO.pluginI3geo =
454 455 marker = new google.maps.Marker({
455 456 'position' : latLng,
456 457 icon : {
457   - url : i3GEO.configura.locaplic + "/imagens/google/symbol_blank.png",
458   - scaledSize : new google.maps.Size(20, 20)
  458 + url : markercluster_config.ponto.url,
  459 + scaledSize : new google.maps.Size(markercluster_config.ponto.width, markercluster_config.ponto.height)
  460 + }
  461 + });
  462 + marcas.push(marker);
  463 + }
  464 + markercluster = new MarkerClusterer(i3GeoMap, marcas, {
  465 + "gridSize" : parseInt(camada.plugini3geo.parametros.gridSize, 10),
  466 + "visible" : true,
  467 + "opacity" : camada.transparency,
  468 + "name" : camada.name,
  469 + "styles" : markercluster_config.estilos
  470 + });
  471 + i3GEO.janela.fechaAguarde("aguardePlugin");
  472 + i3GEO.eventos.cliquePerm.ativo = false;
  473 +
  474 + markercluster.ligaCamada = function() {
  475 + i3GEO.pluginI3geo.OBJETOS[camada.name].ready_ = true;
  476 + i3GEO.pluginI3geo.OBJETOS[camada.name].redraw();
  477 + i3GEO.eventos.cliquePerm.ativo = false;
  478 + };
  479 + markercluster.desLigaCamada = function() {
  480 + i3GEO.pluginI3geo.OBJETOS[camada.name].resetViewport(true);
  481 + i3GEO.pluginI3geo.OBJETOS[camada.name].ready_ = false;
  482 + i3GEO.eventos.cliquePerm.ativo = true;
  483 + };
  484 + markercluster.removeCamada = function() {
  485 + i3GEO.pluginI3geo.OBJETOS[camada.name].clearMarkers();
  486 + i3GEO.eventos.cliquePerm.ativo = true;
  487 + };
  488 + markercluster.atualizaCamada = function() {
  489 + i3GEO.pluginI3geo.OBJETOS[camada.name].ready_ = true;
  490 + i3GEO.pluginI3geo.OBJETOS[camada.name].redraw();
  491 + i3GEO.eventos.cliquePerm.ativo = false;
  492 + };
  493 + i3GEO.pluginI3geo.OBJETOS[camada.name] = markercluster;
  494 + markercluster_dados = null;
  495 + };
  496 + //se o script nao existir carrega o codigo e os dados
  497 + //caso contrario, carrega apenas os dados no script
  498 + if (!$i(nomeScript)) {
  499 + carregaJs = "sim";
  500 + }
  501 + else{
  502 + nomeScript = "";
  503 + }
  504 + p +=
  505 + "?carregajs=" + carregaJs + "&layer=" + camada.name + "&coluna=" + camada.plugini3geo.parametros.coluna
  506 + + "&g_sid=" + i3GEO.configura.sid
  507 + + "&tipoEstilos=" + camada.plugini3geo.parametros.tipoEstilos
  508 + + "&nomevariavel=markercluster_dados&nomevariavelConfig=markercluster_config";
  509 + i3GEO.util.scriptTag(p, criaLayer, nomeScript);
  510 + }
  511 + },
  512 + openlayers : {
  513 + aplicaPropriedades : function(camada) {
  514 + camada.sel = "nao";
  515 + camada.download = "nao";
  516 + camada.AGUARDALEGENDA = false;
  517 + camada.temporizador = "";
  518 + camada.copia = false;
  519 + camada.procurar = false;
  520 + camada.toponimia = false;
  521 + camada.etiquetas = false;
  522 + camada.tabela = false;
  523 + camada.grafico = false;
  524 + camada.destacar = false;
  525 + camada.wms = false;
  526 + camada.classe = "NAO";
  527 + return camada;
  528 + },
  529 + inicia : function(camada) {
  530 + var nomeScript = "markercluster_script", p = i3GEO.configura.locaplic + "/ferramentas/markercluster/openlayers_js.php", carregaJs = "nao", criaLayer;
  531 + criaLayer = function() {
  532 + var markercluster, marcas, latLng, marker, n, i;
  533 + n = markercluster_dados.length;
  534 + marcas = [];
  535 + for (i = 0; i < n; i++) {
  536 + latLng = new google.maps.LatLng(markercluster_dados[i].lat, markercluster_dados[i].lng);
  537 + marker = new google.maps.Marker({
  538 + 'position' : latLng,
  539 + icon : {
  540 + url : markercluster_config.ponto.url,
  541 + scaledSize : new google.maps.Size(markercluster_config.ponto.width, markercluster_config.ponto.height)
459 542 }
460 543 });
461 544 marcas.push(marker);
... ...
ferramentas/markercluster/funcoes.php
... ... @@ -70,23 +70,25 @@ function markerclusterMapfile(){
70 70 }
71 71 function markerclusterEstilos($map_file,$layer,$tipoEstilos){
72 72 if($tipoEstilos == "default"){
73   - $tipoEstilos = '{"estilos":[{url : i3GEO.configura.locaplic + "/imagens/google/m1",height : 53,width : 53},{url : i3GEO.configura.locaplic + "/imagens/google/m2",height : 56,width : 56},{url : i3GEO.configura.locaplic + "/imagens/google/m3",height : 66,width : 66},{url : i3GEO.configura.locaplic + "/imagens/google/m4",height : 78,width : 78},{url : i3GEO.configura.locaplic + "/imagens/google/m5",height : 90,width : 90}]}';
  73 + $tipoEstilos = '{"ponto":{url : i3GEO.configura.locaplic + "/imagens/google/symbol_blank.png",height : 20,width : 20},"estilos":[{url : i3GEO.configura.locaplic + "/imagens/google/m1.png",height : 53,width : 53},{url : i3GEO.configura.locaplic + "/imagens/google/m2.png",height : 56,width : 56},{url : i3GEO.configura.locaplic + "/imagens/google/m3.png",height : 66,width : 66},{url : i3GEO.configura.locaplic + "/imagens/google/m4.png",height : 78,width : 78},{url : i3GEO.configura.locaplic + "/imagens/google/m5.png",height : 90,width : 90}]}';
74 74 }
75 75 else{
76   - $gradiente = array();
  76 + $tipoEstilos = array();
77 77 $mapa = ms_newMapObj($map_file);
78 78 $l = $mapa->getlayerbyname($layer);
79   - $nc = $l->numclasses;
80   - for ($c = 0;$c < $nc;$c++){
  79 + $nc = $l->numclasses;
  80 + // a primeira classe e o ponto que nao entra no cluster
  81 + for ($c = 1;$c < $nc;$c++){
81 82 $classe = $l->getclass($c);
82 83 $estilo = $classe->getstyle(0);
83   - $nome = $classe->name;
84   - $cor = $estilo->color;
85   - $scor = "rgb(".$cor->red.",".$cor->green.",".$cor->blue.")";
86   - $gradiente[$nome] = $scor;
87   - }
88   - //echo $map_file;exit;
89   - $gradiente = json_encode(array("gradient"=>$gradiente));
  84 + $tipoEstilos[] = array("url"=>$estilo->symbol,"height"=>$estilo->size,"width"=>$estilo->size);
  85 + }
  86 + $classe = $l->getclass(0);
  87 + $estilo = $classe->getstyle(0);
  88 + $tipoEstilos = json_encode(array(
  89 + "ponto"=>array("url"=>$estilo->symbol,"height"=>$estilo->size,"width"=>$estilo->size),
  90 + "estilos"=>$tipoEstilos
  91 + ));
90 92 }
91 93 return $tipoEstilos;
92 94 }
... ...
ferramentas/markercluster/openlayers_js.php
... ... @@ -48,8 +48,10 @@ if($map_file == &quot;&quot;){
48 48 }
49 49 }
50 50 $resultado = markerclusterDados($map_file);
  51 +$tipoEstilos = markerclusterEstilos($map_file,$layer,$tipoEstilos);
51 52  
52 53 echo $nomevariavel.' = ['.implode(",",$resultado).'];';
  54 +echo $nomevariavelConfig.' = '.$tipoEstilos.';';
53 55  
54 56 if($carregajs === "sim"){
55 57 include_once($dir."/../../pacotes/markercluster/openlayers/AnimatedCluster.js");
... ...
init/index.php
... ... @@ -111,7 +111,6 @@ a {
111 111 margin: 0px auto;
112 112 text-decoration: none;
113 113 }
114   -
115 114 </style>
116 115 </head>
117 116 <body class=" yui-skin-sam ">
... ... @@ -130,28 +129,24 @@ a {
130 129 ?>
131 130 <div id="botoes"></div>
132 131 </div>
  132 +
  133 +
133 134 <div style="float: left">
134   - <div class="r" style="width: 230px; height: 380px">
135   - <table>
  135 + <a href="#" class="r" style="width: 230px; height: 380px"><table>
136 136 <tr>
137   - <td><a class="twitter-timeline" href="https://twitter.com/i3geo" data-widget-id="288061915689787392" style="width: 220px; height: 350px">Tweets @i3Geo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  137 + <td><a class="twitter-timeline" href="https://twitter.com/i3geo" data-widget-id="288061915689787392" width="220" height="350">Tweets @i3Geo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
138 138 </td>
139 139 </tr>
140   - </table>
141   - </div>
142   -
143   - <div class="r" style="width: 230px; height: 380px">
144   - <table>
  140 + </table> </a> <a href="#" class="r" style="width: 230px; height: 380px"><table>
145 141 <tr>
146   - <td><a class="twitter-timeline" href="https://twitter.com/search?q=@i3geo" data-widget-id="288053202174222336" style="width: 220px; height: 350px">Tweets #i3Geo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  142 + <td><a class="twitter-timeline" href="https://twitter.com/search?q=@i3geo" data-widget-id="288053202174222336" width="220" height="350">Tweets #i3Geo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
147 143 </td>
148 144 </tr>
149   - </table>
150   - </div>
  145 + </table> </a>
151 146 </div>
  147 +
152 148 </div>
153 149  
154   - </div>
155 150 </center>
156 151 </body>
157 152 <script>
... ...
temas/_lmapadecalor.map
... ... @@ -8,7 +8,7 @@ MAP
8 8 "TIP" "TIPO,ANOCRIA,NOMELOC"
9 9 "CLASSE" "SIM"
10 10 "TEMA" "Localidades (usar com mapa de calor)"
11   - "PLUGINI3GEO" '{"plugin":"heatmap","parametros":{"tipoGradiente":"","coluna":"","radius":15,"max":10}}' #se coluna for vazio, assume valor 1
  11 + "PLUGINI3GEO" '{"plugin":"heatmap","parametros":{"tipoGradiente":"default","coluna":"","radius":15,"max":10}}' #se coluna for vazio, assume valor 1
12 12 END # METADATA
13 13 NAME "_lmapadecalor"
14 14 STATUS OFF
... ... @@ -17,6 +17,11 @@ MAP
17 17 OPACITY 70
18 18 TYPE POINT
19 19 UNITS METERS
  20 + #
  21 + #voce pode definir os intervalos das classes do mapa entre 0 e 1
  22 + #para usar as classe altere o METADATA PLUGINI3GEO colocando "tipoGradiente":"" no lugar de "tipoGradiente":"default"
  23 + #nas classes o NAME corresponde ao limite superior da classe e COLOR indica a cor
  24 + #
20 25 CLASS
21 26 NAME "0.45"
22 27 COLOR 0 0 255
... ...
temas/_lmapadecluster.map
... ... @@ -27,7 +27,7 @@ MAP
27 27 "ltempoitemicone" ""
28 28 "permitecomentario" ""
29 29 "metaestat" ""
30   - "PLUGINI3GEO" '{"plugin":"markercluster","parametros":{"tipoEstilos":"default","coluna":"","gridSize":"50"}}'
  30 + "PLUGINI3GEO" '{"plugin":"markercluster","parametros":{"tipoEstilos":"default","gridSize":"50"}}'
31 31 "itembuscarapida" ""
32 32 "arquivokmz" ""
33 33 "arquivodownload" ""
... ... @@ -47,36 +47,41 @@ MAP
47 47 TILEITEM "location"
48 48 TYPE POINT
49 49 UNITS METERS
  50 + #
  51 + #se vc quiser especificar o simbolo que achar melhor, crie classes com a URL do simbolo e o SIZE
  52 + #a primeira classe sera utilizada como o simbolo para pontos (fora do cluster) e as demais como o simbolo para os clusters
  53 + #vc pode criar quantos clusters quiser
  54 + #no METADATA PLUGINI3GEO voce deve colocar "tipoEstilos":"" no lugar de "tipoEstilos":"default"
  55 + #
50 56 CLASS
51   - NAME "0.45"
  57 + NAME "Ponto"
52 58 STYLE
53   - COLOR 0 0 255
  59 + SIZE 20
  60 + #SYMBOL "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/people35.png"
54 61 END # STYLE
55 62 END # CLASS
56 63 CLASS
57   - NAME "0.55"
  64 + NAME "Cluster 1"
58 65 STYLE
59   - COLOR 0 255 255
  66 + SIZE 35
  67 + #SYMBOL "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/people35.png"
60 68 END # STYLE
61 69 END # CLASS
62 70 CLASS
63   - NAME "0.65"
  71 + NAME "Cluster 2"
64 72 STYLE
65   - COLOR 0 255 0
  73 + SIZE 45
  74 + #SYMBOL "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/people45.png"
66 75 END # STYLE
67 76 END # CLASS
68   - CLASS
69   - NAME "0.95"
70   - STYLE
71   - COLOR 255 255 0
72   - END # STYLE
73   - END # CLASS
74   - CLASS
75   - NAME "1"
  77 + CLASS
  78 + NAME "Cluster 3"
76 79 STYLE
77   - COLOR 255 0 0
  80 + SIZE 55
  81 + #SYMBOL "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/people55.png"
78 82 END # STYLE
79 83 END # CLASS
  84 +
80 85 END # LAYER
81 86  
82 87 END # MAP
... ...