Question

deck.gl（mapbox）staticmap不调整大小 - 覆盖屏幕上的所有内容

2019-08-10

2135

html reactjs mapbox deck.gl

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

尝试调整地图所在的 div 的大小均失败： margin-top、height 等。

该类名为 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 。

任何帮助都值得赞赏，并乐于详细说明。干杯！

Answer 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 和 top css 样式来移动画布。但是，调整画布大小应该不会出现任何问题，请参阅下面有效的代码片段。

<DeckGL width={width} height={height}></DeckGL>