0

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

如果我在deck.gl 上使用react-map-gl，deck.gl 图层不会收到我的鼠标事件，如果我反过来，react-map-gl 图层不会收到事件。

这是我正在使用的层/叠加层的简化列表（自下而上）：

  1. react-map-gl 底图（使用 MapGL 反应组件）
  2. 带有 PathLayer 的 deck.gl 用于显示我航行过的轨迹
  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 都允许交互？

4

0 回答 0