reactjs - 材质 UI：deck gl 覆盖网格

Question

我正在使用 React 和 Material-UI。我想将代码分成两列。在其中之一中，我想使用deck.gl 渲染地图。显然，deck.gl 是全屏渲染的，它覆盖了整个屏幕。我什至尝试设置属性width={80}和height={80}DeckGL 组件，但它仍然覆盖了页面的其余部分。

应用程序.js

import React, { Component } from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import Map from './Map.js';

class App extends Component {

  render() {
    
    return (
      <div >
      <Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={9}>
          <Map/>
        </Grid>
       
      </Grid>
      </div>
        
    );
  }
}

export default App;

地图.js

/// app.js
import React from 'react';
import DeckGL, {PolygonLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';

// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWZvZ2xpbyIsImEiOiJjamt2N2Z2aWkwNXJxM3BxNXo4Mmt1a3MwIn0.IqS5iv1ZmLht4hm-N0cDYg';

// Initial viewport settings
const initialViewState = {
  longitude: -87.630259,
  latitude: 41.873400,
  zoom: 13,
  pitch: 35,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];

class Map extends React.Component {
  
  render() {
    const layers = [
    ];

    return (
      <DeckGL
        initialViewState={initialViewState}
        controller={true}
        layers={layers}
      >
        <StaticMap 
          mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} 
          />
      </DeckGL>
    );
  }
}

export default Map;

Answer 1

我有同样的问题，问题是deck.gl默认是100％宽度和100％高度和绝对位置，所以它显示在你的网格顶部，我做了什么我手动覆盖了我的css中的deck.gl样式规则'!important' 规则或第二个选项，您可以将 deck.gl 放在另一个 div 中并为该 div 指定高度，因为 Deck 使用 100% 其父级高度和宽度

Answer 2

9试试这个。

<Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={3} lg={9}>
          <Map/>
        </Grid>

Answer 3

您只需要为 div 指定高度和宽度，并将该 deckGL 映射渲染到该 div 中。它会相应地向您显示。因为 deck 始终遵循其父属性。

Answer 4

我使用 react-container-dimensions 来解决这个问题。

        <Grid key={value} item>
          <Paper className={classes.paper}>
            <ContainerDimensions>
              <Map />
            </ContainerDimensions>
          </Paper>
        </Grid