Processing math: 100%

1 votos

Mostrar interactivamente los valores de una capa de mapa de calor leaflet.js

En este ejemplo de la herramienta heatmap.js, veo cómo se devuelven los valores del mapa de calor utilizando heatmapINstance.getValueAt():

  demoWrapper.onmousemove = function(ev) {
  var x = ev.layerX;
  var y = ev.layerY;
  // getValueAt gives us the value for a point p(x/y)
  var value = heatmapInstance.getValueAt({
    x: x,
    y: y
  });
  tooltip.style.display = 'block';
  updateTooltip(x, y, value);
};

También veo que se crea una instancia de mapa de calor, el "heatmapInstance" sobre el que estamos usando getValueAt():

var heatmapInstance = h337.create({
  container: document.querySelector('.heatmap'),
  // onExtremaChange will be called whenever there's a new maximum or minimum
  onExtremaChange: function(data) {
    updateLegend(data);
  }
});

He creado una capa de mapa de calor utilizando el plugin leaflet-heatmap de heatmap.js (ver imagen inferior), ¿cómo podría mostrar el valor de mi capa de mapa de calor en la ubicación del cursor? enter image description here

0 votos

Todo lo que necesitas está en el ejemplo al que te refieres. ¿Qué has probado? ¿Qué no ha funcionado?

0 votos

Hola @ANimator120: Yo también estoy usando heatmap.js + leaflet-heatmap.js. Esto ha sido un tiempo, pero 'm preguntándose si usted descubierto esto? Para mí, el obstáculo es conseguir los valores x, y del lienzo heatmap en {'x: x', y: y}. lyr = new HeatmapOverlay(cfg).addTo(map); lyr.setData(data); map. on("mousemove", function (e) { pointval = lyr._heatmap.getValueAt({ x: x , y: y}) }; Estos valores x e y para el canvas no son los valores e.layerPoint.x o e.containerPoint.x. ¿Alguna idea? Gracias

0 votos

@PDash Creo que desistí de esto, básicamente por el problema que describes. Realmente creo que ni siquiera llegué tan lejos como has llegado tú, pero creo que se podría encontrar una solución indagando en la forma en que el leaflet-heatmap.js trata las coordenadas de los mapas y el sistema canvas. En el código para el mapa de calor, su debe haber algún tipo de traducción entre los dos. ¡Mucha suerte, y hazme saber si lo averiguas!

2voto

MrsHaar Puntos 33

La parte de visualización del mapa de calor. Uso Leaflet v 1.4.0

var map = L.map('map'); // this is your Leaflet map element; add your init options
map.createPane('heatPane');
lyrHEAT = new HeatmapOverlay(cfg).addTo(map);
lyrHEAT['overlayPane'] = 'heatPane'; // this is critical (I can explain more if needed)
lyrHEAT.setData(yourData);

La parte de visualización de valores

var heatPane = map.getPanes('heatPane').overlayPane; // access the canvas
// now, use mousemove on pane; the leaflet map.on("mousemove", function (e){}) won't help
heatPane.onmousemove = function (e) { 
var display_val = lyrHEAT._heatmap.getValueAt({
    x: e.layerX,
    y: e.layerY
});
 // display wherever you like the 'display_val' parameter, either as tooltip or in a div
};

Salud

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X