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

【问题标题】：Mapbox: Add controller to Deck.gl componentMapbox：将控制器添加到 Deck.gl 组件
【发布时间】：2021-02-22 22:40:17
【问题描述】：

我正在尝试在我的 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>
    </>

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

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

【问题讨论】：

标签： reactjs mapbox mapbox-gl-js deck.gl react-map-gl

【解决方案1】：

好的，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 }}

【讨论】：