调整铯查看器的大小答案

【问题标题】：Resize Cesium viewer调整铯查看器的大小
【发布时间】：2018-12-15 00:28:09
【问题描述】：

目前正在使用 Cesium 和 Bootstrap 开发一个 Webapp。

问题在于 Cesium 查看器无法调整大小。我发现将其限制为 50% 的唯一解决方案是 css 中的overflow: hidden;。你会明白这会导致不必要的资源使用，因为我们正在做一个简单的缓存错误。

任何调整铯查看器大小的线索？

  var cesiumContainer = document.getElementById("cesiumContainer");

  var ellipsoid = Cesium.Ellipsoid.WGS84;

  var viewer = new Cesium.Viewer("cesiumContainer", {
    sceneMode: Cesium.SceneMode.SCENE3D,
    infoBox: false,
    geocoder: false,
    timeline: false,
    animation: false,
    homeButton: false,
    scene3DOnly: true,
    baseLayerPicker: false,
    sceneModePicker: false,
    fullscreenButton: false,
    projectionPicker: false,
    selectionIndicator: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false
  });

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang='en'>

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cesiumjs.org/releases/1.11/Build/Cesium/Widgets/widgets.css">

    <script src="http://cesiumjs.org/releases/1.11/Build/Cesium/Cesium.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </head>

  <body>

    <div class="container-fluid">
      <div id="cesiumContainer"></div>

      <div class="col">
        This must take 50% of height.
      </div>

    </div>

  </body>

</html>

【问题讨论】：

当您在问题中将其大小调整为 50% 时，我对您提到的“不可调整大小”感到困惑。你的意思是它不会自动调整大小？没错，但您可以使用 Flex Box 等外部结构来控制这种自动调整大小。
或者你可以把它放在旧的 HTML 表格中，它们仍然有一些很好的旧尺寸选项。但真正现代的 CSS 应该能够做任何需要的事情，我想我不清楚这里需要什么。
实际上，Cesium 查看器似乎有一个固定的高/宽比。因此，由于它首先需要划分宽度，因此它不尊重 50% 的高度条件。我需要溢出：隐藏画布以限制它，但这不是一个可行的解决方案。
由于隐藏命令会隐藏部分复杂的 3D 模型，问题是这可能会导致资源的过度使用...
这很奇怪。地球不应该有任何固定的高/宽比。您可以在某处发布完整的工作示例吗？

标签： css bootstrap-4 cesium

【解决方案1】：

Responsive DIVs in CesiumViewer [CesiumJS]

正如我在这里所说的，我有一个非常相似的问题，使用 reactjs，你可以使用 cesium 作为一个反应组件，并根据浏览器大小呈现 cesium 映射及其大小。

【讨论】：

问题是我不想让 Cesium 全尺寸而是部分。此外，您的回答仅指向另一个尚未成功回答的问题。
抱歉不够清楚，为了有一个带有铯查看器的部分窗口，我选择在我的应用程序中使用 react js，这样我不仅能够给出我想要的大小能够更轻松地与铯组件交换数据