Материал интерфейса: палуба гл покрывает сетку - PullRequest
Новая
       28

Материал интерфейса: палуба гл покрывает сетку

0 голосов
/ 28 марта 2019

Я работаю с React и Material-UI. Я хочу разделить код на две колонки. В одном из них я хочу сделать карту, используя deck.gl. Очевидно, deck.gl отображается в полноэкранном режиме и охватывает весь экран. Я даже пытался установить атрибуты width = {80} и height = {80} для компонента DeckGL, но он все еще покрывает остальную часть страницы.

App.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;

Map.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;

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

У меня была такая же проблема, проблема в том, что deck.gl по умолчанию имеет ширину 100% и высоту и абсолютную позицию 100%, поэтому он отображается поверх вашей сетки, что я сделал, я вручную переписал правила стиля deck.gl вмое css с правилом! Important или вторым вариантом, вы можете поместить deck.gl в другой div и присвоить этому div высоту, потому что deck использует 100% своих родительских высоты и ширины

0 голосов
/ 28 марта 2019

9 Попробуйте это. 

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