如何让deck.gl的MVTLayer的onHover悬停事件正常生效？

问题原因及修复方案 #

你遇到的onHover无响应是几个常见的deck.gl MVTLayer配置坑导致的，可按以下步骤排查修复：

• 缺少拾取容差配置
  你当前设置的点半径仅2px、线宽最细只有1px，鼠标很难精准命中要素，自然触发不了hover事件，而点击操作因为会停留更久，更容易命中所以可以正常触发。
  解决：在MVTLayer配置中添加pickTolerance: 8（单位为像素，可根据需要调整），扩大拾取响应范围。
• 全局关闭stroke导致线要素无法拾取
  你显式配置了stroked: false，会关闭所有子图层的描边渲染，对应道路等线类型的要素既不会显示，也无法被拾取。
  解决：
  1. 要么删除全局stroked: false配置，默认会对类型为线的要素开启描边
  2. 要么通过子图层回调针对不同要素类型单独配置stroke开关
• 回调触发机制的认知问题
  deck.gl的图层onHover回调默认仅在拾取到的要素发生变化时触发：比如从空白移到要素上、从A要素移到B要素上才会执行，悬停在同一要素上不动、在空白区域移动都不会触发，容易误以为事件没响应。
  解决：如果需要任何鼠标移动都触发回调，可以把onHover配置移到外层<DeckGL>组件的属性上，全局监听 hover 事件。

你可以先修改为下方的测试配置验证效果：

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: 4, // 适当放大点半径方便测试
  pointRadiusUnits: "pixels",
  getLineWidth: (f) => {
    switch (f.properties.class) {
      case "street":
        return 6;
      case "motorway":
        return 10;
      default:
        return 2;
    }
  },
  maxZoom: 14,
  minZoom: 0,
  pickTolerance: 8, // 新增拾取容差
  onHover: (info) => console.log("Hover", info), // 先打印全量info确认事件触发
  onClick: (info) => console.log("Click", info.object),
  pickable: true
});

export default function App() {
  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={[layer]}
    ></DeckGL>
  );
}

内容的提问来源于stack exchange，提问作者Franz Thomsen