Mapbox：将控制器添加到 Deck.gl 组件

如何解决Mapbox：将控制器添加到 Deck.gl 组件

我正在尝试在我的 DeckGL 组件中禁用 scrollZoom。但是，我很难理解将控制器传递给这些对象的 documentation。为简洁起见，我当前的实现是：

  new Deck({
    controller: { scrollZoom: false },initialViewState: {
      latitude: 42.508108,longitude: -71.508701,zoom: 10,maxZoom: 18,minZoom: 4,pitch: 45,bearing: 0,},});

return (
    <>
      <DeckGL
        ContextProvider={MapContext.Provider}
        controller={true}
        effects={effects}
        getTooltip={getTooltip}
        initialViewState={INITIAL_VIEW_STATE_AREA}
        layers={layers}
        onWebGLInitialized={onInitialized}
      >
        <InteractiveMap
          reuseMaps
          ref={mapRef}
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_TOKEN}
        />
      </DeckGL>
    </>

上面的代码返回一个静态地图。我希望代码图能让您平移但不能滚动。

是否有示例或其他文档可以更好地理解此实现？

解决方法

好的，所以 Deck 是 DeckGL 的非 React 风格。要修改文档中的示例，您必须将控制器道具传递给 DeckGL 组件。因此，例如：

 <DeckGL
        ContextProvider={MapContext.Provider}
        controller={{ scrollZoom: false }}
        effects={effects}
        getTooltip={getTooltip}
        initialViewState={INITIAL_VIEW_STATE_AREA}
        layers={layers}
        onWebGLInitialized={onInitialized}
      >
        <InteractiveMap
          reuseMaps
          ref={mapRef}
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>

这一行改变了：controller={{ scrollZoom: false }}