我怎样才能让 Cesium 与 flexbox 布局一起工作？

Question

我在 this jsfiddle 中有一个布局示例。

如果您运行 fiddle 并单击 Leaflet 按钮，一切都很好（与 google 也很好，但我不能post 我的 api 密钥)。

如果您单击 Cesium，它似乎不尊重分配给它的 flexbox space。知道如何让 Cesium 表现出来吗？

请注意，您可能需要稍微调整浏览器的大小才能显示问题

Answer 1

这是因为 flexbox 试图保持 canvas' 纵横比有些奇怪（在 Cesium 的情况下，这是不必要的，因为它只会在下一帧重新渲染）。

这是一个解决方法。将 jsFiddle CSS 的顶部编辑为如下所示：

  html {
      height: 100%;
  }
  #cesiumContainer, .leaflet-container {
      position: absolute;
      width: 100%;
      height: 100%;
  }

然后，向您现有的 .app .data .map 块添加一条新规则：

  .app .data .map {
      /* keep existing rules here */
      position: relative;
  }

这是 modified jsFiddle。

这建立了一个 parent/child 关系，其中 parent flexbox 元素获得了 position: relative，这意味着任何 "absolute" children它将绝对定位在它的坐标内（使它们有效地相对于它）。本例中的 child 是 #cesiumContainer，我们现在已经对其进行了绝对定位，与其说是为了获得坐标系的绝对性质，不如说是为了获得 [=29= 的大小的副作用] 元素不会影响它们周围的文档流。这意味着 Cesium 的 canvas 元素不能推动 flexbox，它必须完全符合它，这就是我们想要的。

我怎样才能让 Cesium 与 flexbox 布局一起工作？

How can i get Cesium to work with a flexbox layout?

javascript

css

flexbox

cesium