在React中具有控制器按钮的基本DeckGL映射

Question

我正在尝试使DeckGL基本示例正常工作。

该如何查看下图所示的控制按钮？只是花了太多时间，所以决定问问SO社区。

import React from 'react';
import DeckGL from 'deck.gl';
import { StaticMap } from 'react-map-gl';

// Initial viewport settings
const initialViewState = {
    longitude: 170.6362,
    latitude: -44.1321,
    zoom: 6,
    pitch: 55,
    bearing: 0
};
const MAPBOX_ACCESS_TOKEN = 'pk.xyz';

export default class App extends React.Component {

    render() {
        return (
            <DeckGL
                controller={true}
                initialViewState={initialViewState}

            >
                <StaticMap
                    mapStyle="mapbox://styles/mapbox/dark-v9"
                    mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
            </DeckGL>
        );
    }
}

希望能帮助发现问题的人，这是Deck GH问题中的ticket。

Answer 1

import { StaticMap, NavigationControl } from 'react-map-gl';

<DeckGL
    ref={ref => {
        // save a reference to the Deck instance
        this.deck = ref && ref.deck;
    }}                
    initialViewState={initialViewState}
    controller={MapController}
    layers={[layer]}
    >
        <StaticMap
            onLoad={this._onMapLoad}
            ref={ref => {
            // save a reference to the mapboxgl.Map instance
            this.map = ref && ref.getMap();
            }}
            mapStyle={'mapstyle'}
            mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} >

            <div className='mapboxgl-ctrl-top-right'>
                <NavigationControl 
                onViewportChange={viewport => this.setState({ viewport })}
            />
            </div>
    </StaticMap>
</DeckGL>

应该工作。