Download as
Browse Code »

Commit 33b219223651665c4bf2f37f59b50cb3575c9189

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

Inclusão de botão, que abre a tela de configuração do plugin heatmap, no editor gráfico de mapfiles.

Showing 10 changed files with 136 additions and 59 deletions   Show diff stats
admin/admin.db
View file @33b2192
No preview for this file type
classesjs/classe_plugini3geo.js
  Diff comments   View file @33b2192
... ... @@ -42,8 +42,6 @@ i3GEO.pluginI3geo =
42 42 *
43 43 * Utilizado no editor de mapfiles do sistema de administracao
44 44 */
45   - //XXX criar plugin geojson
46   - //XXX criar plugin que aceite um JSON generico
47 45 PLUGINS : [
48 46 {
49 47 "classe" : "heatmap", // namespace da classe
... ... @@ -224,25 +222,25 @@ i3GEO.pluginI3geo =
224 222 parametros = config.parametros;
225 223 ins +=
226 224 "" + "<p>Coluna que cont&eacute;m os dados:"
227   - + "<br><input name='coluna' type='text' value='"
  225 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='coluna' type='text' value='"
228 226 + parametros.coluna
229   - + "' size='30'></p>"
  227 + + "' size='30'></div></p>"
230 228 + "<p>Ou valor num&eacute;rico para cada ponto:"
231   - + "<br><input name='valorPonto' type='text' value='"
  229 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='valorPonto' type='text' value='"
232 230 + parametros.valorPonto
233   - + "' size='30'></p>"
  231 + + "' size='30'></div></p>"
234 232 + "<p>Raio de cada ponto em pixels:"
235   - + "<br><input name='radius' type='text' value='"
  233 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='radius' type='text' value='"
236 234 + parametros.radius
237   - + "' size='30'></p>"
  235 + + "' size='30'></div></p>"
238 236 // + "<p>Valor m&aacute;ximo em cada ponto:"
239 237 // + "<br><input name='max' type='text' value='"
240 238 // + parametros.max
241 239 // + "' size='30'></p>"
242 240 + "<p>Tipo de gradiente (deixe vazio para utilizar as classes definidas no Layer ou escreva 'default' para usar o normal):"
243   - + "<br><input name='tipoGradiente' type='text' value='"
  241 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='tipoGradiente' type='text' value='"
244 242 + parametros.tipoGradiente
245   - + "' size='30'></p>"
  243 + + "' size='30'></div></p>"
246 244 + "<p>Para definir os cortes no gradiente de cores utilize valores entre 0 e 1."
247 245 + " As cores s&atilde;o definidas nas classes do LAYER, sendo que o nome define o valor superior do gradiente e COLOR define a cor."
248 246 + " Veja o exemplo utilizado no tema _lmapadecalor.map</p>";
... ... @@ -432,7 +430,9 @@ i3GEO.pluginI3geo =
432 430 };
433 431  
434 432 i3GEO.pluginI3geo.OBJETOS[camada.name] = heatmap;
  433 +
435 434 objMapa.addLayer(heatmap);
  435 +
436 436 heatmap.setDataSet(transformedTestData);
437 437  
438 438 heatmap_dados = null;
... ... @@ -510,13 +510,13 @@ i3GEO.pluginI3geo =
510 510 parametros = config.parametros;
511 511 ins +=
512 512 "" + "<p>Dist&acirc;ncia m&aacute;xima entre ponto em pixels:"
513   - + "<br><input name='gridSize' type='text' value='"
  513 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='gridSize' type='text' value='"
514 514 + parametros.gridSize
515   - + "' size='30'></p>"
  515 + + "' size='30'></div></p>"
516 516 + "<p>Tipo de estilos (deixe vazio para utilizar as classes definidas no Layer ou escreva 'default' para usar o normal):"
517   - + "<br><input name='tipoEstilos' type='text' value='"
  517 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='tipoEstilos' type='text' value='"
518 518 + parametros.tipoEstilos
519   - + "' size='30'></p>"
  519 + + "' size='30'></div></p>"
520 520 + "<p>Os s&iacute;mbolos utilizados podem ser customizados alterando-se as classes do Mapfile</p>"
521 521 + "<p>Veja o exemplo utilizado no tema _lmapadecluster.map</p>";
522 522  
... ... @@ -737,7 +737,7 @@ i3GEO.pluginI3geo =
737 737 'Canvas', 'SVG'
738 738 ],
739 739 strategies : [
740   - new OpenLayers.Strategy.AnimatedCluster({
  740 + new OpenLayers.Strategy.Cluster({
741 741 distance : parseInt(camada.plugini3geo.parametros.gridSize, 10)
742 742 })
743 743 ],
... ... @@ -788,8 +788,7 @@ i3GEO.pluginI3geo =
788 788 + "&g_sid="
789 789 + i3GEO.configura.sid
790 790 + "&tipoEstilos="
791   - + camada.plugini3geo.parametros.tipoEstilos
792   - + "&nomevariavel=markercluster_dados&nomevariavelConfig=markercluster_config";
  791 + + camada.plugini3geo.parametros.tipoEstilos;
793 792 i3GEO.util.scriptTag(p, criaLayer, nomeScript);
794 793 }
795 794 }
... ...
ferramentas/atalhosedicao/index.js
  Diff comments   View file @33b2192
... ... @@ -215,6 +215,67 @@ i3GEOF.atalhosedicao =
215 215 }
216 216 });
217 217 $i("i3GEOFatalhosedicaoLayerkml-button").style.width = "200px";
  218 + new YAHOO.widget.Button("i3GEOFatalhosedicaoMarkercluster", {
  219 + onclick : {
  220 + fn : function() {
  221 + i3GEO.temaAtivo = i3GEOF.atalhosedicao.tema;
  222 + YAHOO.namespace("admin");
  223 + YAHOO.namespace("admin.container");
  224 + core_montaEditor("","450px","500px","","Plugin",true,false,false);
  225 + var sUrl = i3GEO.configura.locaplic + "/admin1/catalogo/mapfile/exec.php?funcao=pegaPlugin&codigoMap="+i3GEO.temaAtivo+"&codigoLayer="+i3GEO.temaAtivo+"&g_sid="+i3GEO.configura.sid;
  226 + var montaEditorPlugin = function(retorno){
  227 + var plugin = "markercluster";
  228 + var ins = "<input type=button title='"+ $trad("salva",i3GEOadmin.core.dicionario) +"' value='"+ $trad("salva",i3GEOadmin.core.dicionario) +"' id=salvarPlugin />"
  229 + + "<input type=button title='"+ $trad("remove",i3GEOadmin.core.dicionario) +"' value='"+ $trad("remove",i3GEOadmin.core.dicionario) +"' id=removerPlugin />";
  230 + //pega os campos do formulario
  231 + ins += i3GEO.pluginI3geo.formAdmin(plugin,retorno);
  232 + var ajuda = "<p>Mais informa&ccedil;&otilde;es:<br><a href='"+i3GEO.pluginI3geo.linkAjuda(plugin)+"' target=_blank >" + i3GEO.pluginI3geo.linkAjuda(plugin) + "</a></p>";
  233 + $i("editor_bd").innerHTML = ins + ajuda;
  234 +
  235 + new YAHOO.widget.Button("salvarPlugin",{ onclick: { fn: function(){
  236 + i3GEOF.atalhosedicao.salvarDadosEditorPlugin($i("editor_bd"),plugin,i3GEOF.atalhosedicao.tema,i3GEOF.atalhosedicao.tema);
  237 + } }});
  238 +
  239 + new YAHOO.widget.Button("removerPlugin",{ onclick: { fn: function(){
  240 + i3GEOF.atalhosedicao.salvarDadosEditorPlugin($i("editor_bd"),"",i3GEOF.atalhosedicao.tema,i3GEOF.atalhosedicao.tema);
  241 + } }});
  242 + };
  243 + core_pegaDados("",sUrl,montaEditorPlugin);
  244 + }
  245 + }
  246 + });
  247 + $i("i3GEOFatalhosedicaoMarkercluster-button").style.width = "200px";
  248 +
  249 + new YAHOO.widget.Button("i3GEOFatalhosedicaoHeatmap", {
  250 + onclick : {
  251 + fn : function() {
  252 + i3GEO.temaAtivo = i3GEOF.atalhosedicao.tema;
  253 + YAHOO.namespace("admin");
  254 + YAHOO.namespace("admin.container");
  255 + core_montaEditor("","450px","500px","","Plugin",true,false,false);
  256 + var sUrl = i3GEO.configura.locaplic + "/admin1/catalogo/mapfile/exec.php?funcao=pegaPlugin&codigoMap="+i3GEO.temaAtivo+"&codigoLayer="+i3GEO.temaAtivo+"&g_sid="+i3GEO.configura.sid;
  257 + var montaEditorPlugin = function(retorno){
  258 + var plugin = "heatmap";
  259 + var ins = "<input type=button title='"+ $trad("salva",i3GEOadmin.core.dicionario) +"' value='"+ $trad("salva",i3GEOadmin.core.dicionario) +"' id=salvarPlugin />"
  260 + + "<input type=button title='"+ $trad("remove",i3GEOadmin.core.dicionario) +"' value='"+ $trad("remove",i3GEOadmin.core.dicionario) +"' id=removerPlugin />";
  261 + //pega os campos do formulario
  262 + ins += i3GEO.pluginI3geo.formAdmin(plugin,retorno);
  263 + var ajuda = "<p>Mais informa&ccedil;&otilde;es:<br><a href='"+i3GEO.pluginI3geo.linkAjuda(plugin)+"' target=_blank >" + i3GEO.pluginI3geo.linkAjuda(plugin) + "</a></p>";
  264 + $i("editor_bd").innerHTML = ins + ajuda;
  265 +
  266 + new YAHOO.widget.Button("salvarPlugin",{ onclick: { fn: function(){
  267 + i3GEOF.atalhosedicao.salvarDadosEditorPlugin($i("editor_bd"),plugin,i3GEOF.atalhosedicao.tema,i3GEOF.atalhosedicao.tema);
  268 + } }});
  269 +
  270 + new YAHOO.widget.Button("removerPlugin",{ onclick: { fn: function(){
  271 + i3GEOF.atalhosedicao.salvarDadosEditorPlugin($i("editor_bd"),"",i3GEOF.atalhosedicao.tema,i3GEOF.atalhosedicao.tema);
  272 + } }});
  273 + };
  274 + core_pegaDados("",sUrl,montaEditorPlugin);
  275 + }
  276 + }
  277 + });
  278 + $i("i3GEOFatalhosedicaoHeatmap-button").style.width = "200px";
218 279  
219 280 new YAHOO.widget.Button("i3GEOFatalhosedicaoTemaComGrafico", {
220 281 onclick : {
... ...
ferramentas/atalhosedicao/template_mst.html
  Diff comments   View file @33b2192
... ... @@ -94,4 +94,11 @@
94 94 <p class='paragrafo'>
95 95 <input id='i3GEOFatalhosedicaoLayerkml' type='button' value='KML layer' />
96 96 </p>
  97 + <p class='paragrafo'>
  98 + <input id='i3GEOFatalhosedicaoMarkercluster' type='button' value='Marker Cluster' />
  99 + </p>
  100 + <p class='paragrafo'>
  101 + <input id='i3GEOFatalhosedicaoHeatmap' type='button' value='Mapa de calor (heatmap)' />
  102 + </p>
  103 +
97 104 </div>
98 105 \ No newline at end of file
... ...
ferramentas/heatmap/googlemaps_js.php
  Diff comments   View file @33b2192
... ... @@ -34,8 +34,8 @@ if(isset($map_file) &amp;&amp; isset($postgis_mapa) &amp;&amp; $map_file != &quot;&quot;){
34 34 restauraCon($map_file,$postgis_mapa);
35 35 }
36 36  
37   -echo $nomevariavel.' = ['.implode(",",$resultado).'];';
38   -echo $nomevariavelConfig.' = '.$gradiente.';';
  37 +echo 'heatmap_dados = ['.implode(",",$resultado).'];';
  38 +echo 'heatmap_config = '.$gradiente.';';
39 39  
40 40 if($carregajs === "sim"){
41 41 include_once($dir."/../../pacotes/heatmap/src/heatmap.js");
... ...
ferramentas/heatmap/openlayers_js.php
  Diff comments   View file @33b2192
... ... @@ -59,10 +59,10 @@ if(isset($map_file) &amp;&amp; isset($postgis_mapa) &amp;&amp; $map_file != &quot;&quot;){
59 59 restauraCon($map_file,$postgis_mapa);
60 60 }
61 61  
62   -echo $nomevariavel.' = ['.implode(",",$resultado).'];';
63   -echo $nomevariavelConfig.' = '.$gradiente.';';
  62 +echo 'heatmap_dados = ['.implode(",",$resultado).'];';
  63 +echo 'heatmap_config = '.$gradiente.';';
64 64  
65   -if($carregajs === "sim"){
  65 +if($_GET["carregajs"] === "sim"){
66 66 include_once($dir."/../../pacotes/heatmap/src/heatmap.js");
67 67 include_once($dir."/../../pacotes/heatmap/src/heatmap-openlayers.js");
68 68 }
... ...
ferramentas/markercluster/googlemaps_js.php
  Diff comments   View file @33b2192
... ... @@ -30,8 +30,8 @@ $map_file = markerclusterMapfile();
30 30 $resultado = markerclusterDados($map_file);
31 31 $tipoEstilos = markerclusterEstilos($map_file,$layer,$tipoEstilos);
32 32  
33   -echo $nomevariavel.' = ['.implode(",",$resultado).'];';
34   -echo $nomevariavelConfig.' = '.$tipoEstilos.';';
  33 +echo 'markercluster_dados = ['.implode(",",$resultado).'];';
  34 +echo 'markercluster_config = '.$tipoEstilos.';';
35 35  
36 36 if($carregajs === "sim"){
37 37 include_once($dir."/../../pacotes/markercluster/google/markerclusterer.js");
... ...
ferramentas/markercluster/openlayers_js.php
  Diff comments   View file @33b2192
... ... @@ -46,8 +46,8 @@ if($map_file == &quot;&quot;){
46 46 $resultado = markerclusterDados($map_file);
47 47 $tipoEstilos = markerclusterEstilos($map_file,$layer,$tipoEstilos);
48 48  
49   -echo $nomevariavel.' = ['.implode(",",$resultado).'];';
50   -echo $nomevariavelConfig.' = '.$tipoEstilos.';';
  49 +echo 'markercluster_dados = ['.implode(",",$resultado).'];';
  50 +echo 'markercluster_config = '.$tipoEstilos.';';
51 51  
52 52 if($carregajs === "sim"){
53 53 include_once($dir."/../../pacotes/markercluster/openlayers/AnimatedCluster.js");
... ...
js/plugini3geo.js
  Diff comments   View file @33b2192
... ... @@ -229,25 +229,25 @@ i3GEO.pluginI3geo =
229 229 parametros = config.parametros;
230 230 ins +=
231 231 "" + "<p>Coluna que cont&eacute;m os dados:"
232   - + "<br><input name='coluna' type='text' value='"
  232 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='coluna' type='text' value='"
233 233 + parametros.coluna
234   - + "' size='30'></p>"
  234 + + "' size='30'></div></p>"
235 235 + "<p>Ou valor num&eacute;rico para cada ponto:"
236   - + "<br><input name='valorPonto' type='text' value='"
  236 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='valorPonto' type='text' value='"
237 237 + parametros.valorPonto
238   - + "' size='30'></p>"
  238 + + "' size='30'></div></p>"
239 239 + "<p>Raio de cada ponto em pixels:"
240   - + "<br><input name='radius' type='text' value='"
  240 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='radius' type='text' value='"
241 241 + parametros.radius
242   - + "' size='30'></p>"
  242 + + "' size='30'></div></p>"
243 243 // + "<p>Valor m&aacute;ximo em cada ponto:"
244 244 // + "<br><input name='max' type='text' value='"
245 245 // + parametros.max
246 246 // + "' size='30'></p>"
247 247 + "<p>Tipo de gradiente (deixe vazio para utilizar as classes definidas no Layer ou escreva 'default' para usar o normal):"
248   - + "<br><input name='tipoGradiente' type='text' value='"
  248 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='tipoGradiente' type='text' value='"
249 249 + parametros.tipoGradiente
250   - + "' size='30'></p>"
  250 + + "' size='30'></div></p>"
251 251 + "<p>Para definir os cortes no gradiente de cores utilize valores entre 0 e 1."
252 252 + " As cores s&atilde;o definidas nas classes do LAYER, sendo que o nome define o valor superior do gradiente e COLOR define a cor."
253 253 + " Veja o exemplo utilizado no tema _lmapadecalor.map</p>";
... ... @@ -512,13 +512,13 @@ i3GEO.pluginI3geo =
512 512 parametros = config.parametros;
513 513 ins +=
514 514 "" + "<p>Dist&acirc;ncia m&aacute;xima entre ponto em pixels:"
515   - + "<br><input name='gridSize' type='text' value='"
  515 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='gridSize' type='text' value='"
516 516 + parametros.gridSize
517   - + "' size='30'></p>"
  517 + + "' size='30'></div></p>"
518 518 + "<p>Tipo de estilos (deixe vazio para utilizar as classes definidas no Layer ou escreva 'default' para usar o normal):"
519   - + "<br><input name='tipoEstilos' type='text' value='"
  519 + + "<br><div class='i3geoForm i3geoFormIconeEdita'><input name='tipoEstilos' type='text' value='"
520 520 + parametros.tipoEstilos
521   - + "' size='30'></p>"
  521 + + "' size='30'></div></p>"
522 522 + "<p>Os s&iacute;mbolos utilizados podem ser customizados alterando-se as classes do Mapfile</p>"
523 523 + "<p>Veja o exemplo utilizado no tema _lmapadecluster.map</p>";
524 524  
... ... @@ -742,7 +742,7 @@ i3GEO.pluginI3geo =
742 742 'Canvas', 'SVG'
743 743 ],
744 744 strategies : [
745   - new OpenLayers.Strategy.AnimatedCluster({
  745 + new OpenLayers.Strategy.Cluster({
746 746 distance : parseInt(camada.plugini3geo.parametros.gridSize, 10)
747 747 })
748 748 ],
... ... @@ -793,8 +793,7 @@ i3GEO.pluginI3geo =
793 793 + "&g_sid="
794 794 + i3GEO.configura.sid
795 795 + "&tipoEstilos="
796   - + camada.plugini3geo.parametros.tipoEstilos
797   - + "&nomevariavel=markercluster_dados&nomevariavelConfig=markercluster_config";
  796 + + camada.plugini3geo.parametros.tipoEstilos;
798 797 i3GEO.util.scriptTag(p, criaLayer, nomeScript);
799 798 }
800 799 }
... ...
pacotes/heatmap/src/heatmap-openlayers.js
  Diff comments   View file @33b2192
1   -/*
  1 +/*
2 2 * heatmap.js OpenLayers Heatmap Class
3 3 *
4 4 * Copyright (c) 2011, Patrick Wied (http://www.patrick-wied.at)
5 5 * Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
6 6 * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
7   - *
  7 + *
8 8 * Modified on Jun,06 2011 by Antonio Santiago (http://www.acuriousanimal.com)
9 9 * - Heatmaps as independent map layer.
10 10 * - Points based on OpenLayers.LonLat.
11 11 * - Data initialization in constructor.
12 12 * - Improved 'addDataPoint' to add new lonlat based points.
13   - */
  13 + */
14 14 OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
15 15 // the heatmap isn't a basic layer by default - you usually want to display the heatmap over another map ;)
16 16 isBaseLayer: false,
... ... @@ -34,18 +34,18 @@ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
34 34 // create the heatmap with passed heatmap-options
35 35 this.heatmap = h337.create(hmoptions);
36 36  
37   - handler = function(){
  37 + handler = function(){
38 38 if(this.map && this.tmpData.max){
39   - this.updateLayer();
  39 + this.updateLayer();
40 40 }
41 41 };
42   - handler1 = function(){
  42 + handler1 = function(){
43 43 if(this.tmpData && this.tmpData.max){
44 44 this.toggle();
45 45 this.updateLayer();
46 46 }
47 47 };
48   -
  48 +
49 49 // on zoomend and moveend we have to move the canvas element and redraw the datapoints with new positions
50 50 //map.events.register("zoomend", this, handler);
51 51 map.events.register("moveend", this, handler);
... ... @@ -53,16 +53,16 @@ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
53 53 map.events.register(
54 54 "removed",
55 55 this,
56   - function(){
  56 + function(){
57 57 if(this.tmpData.max){
58   - this.destroy();
  58 + this.destroy();
59 59 }
60 60 });
61 61 },
62 62 updateLayer: function(){
63 63 var pixelOffset = this.getPixelOffset(),
64 64 el = this.heatmap.get('element');
65   - // if the pixeloffset e.g. for x was positive move the canvas element to the left by setting left:-offset.y px
  65 + // if the pixeloffset e.g. for x was positive move the canvas element to the left by setting left:-offset.y px
66 66 // otherwise move it the right by setting it a positive value. same for top
67 67 el.style.top = ((pixelOffset.y > 0)?('-'+pixelOffset.y):(Math.abs(pixelOffset.y)))+'px';
68 68 el.style.left = ((pixelOffset.x > 0)?('-'+pixelOffset.x):(Math.abs(pixelOffset.x)))+'px';
... ... @@ -80,9 +80,9 @@ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
80 80 c_lonlat = new OpenLayers.LonLat(c.lon, c.lat),
81 81 c_pixel = this.mapLayer.getViewPortPxFromLonLat(c_lonlat);
82 82  
83   - return {
  83 + return {
84 84 x: o_pixel.x - c_pixel.x,
85   - y: o_pixel.y - c_pixel.y
  85 + y: o_pixel.y - c_pixel.y
86 86 };
87 87  
88 88 },
... ... @@ -90,20 +90,31 @@ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
90 90 var set = {},
91 91 dataset = obj.data,
92 92 dlen = dataset.length,
93   - entry, lonlat, pixel;
  93 + entry, lonlat, pixel, proj, tproj, vp;
94 94  
95 95 set.max = obj.max;
96 96 set.data = [];
  97 +
97 98 // get the pixels for all the lonlat entries
  99 + proj = this.map.getProjectionObject();
  100 + tproj = this.projection;
98 101 while(dlen--){
99   - entry = dataset[dlen],
100   - lonlat = entry.lonlat.clone().transform(this.projection, this.map.getProjectionObject()),
101   - pixel = this.roundPixels(this.getViewPortPxFromLonLat(lonlat));
  102 + entry = dataset[dlen];
  103 + try{
  104 + lonlat = entry.lonlat.clone().transform(tproj, proj);
  105 + if(lonlat){
  106 + vp = this.getViewPortPxFromLonLat(lonlat);
102 107  
103   - if(pixel){
104   - set.data.push({x: pixel.x, y: pixel.y, count: entry.count});
  108 + pixel = this.roundPixels(vp);
  109 +
  110 + if(pixel){
  111 + set.data.push({x: pixel.x, y: pixel.y, count: entry.count});
  112 + }
  113 + }
105 114 }
  115 + catch(e){}
106 116 }
  117 +
107 118 this.tmpData = obj;
108 119 this.heatmap.store.setDataSet(set);
109 120 },
... ...