带有deck.gl图层和react-map-gl叠加层的鼠标/触摸事件问题

Question

我正在使用react-map-gl和deck.gl编写一个Web应用程序，而我的挑战是正确设置鼠标事件。

如果我在deck.gl顶部使用react-map-gl，则deck.gl层不会接收到鼠标事件，反之，如果我这样做，react-map-gl层将不会接收到鼠标事件事件。

这是我正在使用的层/覆盖的简化列表（从下至上）：

1. react-map-gl基本地图（使用MapGL react组件）
2. deck.gl和一个PathLayer，用于显示我航行的路线
3. react-map-gl画布叠加层，用于显示帆船位置标记，包括船速，风速等
4. react-map-gl HTML叠加层，用于将可点击的图像缩略图放置在轨道上

<MapGL
    {...this.state.viewState}
    onViewportChange={viewport =>
        this.setState({ viewState: viewport, panning: true })
    }
    mapboxApiAccessToken="...">
    <DeckGL
        viewState={this.state.viewState}
        controller={false}
        layers={this.getLayers()}
    />

    <CanvasOverlay redraw={this._redrawCanvasOverlay} />

    <HTMLOverlay
        redraw={this._redrawHTMLOverlay}
    />
    ...

如果按上述方式排列它们，可单击的图像缩略图会起作用，但是deck.gl PathLayer不会收到任何鼠标信息。

如果我反过来又将MapGL作为DeckGL的子代，则PathLayer可以使事件正常，但是我无法再单击图像缩略图。

将其组合在一起以使react-map-gl和deck.gl都允许交互性的正确方法是什么？