Deck.gl 没有 React 但有 webpack 没有渲染指定的容器

Question

JS 文件如下所示

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

然后我将 pug 用于 HTML 引擎

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

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

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

Answer 1

找到解决方案。

层没有放在容器中，而是在canvas中。 container 属性为地图保留。

区别在于这一行

canvas: 'deckgl',

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

div#viz
    canvas#deckgl

一些CSS

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

位置很重要，因为 canvas 有 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 正在渲染指定的 canvas，我可以将其放置在我想要的位置。

Deck.gl 没有 React 但有 webpack 没有渲染指定的容器

Deck.gl without React but with webpack is not rendered the specified container

javascript

deck.gl