在 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 React from 'react';
import DeckGL from 'deck.gl';
import StaticMap, { NavigationControl } from 'react-map-gl';
const initialViewState = {
  longitude: -1.6362,
  latitude: 53.8321,
  zoom: 10,
  pitch: 55,
  bearing: 0,
}

export default class App extends React.Component {

  render() {
    return (
      <DeckGL
        //changing viewport is another question's code.
        initialViewState={initialViewState}>
        <StaticMap>
          <div className='mapboxgl-ctrl-bottom-right'>
            <NavigationControl 
              onViewportChange={viewport => this.setState({ viewport })} />
          </div>
        </StaticMap>
      </DeckGL>
    );
  }
}

这是完整的干净代码。出于某种原因 codesandbox.io 没有找到 deck.gl 添加为依赖项。将创建一个基本的回购协议并link它在这里。

在 React 中带有控制器按钮的基本 DeckGL 地图

Basic DeckGL map with controller buttons in React

deck.gl

react-map-gl