5

我正在尝试将基本的 deck.gl（mapbox 静态地图）添加到 react 项目中——我可以这样做；但是，一旦加载地图，它就会占据整个页面，并且任何其他信息都隐藏在地图后面。例如，我在地图上方有一些文本<p>，当它应该显示在地图上方时，它被隐藏在地图后面。

任何调整地图所在 div 大小的尝试均未成功： margin-top, height etc..

该类称为 DglMap

class DglMap extends Component {
  render() {
    const layers = [];
    return (
      <div className="dglMapStyle">
        <DeckGL
          initialViewState={initialViewState}
          controller={true}
          layers={layers}
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}

添加到名为 Content 的类

class Content extends Component {
  state = {};
  render() {
    return (
      <div>
        <BaseMap />
      </div>
    );
  }
}

添加到 app.js

function App() {
  return (
    <Router>
      <div>
        <SomeText />
        <Route exact path="/" component={MainContent} />
      </div>
    </Router>
  );
}
export default App;

文件SomeText返回<div><p>SomeText</p></div>

预期结果是地图显示在文本下方而不显示在文本上方。在另一种情况下，我可能想将地图调整为特定大小；例如500x500px。

任何帮助表示赞赏并乐意详细说明。干杯!

4

1 回答 1

1

在设置画布宽度和高度的Deck.Gl部分，似乎有这样的代码：

    if (width || width === 0) {
      width = Number.isFinite(width) ? `${width}px` : width;
      this.canvas.style.width = width;
    }

    if (height || height === 0) {
      height = Number.isFinite(height) ? `${height}px` : height;
      this.canvas.style.position = 'absolute';
      this.canvas.style.height = height;
    }

无论宽度和高度如何，它都会添加绝对定位，这可能会给您带来一些问题。尝试添加left和topcss 样式来移动画布。然而，调整画布大小应该没有任何问题，请参阅下面的代码片段。

<DeckGL width={width} height={height}></DeckGL>
于 2019-08-27T09:14:35.273 回答