es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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>
  );
}
Tags:  

Answer

  1. Avatar for 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:

    • Los datos pasados a la capa pueden no contener objetos con geometría que se puedan activar con el hover.
    • El cursor del ratón puede que no esté pasando por encima de ninguna geometría en la capa.
    • Puede que haya algún otro controlador de eventos que esté interfiriendo con el evento onHover de la capa (por ejemplo, previniendo la propagación).

    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.

Comments are closed.