我正在尝试使DeckGL基本示例正常工作。
该如何查看下图所示的控制按钮?只是花了太多时间,所以决定问问SO社区。 p>
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。
答案 0 :(得分:0)
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>
应该工作。