Я пишу веб-приложение с использованиемact-map-gl и deck.gl, и моя задача - правильно настроить события мыши.
Если я использую response-map-gl в верхней части deck.gl, слои deck.gl не получают события моей мыши, а если я делаю это наоборот, слои response-map-glне получить события.
Вот упрощенный список слоев / оверлеев, которые я использую (снизу вверх):
- базовая карта response-map-gl (с использованием компонента реакции MapGL)
- deck.gl с PathLayer для отображения маршрута, по которому я плавал
- act-map-gl Наложение Canvas для отображения маркера местоположения парусника, включая скорость лодки, скорость ветра и т. Д.
- act-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 получит все нормально, но я больше не могу нажимать на миниатюры изображений.
Каким будет правильный способ собрать это так, чтобы и response-map-gl, и deck.gl обеспечили интерактивность?