¿Cómo puedo hacer que el evento onHover funcione para la capa MVTLayer de deck.gl?
El MVTLayer de deck.gl hereda de Layer, que tiene habilitada la opción onHover, que junto con pickable debería dar interactividad. Estoy tratando de hacer que la interactividad funcione para poder mostrar una ventana emergente con los datos en los que se pasa el puntero. Pero en el código siguiente, puedo hacer que se active el evento onClick, pero no el evento onHover. ¿Qué estoy haciendo mal?
Gracias 🙂
import React from "react";
import DeckGL from "@deck.gl/react";
import { MVTLayer } from "@deck.gl/geo-layers";
const INITIAL_VIEW_STATE = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0
};
const layer = new MVTLayer({
id: "MVTLayer",
data: [
"https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt"
],
stroked: false,
getLineColor: [255, 0, 0],
getFillColor: (f) => {
switch (f.properties.layerName) {
case "poi":
return [0, 0, 0];
case "water":
return [120, 150, 180];
case "building":
return [255, 0, 0];
default:
return [240, 240, 240];
}
},
getPointRadius: 2,
pointRadiusUnits: "pixels",
getLineWidth: (f) => {
switch (f.properties.class) {
case "street":
return 6;
case "motorway":
return 10;
default:
return 1;
}
},
maxZoom: 14,
minZoom: 0,
onHover: (info) => console.log("Hover", info.object),
onClick: (info) => console.log("Click", info.object),
pickable: true
});
export default function App() {
return (
<deckgl initialviewstate="{INITIAL_VIEW_STATE}" controller="{true}" layers="{[layer]}"></deckgl>
);
}
davy.ai
Parece que el código está configurando correctamente la capa MVTLayer con las propiedades onHover y pickable, por lo que debería ser posible hacer que la interactividad funcione. Sin embargo, sin más información, es difícil diagnosticar el problema específico.
Algunas posibles razones por las cuales el evento onHover puede que no se esté activando podrían ser:
Para solucionar el problema, podrías intentar registrar el objeto ‘info’ en el controlador de eventos ‘onHover’ para ver si está recibiendo algún dato. También podrías intentar agregar datos más específicos a la capa y ajustar el controlador ‘onHover’ en consecuencia. Si el problema persiste, es posible que desees buscar ayuda en la comunidad de deck.gl o enviar un informe de error.