javascript - 没有 React 但有 webpack 的 Deck.gl 不会呈现指定的容器

Question

JS文件看起来像这样

import { Deck } from '@deck.gl/core';
const HTMLcontainer = document.getElementById('test');
const deck = new Deck({
    container: HTMLcontainer,
    // ... etc
});

然后我将哈巴狗用于 HTML 引擎

body
        h1 deck.gl
        div#test(class='test')

可视化得到正确渲染，但不在体内，<div id='test'></div>但始终在体内。

有人知道在通过 webpack 导入 deck.gl 但不使用 React 时这是否可行？还是有其他问题？

Answer 1

找到了解决方案。

这些图层不是放置在容器中，而是放置在画布中。该container属性是为地图保留的。

不同的是这条线

canvas: 'deckgl',

完整的解决方案：略有不同的 HTML (Pug)

div#viz
    canvas#deckgl

一些 CSS

#viz {
  width: 70vh;
  height: 70vw;
  border: 1px solid slategray;
  overflow: hidden;
  position: relative;
}

位置很重要，因为画布有position: absolute

最后是 JS

const HTMLcontainer = document.getElementById('viz');
const w = HTMLcontainer.offsetWidth;
const h = HTMLcontainer.offsetHeight;

const deck = new Deck({
    canvas: 'deckgl',
    width: w,
    height: h,
    // etc ...
});

现在，deck.gl 正在渲染我可以放置在我想要的位置的指定画布。