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

Question

我试图禁用scrollZoom在我的DeckGL组件。然而，我很难理解将controller传递给这些对象的文档。为了简洁起见，我目前的实现简化为:

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>
</>

上面的代码返回一个静态映射。我希望代码映射能让你平移而不是滚动。

是否有一个示例或额外的文档来更好地理解这个实现?

Answer 1

好的，所以Deck是DeckGL的非react风味。为了适应文档中的示例，您必须将控制器prop传递给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>

line changed:controller={{ scrollZoom: false }}