Question

当前正在使用Cesium和Bootstrap开发Webapp。

问题是Cesium查看器无法调整大小。在CSS中，我发现将其限制为窗口的50％的唯一解决方案是overflow: hidden;。您将了解，这可能导致不必要的资源使用，因为我们正在做一个简单的缓存错误。

有任何提示可以调整Cesium查看器的大小吗？

  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>

Answer 1

Responsive DIVs in CesiumViewer [CesiumJS]

正如我在这里所说的那样，我有一个非常相似的问题，使用reactjs可以将铯用作反应组件，并根据浏览器大小来绘制铯图及其大小。

调整铯铯查看器的尺寸

1 个答案: