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?
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!
0 votos
@ANimator120: Hola, gracias. Creo que lo he solucionado pero ha sido un coñazo (básicamente indagando desde que puse el comentario anterior). Soy novato en esto de los mapas de calor. El truco creo que es trabajar con leaflet panes para acceder al lienzo y encontrar los puntos x e y. Y, nada que ver con la biblioteca leaflet-heatmap.js. Voy a publicar una respuesta en breve. Saludos