visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.22k stars 2.08k forks source link

[Bug]DeckGLOverlay中onViewStateChange失效,无法监听图层变化 #9145

Closed tzbcf closed 1 month ago

tzbcf commented 1 month ago

Description

import { Map as GisMap, NavigationControl, useControl } from 'react-map-gl/maplibre'; const DeckGLOverlay = (props: DeckGLProps) => { const overlay = useControl(() => new DeckOverlay(props)); overlay.setProps(props); return null; };
<GisMap initialViewState={viewMapState} minZoom={3} maxZoom={17} mapStyle={INIT_MAP_STYLE}

<DeckGLOverlay layers={layers} viewState={viewMapState} controller={true} getTooltip={getTooltip} onClick={eventClick} onViewStateChange={onViewStateChange} / interleaved/ /> <NavigationControl position='top-left' />

onViewStateChange在初始化时进入了函数,后续图层缩放并不会触发函数;

但是下面的代码: <DeckGL views={MAP_VIEW} layers={layers} initialViewState={INITIAL_VIEW_STATE} controller={true} onViewStateChange={onViewStateChange} getTooltip={getTooltip}

onViewStateChange在图层缩放的时候能触发,但是NavigationControl 点击失效,无法触发

Flavors

Expected Behavior

我期望NavigationControl能控制图层,并且onViewStateChange能监听图层变化

Steps to Reproduce

Environment

Logs

tzbcf commented 1 month ago
      <Map
                    initialViewState={viewMapState}
                    minZoom={3}
                    maxZoom={17}
                    mapStyle={INIT_MAP_STYLE}
                >
                    <DeckGLOverlay
                        layers={layers}
                        viewState={viewMapState}
                        controller={true}
                        getTooltip={getTooltip}
                        onClick={eventClick}
                        onViewStateChange={onViewStateChange}
                        /* interleaved*/ />
                    <NavigationControl
                        position='top-left'
                    />
                    <CustomControls onCustomAction={handleCustomAction} />
                </Map>  这段代码NavigationControl能控制图层缩放,onViewStateChange只会在初始化后进入,后面图层缩放监听不到
tzbcf commented 1 month ago
  <DeckGL
    views={MAP_VIEW}
    layers={layers}
    initialViewState={INITIAL_VIEW_STATE}
    controller={true}
    onViewStateChange={onViewStateChange}
    getTooltip={getTooltip}
  >
    <Map reuseMaps mapStyle={mapStyle} />
    <NavigationControl position='top-left' />
  </DeckGL>这段代码onViewStateChange能一直监听,但是NavigationControl 无法点击。 
tzbcf commented 1 month ago

deck.gl@8.9.0; maplibre-gl@3.0.0 react-map-gl@7.1.0

Pessimistress commented 1 month ago

When you use MapboxOverlay as a Mapbox control, Deck does not handle any user input. You should listen to the Map component's onMove instead.

Learn about the difference between the two patterns here: https://deck.gl/docs/developer-guide/base-maps/using-with-mapbox#integration-modes