Question

这些是我正在使用的部分：Angular 1.5.8，Bootstrap 3.3.7，Cesium 1.27.0，Firefox 49（我还没有在其他浏览器中对此进行测试）。

我正在尝试在Angular 1应用程序中使用Cesium。问题是：

Cesium正在渲染占据整个屏幕下半部分的时钟。并没有出现时间表。 Viewer似乎在我的SPA中第一次正确显示时钟和时间线。但是，当我切换到另一个页面＆＃39;然后回到我的铯页面，这是当显示器搞砸了，并保持这种状态，直到我关闭浏览器选项卡并重新开始。

以下是我所拥有的：

ModuleA.controller：

vm.viewer = new Cesium.Viewer(elem, {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/world'
    }),
    baseLayerPicker: false,
    clock: CesiumClockService.get()
});
vm.viewer.scene.globe.enableLighting = false;

CesiumClockService位于另一个模块中，该模块是ModuleA的依赖项之一。该服务只是创建一个Cesium.clock并提供get / set方法。我们的想法是使用Angular的单例服务为任何客户端模块提供相同的Cesium时钟，以使所有客户端模块保持相互及时。

ModuleA.directive：

var dir = {
   restrict: 'E',
   controller: 'ModuleAController',
   bindToController: true,
   link: linkFunction
};
return dir;

function linkFunction(scope, element, attr, ctrl){
     ctrl.setCesiumElem(element[0]);
}

它所在的HTML：

<body>
<div style="height: 100%;width: 100%;padding-top: 48px;padding-bottom: 48px;margin-bottom: 30px;">
     <div class="container-fluid">
          <div id="main-container">
              <div class="row">
                  <div class="col-xs-12">
                      <module-A-directive></module-A-directive>
                  </div>
              </div>
          </div>
     </div>
</div>
</body>

Answer 1

需要将Cesium Viewer放置在受控大小的div内，例如将display: block; position: relative; width: 100%; height: 100%或类似的CSS设置为该值。

正如您所发现的，将cesium-viewer类添加到div是此问题的有效解决方案，因为此类包含所需的样式。如果您如此倾向，您也可以自己创建一个类，例如，如果您希望Cesium最终出现在width: 100%; height: 100%以外的某个容器中，但仍然是受控制的大小而不是要求浏览器允许根据内容调整大小。

Answer 2

在我的moduleADirective中，我将其添加到我的linkFunction：

function linkFunction(scope, element, attr, ctrl){
     var raw = element[0];
     raw.className = "cesium-viewer";
     ctrl.setCesiumElem(raw);
}

显然，Cesium查看器非常喜欢那个cesium-viewer类，以便很好地显示。

查看器时钟和时间线显示不佳

2 个答案: