Download as
Browse Code »

Commit 0db9cf86a0edac6c09b006fc0b1c4f1b648759c7

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

Desenvolvimento do heatmap. Sincronização da árvore de temas e árvore de camadas (checkbox)

Showing 9 changed files with 443 additions and 340 deletions   Show diff stats
admin/admin.db
View file @0db9cf8
No preview for this file type
classesjs/classe_arvoredecamadas.js
  Diff comments   View file @0db9cf8
... ... @@ -1201,6 +1201,18 @@ i3GEO.arvoreDeCamadas = {
1201 1201 // camadas", "i3geo");
1202 1202 var tnome, idtema = node.data.idopcoes, ltema = i3GEO.arvoreDeCamadas
1203 1203 .pegaTema(idtema), funcoes = i3GEO.arvoreDeCamadas.FUNCOES;
  1204 +
  1205 +
  1206 + //
  1207 + //ajusta as propriedades e funcoes caso a camada seja um plugin
  1208 + //
  1209 + ltema = i3GEO.pluginI3geo.aplicaPropriedades(ltema);
  1210 + //inclui no objeto o parametro de verificacao
  1211 + //e necessario clonar para nao alterar o original
  1212 + funcoes = i3GEO.util.cloneObj(funcoes);
  1213 + funcoes.plugini3geo = ltema.plugini3geo;
  1214 + funcoes = i3GEO.pluginI3geo.aplicaPropriedades(funcoes);
  1215 +
1204 1216 if (funcoes.opacidade === true) {
1205 1217 tnome = "<span onmouseover=\"javascript:i3GEO.ajuda.mostraJanela('"
1206 1218 + $trad("t19")
... ... @@ -1635,6 +1647,13 @@ i3GEO.arvoreDeCamadas = {
1635 1647 html += "&nbsp;<img style='" + estilo + "' src='" + tema.iconetema
1636 1648 + "' />";
1637 1649 }
  1650 + tema.AGUARDALEGENDA = i3GEO.arvoreDeCamadas.AGUARDALEGENDA;
  1651 + //
  1652 + //ajusta as propriedades conforme as caracteristicas de cada plugin
  1653 + //verifica se o tema e do tipo plugin antes
  1654 + //nao e necessario clonar
  1655 + //
  1656 + tema = i3GEO.pluginI3geo.aplicaPropriedades(tema);
1638 1657 //
1639 1658 // inclui icone indicando que o tema muda conforme a escala
1640 1659 //
... ... @@ -1702,7 +1721,7 @@ i3GEO.arvoreDeCamadas = {
1702 1721 }
1703 1722 estilo = navm ? "cursor:move;vertical-align:35%;padding-top:0px;color:black;"
1704 1723 : "cursor:move;vertical-align:20%;color:black;";
1705   - if (i3GEO.arvoreDeCamadas.AGUARDALEGENDA) {
  1724 + if (tema.AGUARDALEGENDA) {
1706 1725 html += "&nbsp;<span id='ArvoreTituloTema"
1707 1726 + tema.name
1708 1727 + "' style='position:relative;top:2px;"
... ...
classesjs/classe_arvoredetemas.js
  Diff comments   View file @0db9cf8
... ... @@ -2134,9 +2134,9 @@ i3GEO.arvoreDeTemas = {
2134 2134 /**
2135 2135 * Function: desativaCheckbox
2136 2136 *
2137   - * Desmarca todos os checkbox dos temas marcados na arvore.
  2137 + * Desmarca todos os checkbox dos temas marcados na arvore
2138 2138 */
2139   - desativaCheckbox : function() {
  2139 + desativaCheckbox : function(valor) {
2140 2140 if (typeof (console) !== 'undefined')
2141 2141 console.info("i3GEO.arvoreDeTemas.desativaCheckbox()");
2142 2142  
... ... @@ -2151,6 +2151,26 @@ i3GEO.arvoreDeTemas = {
2151 2151 } while (i < n);
2152 2152 },
2153 2153 /**
  2154 + * Function: buscaCheckbox
  2155 + *
  2156 + * Retorna um input com determinado value
  2157 + */
  2158 + buscaCheckbox : function(valor) {
  2159 + var o, inputs, n, i;
  2160 + o = document.getElementById(i3GEO.arvoreDeTemas.ARVORE.id);
  2161 + if(o){
  2162 + inputs = o.getElementsByTagName("input");
  2163 + n = inputs.length;
  2164 + i = 0;
  2165 + do {
  2166 + if(inputs[i].value === valor){
  2167 + return inputs[i];
  2168 + }
  2169 + i += 1;
  2170 + } while (i < n);
  2171 + }
  2172 + },
  2173 + /**
2154 2174 * Lista os temas com checkbox marcados.
2155 2175 *
2156 2176 * Return: {Array} - array com os codigos dos temas
... ...
classesjs/classe_interface.js
  Diff comments   View file @0db9cf8
... ... @@ -361,6 +361,13 @@ i3GEO.Interface = {
361 361 */
362 362 ligaDesliga : function(obj) {
363 363 i3GEO.Interface[i3GEO.Interface.ATUAL].ligaDesliga(obj);
  364 + //atualiza a arvore de temas se for o caso
  365 + if(obj.value && obj.value != ""){
  366 + var ck = i3GEO.arvoreDeTemas.buscaCheckbox(obj.value);
  367 + if(ck){
  368 + ck.checked = obj.checked;
  369 + }
  370 + }
364 371 },
365 372 /*
366 373 * Function: adicionaKml
... ... @@ -1396,14 +1403,8 @@ i3GEO.Interface = {
1396 1403 var layers = i3geoOL.getLayersByName(obj.value), desligar = "", ligar = "", b;
1397 1404 if (layers.length > 0) {
1398 1405 layers[0].setVisibility(obj.checked);
1399   - if (obj.checked == true) {
1400   - // foi necess�rio por causa de um bug no Firefox 27.0.1
1401   - /*
1402   - * @TODO verificar se persiste o erro nas versoes do FF
1403   - */
1404   - if (navn) {
1405   - i3GEO.Interface.openlayers.atualizaTema("", obj.value);
1406   - }
  1406 + if(obj.checked === true){
  1407 + layers[0].div.style.display = "block";
1407 1408 }
1408 1409 }
1409 1410 if (obj.checked) {
... ... @@ -2582,7 +2583,7 @@ i3GEO.Interface = {
2582 2583 */
2583 2584 PARAMETROSLAYER : "&TIPOIMAGEM=" + i3GEO.configura.tipoimagem,
2584 2585 /*
2585   - * String acrescentada � url de cada tile para garantir a
  2586 + * String acrescentada a url de cada tile para garantir a
2586 2587 * remo&ccedil;&atilde;o do cache local
2587 2588 *
2588 2589 * Type: {string}
... ...
classesjs/classe_plugini3geo.js
  Diff comments   View file @0db9cf8
1 1 /**
2 2 * Title: pluginI3geo
3   - *
  3 + *
4 4 * i3GEO.pluginI3geo
5   - *
  5 + *
6 6 * Implementam os plugins do i3Geo que adicionam camadas especiais ao mapa,
7 7 * normalmente dados vetoriais.
8   - *
  8 + *
9 9 * Arquivo:
10   - *
  10 + *
11 11 * i3geo/classesjs/classe_plugini3geo.js
12   - *
  12 + *
13 13 * Licen&ccedil;a:
14   - *
  14 + *
15 15 * GPL2
16   - *
  16 + *
17 17 * i3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet
18   - *
  18 + *
19 19 * Direitos Autorais Reservados (c) 2006 Minist&eacute;rio do Meio Ambiente
20 20 * Brasil Desenvolvedor: Edmar Moretti edmar.moretti@gmail.com
21   - *
  21 + *
22 22 * Este programa &eacute; software livre; voc&ecirc; pode redistribu&iacute;-lo
23 23 * e/ou modific&aacute;-lo sob os termos da Licen&ccedil;a P&uacute;blica Geral
24 24 * GNU conforme publicada pela Free Software Foundation;
25   - *
  25 + *
26 26 * Este programa &eacute; distribu&iacute;do na expectativa de que seja
27 27 * &uacute;til, por&eacute;m, SEM NENHUMA GARANTIA; nem mesmo a garantia
28 28 * impl&iacute;cita de COMERCIABILIDADE OU ADEQUAC&Atilde;O A UMA FINALIDADE
... ... @@ -32,20 +32,19 @@
32 32 * n&atilde;o, escreva para a Free Software Foundation, Inc., no endere&ccedil;o
33 33 * 59 Temple Street, Suite 330, Boston, MA 02111-1307 USA.
34 34 */
35   -
36 35 if (typeof (i3GEO) === 'undefined') {
37 36 var i3GEO = {};
38 37 }
39 38 i3GEO.pluginI3geo = {
40 39 /**
41 40 * Inicia a execucao de um plugin
42   - *
  41 + *
43 42 * Camada e um objeto gerado pelo i3Geo quando uma camada e adicionada
44 43 * ao mapa O objeto i3GEO.arvoreDeCamadas.CAMADAS guarda todas as
45 44 * camadas adicionadas ao mapa Ao adicionar uma camada pelo catalogo, o
46 45 * i3Geo verifica se a camada possui plugin e direciona para ca Os
47 46 * plugins sao definidos como metadados em cada mapfile de cada tema
48   - *
  47 + *
49 48 * Veja em i3geo/classesphp/classe_mapa.php funcao parametrostemas
50 49 */
51 50 inicia : function(camada) {
... ... @@ -56,131 +55,175 @@ i3GEO.pluginI3geo = {
56 55 // para cada plugin deve haver um objeto com as funcoes especificas
57 56 // para
58 57 // cada interface
59   - i3GEO.pluginI3geo[camada.plugini3geo.plugin][i3GEO.Interface.ATUAL]
60   - .call(null, camada);
  58 + i3GEO.pluginI3geo[camada.plugini3geo.plugin][i3GEO.Interface.ATUAL].inicia(camada);
  59 + },
  60 + /**
  61 + * Aplica as propriedades em um objeto do tipo tema
  62 + *
  63 + * tema e fornecido por i3GEO.arvoreDeCamadas o ajuste das propriedades
  64 + * e necessario para que as propriedades aparecam de forma correta na
  65 + * arvore de camadas
  66 + */
  67 + aplicaPropriedades: function(camada){
  68 + if(camada.plugini3geo != ""){
  69 + camada = i3GEO.pluginI3geo[camada.plugini3geo.plugin][i3GEO.Interface.ATUAL].aplicaPropriedades(camada);
  70 + }
  71 + return camada;
61 72 },
62 73 /**
63 74 * Function: heatmap
64   - *
  75 + *
65 76 * Mapa de calor
66   - *
  77 + *
67 78 * Gera um layer do tipo mapa de calor e adiciona ao mapa
68   - *
  79 + *
69 80 * As depend&ecirc;ncias em javascript sao carregadas via script tag por
70 81 * meio de ferramentas/heatmap/openlayers_js.php
71   - *
  82 + *
72 83 * Esse programa tamb&eacute;m obt&eacute;m os dados necess&aacute;rios
73 84 * ao plugin
74   - *
  85 + *
75 86 * O layer existente no mapfile deve conter um metadata chamado
76 87 * PLUGINI3GEO
77   - *
  88 + *
78 89 * Esse matadado deve conter uma string que ser&aacute; transformada em
79 90 * um objeto javascript para uso no plugin
80   - *
  91 + *
81 92 * Exemplo:
82   - *
  93 + *
83 94 * "PLUGINI3GEO" '{"plugin":"heatmap","parametros":{"coluna":"teste"}}'
84   - *
  95 + *
85 96 * Coluna &eacute; a que cont&eacute;m os dados num&eacute;ricos que
86 97 * definem a quantidade de uma medida em cada ponto e &eacute; usada
87 98 * para gerar a representa&ccedil;&atilde;o. Se for vazia, considera-se
88 99 * o valor como 1
89   - *
  100 + *
90 101 * As cores das classes existentes no LAYER ser&atilde;o utilizadas para
91 102 * calcular as cores do mapa de calor. Se n&atilde;o existirem classes,
92 103 * ser&aacute; usado o default.
93   - *
  104 + *
94 105 */
95 106 heatmap : {
96   - googlemaps: function(camada){
97   - var p = i3GEO.configura.locaplic
98   - + "/ferramentas/heatmap/googlemaps_js.php", carregaJs = "nao", crialayer;
99   - criaLayer = function() {
100   - var heatmap,pontos;
101   - heatmap = new HeatmapOverlay(i3GeoMap, {
102   - "radius":15,
103   - "visible":true,
104   - "opacity":60,
105   - "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" },
106   - "legend": {
107   - "title": camada.tema,
108   - "position": "bl",
109   - "offset": [5,50]
110   - }
111   - });
112   - pontos={
113   - max: 10,
114   - data: heatmap_dados
  107 + googlemaps: {
  108 + aplicaPropriedades: function(camada){
  109 + return camada;
  110 + },
  111 + inicia: function(camada){
  112 + var p = i3GEO.configura.locaplic
  113 + + "/ferramentas/heatmap/googlemaps_js.php", carregaJs = "nao", crialayer;
  114 + criaLayer = function() {
  115 + var heatmap,pontos;
  116 + heatmap = new HeatmapOverlay(i3GeoMap, camada.name, {
  117 + "radius":15,
  118 + "visible":true,
  119 + "opacity":60,
  120 + "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" },
  121 + "legend": {
  122 + "title": camada.tema,
  123 + "position": "bl",
  124 + "offset": [5,50]
  125 + }
  126 + });
  127 + i3GeoMap.overlayMapTypes.insertAt(0, heatmap);
  128 + pontos={
  129 + max: 10,
  130 + data: heatmap_dados
  131 + };
  132 + i3GEO.janela.fechaAguarde("aguardePlugin");
  133 + heatmap.setDataSet(pontos);
  134 + heatmap_dados = null;
  135 + // i3GeoMap.setZoom(i3GeoMap.getZoom());
115 136 };
116   - i3GEO.janela.fechaAguarde("aguardePlugin");
117   - heatmap.setDataSet(pontos);
118   - heatmap_dados = null;
119   - //i3GeoMap.setZoom(i3GeoMap.getZoom());
120   - };
121   - if (typeof (HeatmapOverlay) === 'undefined') {
122   - carregaJs = "sim";
  137 + if (typeof (HeatmapOverlay) === 'undefined') {
  138 + carregaJs = "sim";
  139 + }
  140 + p += "?carregajs=" + carregaJs + "&layer=" + camada.name
  141 + + "&coluna=" + camada.plugini3geo.parametros.coluna
  142 + + "&g_sid=" + i3GEO.configura.sid
  143 + + "&nomevariavel=heatmap_dados";
  144 + i3GEO.util.scriptTag(p, criaLayer,
  145 + "i3GEO.pluginI3geo.heatmap_script");
123 146 }
124   - p += "?carregajs=" + carregaJs + "&layer=" + camada.name
125   - + "&coluna=" + camada.plugini3geo.parametros.coluna
126   - + "&g_sid=" + i3GEO.configura.sid
127   - + "&nomevariavel=heatmap_dados";
128   - i3GEO.util.scriptTag(p, criaLayer,
129   - "i3GEO.pluginI3geo.heatmap_script");
130 147 },
131   - openlayers : function(camada) {
132   - var p = i3GEO.configura.locaplic
133   - + "/ferramentas/heatmap/openlayers_js.php", carregaJs = "nao", crialayer;
134   - criaLayer = function() {
135   - var heatmap, transformedTestData = { max: 10 , data: [] },
136   - data = heatmap_dados,
137   - datalen = heatmap_dados.length,
138   - nudata = [];
139   - // in order to use the OpenLayers Heatmap Layer we have to transform our data into
140   - // { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}
141   - while(datalen--){
142   - nudata.push({
143   - lonlat: new OpenLayers.LonLat(data[datalen].lng, heatmap_dados[datalen].lat),
144   - count: heatmap_dados[datalen].count
145   - });
146   - }
147   - transformedTestData.data = nudata;
148   - // create our heatmap layer
149   - heatmap = new OpenLayers.Layer.Heatmap(
150   - camada.name,
151   - i3geoOL,
152   - i3geoOL.baseLayer,
153   - {
154   - visible: true,
155   - radius:10,
156   - "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" },
157   - "legend": {
158   - "title": camada.tema,
159   - "position": "bl",
160   - "offset": [5,50]
  148 + openlayers : {
  149 + aplicaPropriedades: function(camada){
  150 + camada.sel = "nao";
  151 + camada.download = "nao";
  152 + camada.AGUARDALEGENDA = false;
  153 + camada.temporizador = "";
  154 + camada.copia = false;
  155 + camada.procurar = false;
  156 + camada.toponimia = false;
  157 + camada.etiquetas = false;
  158 + camada.tabela = false;
  159 + camada.grafico = false;
  160 + camada.destacar = false;
  161 + camada.wms = false;
  162 + camada.classe = "NAO";
  163 + return camada;
  164 + },
  165 + inicia: function(camada) {
  166 + var p = i3GEO.configura.locaplic
  167 + + "/ferramentas/heatmap/openlayers_js.php", carregaJs = "nao", crialayer;
  168 + criaLayer = function() {
  169 + var heatmap, transformedTestData = { max: 10 , data: [] },
  170 + data = heatmap_dados,
  171 + datalen = heatmap_dados.length,
  172 + nudata = [];
  173 + // in order to use the OpenLayers Heatmap Layer we have
  174 + // to
  175 + // transform our data into
  176 + // { max: <max>, data: [{lonlat: <OpenLayers.LonLat>,
  177 + // count:
  178 + // <count>},...]}
  179 + while(datalen--){
  180 + nudata.push({
  181 + lonlat: new OpenLayers.LonLat(data[datalen].lng, heatmap_dados[datalen].lat),
  182 + count: heatmap_dados[datalen].count
  183 + });
  184 + }
  185 + transformedTestData.data = nudata;
  186 + // create our heatmap layer
  187 + heatmap = new OpenLayers.Layer.Heatmap(
  188 + camada.name,
  189 + i3geoOL,
  190 + i3geoOL.baseLayer,
  191 + {
  192 + visible: true,
  193 + radius:10,
  194 + "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" },
  195 + "legend": {
  196 + "title": camada.tema,
  197 + "position": "bl",
  198 + "offset": [5,50]
  199 + }
  200 + },
  201 + {
  202 + isBaseLayer: false,
  203 + opacity: 0.3,
  204 + projection: new OpenLayers.Projection("EPSG:4326")
161 205 }
162   - },
163   - {
164   - isBaseLayer: false,
165   - opacity: 0.3,
166   - projection: new OpenLayers.Projection("EPSG:4326")
167   - }
168   - );
169   - i3geoOL.addLayer(heatmap);
170   - heatmap.setDataSet(transformedTestData);
171   -
172   - heatmap_dados = null;
173   - i3GEO.janela.fechaAguarde("aguardePlugin");
174   - };
175   - if (typeof (HeatmapOverlay) === 'undefined') {
176   - carregaJs = "sim";
  206 + );
  207 + i3geoOL.addLayer(heatmap);
  208 + heatmap.setDataSet(transformedTestData);
  209 + heatmap_dados = null;
  210 + i3GEO.janela.fechaAguarde("aguardePlugin");
  211 + };
  212 + if (typeof (HeatmapOverlay) === 'undefined') {
  213 + carregaJs = "sim";
  214 + }
  215 + p += "?carregajs=" + carregaJs + "&layer=" + camada.name
  216 + + "&coluna=" + camada.plugini3geo.parametros.coluna
  217 + + "&g_sid=" + i3GEO.configura.sid
  218 + + "&nomevariavel=heatmap_dados";
  219 + i3GEO.util.scriptTag(p, criaLayer,
  220 + "i3GEO.pluginI3geo.heatmap_script");
  221 + }
  222 + },
  223 + googleearth: {
  224 + inicia: function(){
  225 + alert("Plugin nao disponivel");
177 226 }
178   - p += "?carregajs=" + carregaJs + "&layer=" + camada.name
179   - + "&coluna=" + camada.plugini3geo.parametros.coluna
180   - + "&g_sid=" + i3GEO.configura.sid
181   - + "&nomevariavel=heatmap_dados";
182   - i3GEO.util.scriptTag(p, criaLayer,
183   - "i3GEO.pluginI3geo.heatmap_script");
184 227 }
185 228 }
186 229 }
187 230 \ No newline at end of file
... ...
ferramentas/heatmap/googlemaps_js.php
  Diff comments   View file @0db9cf8
... ... @@ -27,7 +27,8 @@ include_once($dir.&quot;/../../classesphp/classe_atributos.php&quot;);
27 27  
28 28 $m = new Atributos($map_file,$layer);
29 29 $registros = $m->listaRegistrosXY($coluna, "brasil", "tudo");
30   -$n = count($registros);
  30 +//TODO
  31 +$n = 100;//count($registros);
31 32 $resultado = array();
32 33 if(empty($coluna)){
33 34 foreach($registros as $r){
... ...
ferramentas/heatmap/openlayers_js.php
  Diff comments   View file @0db9cf8
... ... @@ -27,7 +27,8 @@ include_once($dir.&quot;/../../classesphp/classe_atributos.php&quot;);
27 27  
28 28 $m = new Atributos($map_file,$layer);
29 29 $registros = $m->listaRegistrosXY($coluna, "brasil", "tudo");
30   -$n = count($registros);
  30 +//TODO
  31 +$n = 100;//count($registros);
31 32 $resultado = array();
32 33 if(empty($coluna)){
33 34 foreach($registros as $r){
... ...
pacotes/heatmap/src/heatmap-gmaps.js
  Diff comments   View file @0db9cf8
... ... @@ -6,172 +6,171 @@
6 6 * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
7 7 */
8 8  
9   -//cria um layer idiota para poder calcular a projecao
  9 +//i3GeoMapOverlay vem de i3GEO.Interface e e usado para calcular projecao
10 10 //http://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
11   -heatmapFooOverlay.prototype = new google.maps.OverlayView();
12   -heatmapFooOverlay.prototype.onAdd = function() { }
13   -heatmapFooOverlay.prototype.onRemove = function() { }
14   -heatmapFooOverlay.prototype.draw = function() { }
15   -function heatmapFooOverlay() { this.setMap(i3GeoMap); }
16   -var heatmapBarOverlay = new heatmapFooOverlay();
17   -
18   -
19   -function HeatmapOverlay(map, cfg){
20   - var me = this;
21   -
22   - me.heatmap = null;
23   - me.conf = cfg;
24   - me.latlngs = [];
25   - me.bounds = null;
26   - me.setMap(map);
27   - google.maps.event.addListener(map, 'bounds_changed', function() { me.draw() });
  11 +
  12 +function HeatmapOverlay(map, name, cfg) {
  13 + var me = this;
  14 + me.name = name;
  15 + me.heatmap = null;
  16 + me.conf = cfg;
  17 + me.latlngs = [];
  18 + me.bounds = null;
  19 + me.setMap(map);
  20 + google.maps.event.addListener(map, 'bounds_changed', function() {
  21 + me.draw()
  22 + });
28 23 }
29 24  
30 25 HeatmapOverlay.prototype = new google.maps.OverlayView();
31 26  
32   -HeatmapOverlay.prototype.onAdd = function(){
  27 +HeatmapOverlay.prototype.onAdd = function() {
33 28  
34   - var panes = this.getPanes(),
35   - w = this.getMap().getDiv().clientWidth,
36   - h = this.getMap().getDiv().clientHeight,
37   - el = document.createElement("div");
  29 + var panes = this.getPanes(), w = this.getMap().getDiv().clientWidth, h = this
  30 + .getMap().getDiv().clientHeight, el = document.createElement("div");
38 31  
39   - el.style.cssText = "position:absolute;top:0;left:0;width:"+w+"px;height:"+h+"px;";
  32 + el.style.cssText = "position:absolute;top:0;left:0;width:" + w
  33 + + "px;height:" + h + "px;";
40 34  
41   - this.conf.element = el;
42   - panes.overlayLayer.appendChild(el);
  35 + this.conf.element = el;
  36 + panes.overlayLayer.appendChild(el);
43 37  
44   - this.heatmap = h337.create(this.conf);
  38 + this.heatmap = h337.create(this.conf);
45 39 }
46 40  
47   -HeatmapOverlay.prototype.onRemove = function(){
48   - // Empty for now.
  41 +HeatmapOverlay.prototype.onRemove = function() {
  42 + // Empty for now.
49 43 }
50 44  
51   -HeatmapOverlay.prototype.draw = function(){
52   -
53   - var me = this,
54   - overlayProjection = heatmapBarOverlay.getProjection(), //me.getProjection(),
55   - currentBounds = me.map.getBounds();
56   -
57   - if (currentBounds.equals(me.bounds)) {
58   - return;
59   - }
60   - me.bounds = currentBounds;
61   -
62   - var ne = overlayProjection.fromLatLngToDivPixel(currentBounds.getNorthEast()),
63   - sw = overlayProjection.fromLatLngToDivPixel(currentBounds.getSouthWest()),
64   - topY = ne.y,
65   - leftX = sw.x,
66   - h = sw.y - ne.y,
67   - w = ne.x - sw.x;
68   -
69   - me.conf.element.style.left = leftX + 'px';
70   - me.conf.element.style.top = topY + 'px';
71   - me.conf.element.style.width = w + 'px';
72   - me.conf.element.style.height = h + 'px';
73   - me.heatmap.store.get("heatmap").resize();
74   -
75   - if(this.latlngs.length > 0){
76   - this.heatmap.clear();
77   -
78   - var len = this.latlngs.length,
79   - projection = heatmapBarOverlay.getProjection(); //this.getProjection();
80   - d = {
81   - max: this.heatmap.store.max,
82   - data: []
83   - };
84   -
85   - while(len--){
86   - var latlng = this.latlngs[len].latlng;
87   - if(!currentBounds.contains(latlng)) { continue; }
88   -
89   - // DivPixel is pixel in overlay pixel coordinates... we need
90   - // to transform to screen coordinates so it'll match the canvas
91   - // which is continually repositioned to follow the screen.
92   - var divPixel = projection.fromLatLngToDivPixel(latlng),
93   - screenPixel = new google.maps.Point(divPixel.x - leftX, divPixel.y - topY);
94   -
95   - var roundedPoint = this.pixelTransform(screenPixel);
96   -
97   - d.data.push({
98   - x: roundedPoint.x,
99   - y: roundedPoint.y,
100   - count: this.latlngs[len].c
101   - });
102   - }
103   - this.heatmap.store.setDataSet(d);
104   - }
  45 +HeatmapOverlay.prototype.draw = function() {
  46 +
  47 + var me = this, overlayProjection = i3GeoMapOverlay.getProjection(), // me.getProjection(),
  48 + currentBounds = me.map.getBounds();
  49 +
  50 + if (currentBounds.equals(me.bounds)) {
  51 + return;
  52 + }
  53 + me.bounds = currentBounds;
  54 +
  55 + var ne = overlayProjection.fromLatLngToDivPixel(currentBounds
  56 + .getNorthEast()), sw = overlayProjection
  57 + .fromLatLngToDivPixel(currentBounds.getSouthWest()), topY = ne.y, leftX = sw.x, h = sw.y
  58 + - ne.y, w = ne.x - sw.x;
  59 +
  60 + me.conf.element.style.left = leftX + 'px';
  61 + me.conf.element.style.top = topY + 'px';
  62 + me.conf.element.style.width = w + 'px';
  63 + me.conf.element.style.height = h + 'px';
  64 + me.heatmap.store.get("heatmap").resize();
  65 +
  66 + if (this.latlngs.length > 0) {
  67 + this.heatmap.clear();
  68 +
  69 + var len = this.latlngs.length, projection = i3GeoMapOverlay
  70 + .getProjection(); // this.getProjection();
  71 + d = {
  72 + max : this.heatmap.store.max,
  73 + data : []
  74 + };
  75 +
  76 + while (len--) {
  77 + var latlng = this.latlngs[len].latlng;
  78 + if (!currentBounds.contains(latlng)) {
  79 + continue;
  80 + }
  81 +
  82 + // DivPixel is pixel in overlay pixel coordinates... we need
  83 + // to transform to screen coordinates so it'll match the canvas
  84 + // which is continually repositioned to follow the screen.
  85 + var divPixel = projection.fromLatLngToDivPixel(latlng), screenPixel = new google.maps.Point(
  86 + divPixel.x - leftX, divPixel.y - topY);
  87 +
  88 + var roundedPoint = this.pixelTransform(screenPixel);
  89 +
  90 + d.data.push({
  91 + x : roundedPoint.x,
  92 + y : roundedPoint.y,
  93 + count : this.latlngs[len].c
  94 + });
  95 + }
  96 + this.heatmap.store.setDataSet(d);
  97 + }
105 98 }
106 99  
107   -HeatmapOverlay.prototype.pixelTransform = function(p){
108   - var w = i3GEO.parametros.w,//this.heatmap.get("width"),
109   - h = i3GEO.parametros.h; //this.heatmap.get("height");
  100 +HeatmapOverlay.prototype.pixelTransform = function(p) {
  101 + var w = i3GEO.parametros.w, // this.heatmap.get("width"),
  102 + h = i3GEO.parametros.h; // this.heatmap.get("height");
110 103  
111   - while(p.x < 0){
112   - p.x+=w;
113   - }
  104 + while (p.x < 0) {
  105 + p.x += w;
  106 + }
114 107  
115   - while(p.x > w){
116   - p.x-=w;
117   - }
  108 + while (p.x > w) {
  109 + p.x -= w;
  110 + }
118 111  
119   - while(p.y < 0){
120   - p.y+=h;
121   - }
  112 + while (p.y < 0) {
  113 + p.y += h;
  114 + }
122 115  
123   - while(p.y > h){
124   - p.y-=h;
125   - }
  116 + while (p.y > h) {
  117 + p.y -= h;
  118 + }
126 119  
127   - p.x = (p.x >> 0);
128   - p.y = (p.y >> 0);
  120 + p.x = (p.x >> 0);
  121 + p.y = (p.y >> 0);
129 122  
130   - return p;
  123 + return p;
131 124 }
132 125  
133   -HeatmapOverlay.prototype.setDataSet = function(data){
134   -
135   - var me = this,
136   - currentBounds = me.map.getBounds(),
137   - mapdata = {
138   - max: data.max,
139   - data: []
140   - },
141   - d = data.data,
142   - dlen = d.length,
143   - projection = heatmapBarOverlay.getProjection(),//me.getProjection(),
144   - latlng, point;
145   -
146   - me.latlngs = [];
147   -
148   - while(dlen--){
149   - latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
150   -
151   - if(!currentBounds.contains(latlng)) {
152   - continue;
153   - }
154   -
155   - me.latlngs.push({latlng: latlng, c: d[dlen].count});
156   - point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
157   - mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
158   - }
159   - if(me.heatmap){
  126 +HeatmapOverlay.prototype.setDataSet = function(data) {
  127 +
  128 + var me = this, currentBounds = me.map.getBounds(), mapdata = {
  129 + max : data.max,
  130 + data : []
  131 + }, d = data.data, dlen = d.length, projection = i3GeoMapOverlay
  132 + .getProjection(), // me.getProjection(),
  133 + latlng, point;
  134 +
  135 + me.latlngs = [];
  136 +
  137 + while (dlen--) {
  138 + latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
  139 +
  140 + if (!currentBounds.contains(latlng)) {
  141 + continue;
  142 + }
  143 +
  144 + me.latlngs.push({
  145 + latlng : latlng,
  146 + c : d[dlen].count
  147 + });
  148 + point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
  149 + mapdata.data.push({
  150 + x : point.x,
  151 + y : point.y,
  152 + count : d[dlen].count
  153 + });
  154 + }
  155 + if (me.heatmap) {
160 156 me.heatmap.clear();
161   - me.heatmap.store.setDataSet(mapdata);
  157 + me.heatmap.store.setDataSet(mapdata);
162 158 }
163 159 }
164 160  
165   -HeatmapOverlay.prototype.addDataPoint = function(lat, lng, count){
  161 +HeatmapOverlay.prototype.addDataPoint = function(lat, lng, count) {
166 162  
167   - var projection = heatmapBarOverlay.getProjection(),//this.getProjection(),
168   - latlng = new google.maps.LatLng(lat, lng),
169   - point = this.pixelTransform(projection.fromLatLngToDivPixel(latlng));
  163 + var projection = i3GeoMapOverlay.getProjection(), // this.getProjection(),
  164 + latlng = new google.maps.LatLng(lat, lng), point = this
  165 + .pixelTransform(projection.fromLatLngToDivPixel(latlng));
170 166  
171   - this.heatmap.store.addDataPoint(point.x, point.y, count);
172   - this.latlngs.push({ latlng: latlng, c: count });
  167 + this.heatmap.store.addDataPoint(point.x, point.y, count);
  168 + this.latlngs.push({
  169 + latlng : latlng,
  170 + c : count
  171 + });
173 172 }
174 173  
175   -HeatmapOverlay.prototype.toggle = function(){
176   - this.heatmap.toggleDisplay();
  174 +HeatmapOverlay.prototype.toggle = function() {
  175 + this.heatmap.toggleDisplay();
177 176 }
... ...
pacotes/heatmap/src/heatmap-openlayers.js
  Diff comments   View file @0db9cf8
... ... @@ -18,115 +18,134 @@ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
18 18 mapLayer: null,
19 19 // we store the lon lat data, because we have to redraw with new positions on zoomend|moveend
20 20 tmpData: {},
21   - initialize: function(name, map, mLayer, hmoptions, options){
22   - var heatdiv = document.createElement("div"),
23   - handler;
  21 + initialize: function(name, map, mLayer, hmoptions, options){
  22 + var heatdiv = document.createElement("div"),
  23 + handler;
24 24  
25   - OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
  25 + OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
26 26  
27   - heatdiv.style.cssText = "position:absolute;width:"+map.size.w+"px;height:"+map.size.h+"px;";
28   - // this will be the heatmaps element
29   - this.div.appendChild(heatdiv);
30   - // add to our heatmap.js config
31   - hmoptions.element = heatdiv;
32   - this.mapLayer = mLayer;
33   - this.map = map;
34   - // create the heatmap with passed heatmap-options
35   - this.heatmap = h337.create(hmoptions);
  27 + heatdiv.style.cssText = "position:absolute;width:"+map.size.w+"px;height:"+map.size.h+"px;";
  28 + // this will be the heatmaps element
  29 + this.div.appendChild(heatdiv);
  30 + // add to our heatmap.js config
  31 + hmoptions.element = heatdiv;
  32 + this.mapLayer = mLayer;
  33 + this.map = map;
  34 + // create the heatmap with passed heatmap-options
  35 + this.heatmap = h337.create(hmoptions);
36 36  
37   - handler = function(){
38   - if(this.tmpData.max){
39   - this.updateLayer();
40   - }
41   - };
42   - // on zoomend and moveend we have to move the canvas element and redraw the datapoints with new positions
43   - map.events.register("zoomend", this, handler);
44   - map.events.register("moveend", this, handler);
45   - },
46   - updateLayer: function(){
47   - var pixelOffset = this.getPixelOffset(),
48   - el = this.heatmap.get('element');
49   - // if the pixeloffset e.g. for x was positive move the canvas element to the left by setting left:-offset.y px
50   - // otherwise move it the right by setting it a positive value. same for top
51   - el.style.top = ((pixelOffset.y > 0)?('-'+pixelOffset.y):(Math.abs(pixelOffset.y)))+'px';
52   - el.style.left = ((pixelOffset.x > 0)?('-'+pixelOffset.x):(Math.abs(pixelOffset.x)))+'px';
  37 + handler = function(){
  38 + if(this.tmpData.max){
  39 + this.updateLayer();
  40 + }
  41 + };
  42 + handler1 = function(){
  43 + if(this.tmpData.max){
  44 + this.toggle();
  45 + this.updateLayer();
  46 + }
  47 + };
53 48  
54   - this.setDataSet(this.tmpData);
  49 + // on zoomend and moveend we have to move the canvas element and redraw the datapoints with new positions
  50 + //map.events.register("zoomend", this, handler);
  51 + map.events.register("moveend", this, handler);
  52 + this.events.register("visibilitychanged", this,handler1);
  53 + map.events.register(
  54 + "removed",
  55 + this,
  56 + function(){
  57 + if(this.tmpData.max){
  58 + this.destroy();
  59 + }
  60 + });
  61 + },
  62 + updateLayer: function(){
  63 + var pixelOffset = this.getPixelOffset(),
  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
  66 + // otherwise move it the right by setting it a positive value. same for top
  67 + el.style.top = ((pixelOffset.y > 0)?('-'+pixelOffset.y):(Math.abs(pixelOffset.y)))+'px';
  68 + el.style.left = ((pixelOffset.x > 0)?('-'+pixelOffset.x):(Math.abs(pixelOffset.x)))+'px';
  69 + //var p = el.parentNode.style;
  70 + //console.warn(p.display)
  71 + if(this.visibility === true){
  72 + this.setDataSet(this.tmpData);
  73 + }
55 74 },
56   - getPixelOffset: function () {
57   - var o = this.mapLayer.map.layerContainerOrigin,
58   - o_lonlat = new OpenLayers.LonLat(o.lon, o.lat),
59   - o_pixel = this.mapLayer.getViewPortPxFromLonLat(o_lonlat),
60   - c = this.mapLayer.map.center,
61   - c_lonlat = new OpenLayers.LonLat(c.lon, c.lat),
62   - c_pixel = this.mapLayer.getViewPortPxFromLonLat(c_lonlat);
  75 + getPixelOffset: function () {
  76 + var o = this.mapLayer.map.layerContainerOrigin,
  77 + o_lonlat = new OpenLayers.LonLat(o.lon, o.lat),
  78 + o_pixel = this.mapLayer.getViewPortPxFromLonLat(o_lonlat),
  79 + c = this.mapLayer.map.center,
  80 + c_lonlat = new OpenLayers.LonLat(c.lon, c.lat),
  81 + c_pixel = this.mapLayer.getViewPortPxFromLonLat(c_lonlat);
63 82  
64   - return {
65   - x: o_pixel.x - c_pixel.x,
66   - y: o_pixel.y - c_pixel.y
67   - };
  83 + return {
  84 + x: o_pixel.x - c_pixel.x,
  85 + y: o_pixel.y - c_pixel.y
  86 + };
68 87  
69   - },
  88 + },
70 89 setDataSet: function(obj){
71   - var set = {},
  90 + var set = {},
72 91 dataset = obj.data,
73 92 dlen = dataset.length,
74   - entry, lonlat, pixel;
  93 + entry, lonlat, pixel;
75 94  
76 95 set.max = obj.max;
77 96 set.data = [];
78 97 // get the pixels for all the lonlat entries
79   - while(dlen--){
80   - entry = dataset[dlen],
81   - lonlat = entry.lonlat.clone().transform(this.projection, this.map.getProjectionObject()),
82   - pixel = this.roundPixels(this.getViewPortPxFromLonLat(lonlat));
83   -
84   - if(pixel){
85   - set.data.push({x: pixel.x, y: pixel.y, count: entry.count});
86   - }
87   - }
88   - this.tmpData = obj;
89   - this.heatmap.store.setDataSet(set);
  98 + 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 +
  103 + if(pixel){
  104 + set.data.push({x: pixel.x, y: pixel.y, count: entry.count});
  105 + }
  106 + }
  107 + this.tmpData = obj;
  108 + this.heatmap.store.setDataSet(set);
90 109 },
91 110 // we don't want to have decimal numbers such as xxx.9813212 since they slow canvas performance down + don't look nice
92 111 roundPixels: function(p){
93   - if(p.x < 0 || p.y < 0){
94   - return false;
95   - }
96   -
97   - p.x = (p.x >> 0);
98   - p.y = (p.y >> 0);
99   -
100   - return p;
  112 + if(p.x < 0 || p.y < 0){
  113 + return false;
  114 + }
  115 +
  116 + p.x = (p.x >> 0);
  117 + p.y = (p.y >> 0);
  118 +
  119 + return p;
101 120 },
102 121 // same procedure as setDataSet
103 122 addDataPoint: function(lonlat){
104   - var pixel = this.roundPixels(this.mapLayer.getViewPortPxFromLonLat(lonlat)),
105   - entry = {lonlat: lonlat},
106   - args;
  123 + var pixel = this.roundPixels(this.mapLayer.getViewPortPxFromLonLat(lonlat)),
  124 + entry = {lonlat: lonlat},
  125 + args;
  126 +
  127 + if(arguments.length == 2){
  128 + entry.count = arguments[1];
  129 + }
107 130  
108   - if(arguments.length == 2){
109   - entry.count = arguments[1];
110   - }
  131 + this.tmpData.data.push(entry);
111 132  
112   - this.tmpData.data.push(entry);
113   -
114   - if(pixel){
115   - args = [pixel.x, pixel.y];
  133 + if(pixel){
  134 + args = [pixel.x, pixel.y];
116 135  
117   - if(arguments.length == 2){
118   - args.push(arguments[1]);
  136 + if(arguments.length == 2){
  137 + args.push(arguments[1]);
  138 + }
  139 + this.heatmap.store.addDataPoint.apply(this.heatmap.store, args);
119 140 }
120   - this.heatmap.store.addDataPoint.apply(this.heatmap.store, args);
121   - }
122 141  
123 142 },
124 143 toggle: function(){
125 144 this.heatmap.toggleDisplay();
126 145 },
127 146 destroy: function() {
128   - // for now, nothing special to do here.
129   - OpenLayers.Layer.Grid.prototype.destroy.apply(this, arguments);
130   - },
  147 + // for now, nothing special to do here.
  148 + OpenLayers.Layer.Grid.prototype.destroy.apply(this, arguments);
  149 + },
131 150 CLASS_NAME: "OpenLayers.Layer.Heatmap"
132 151 });
... ...