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

Question

这些是我正在使用的部分：Angular 1.5.8，Bootstrap 3.3.7，Cesium 1.27.0，Firefox 49（我还没有在其他浏览器中测试过这个，但是).

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

Cesium 正在渲染一个占据整个屏幕下半部分的时钟。并且时间线没有出现。查看器似乎第一次在我的 SPA 中正确显示时钟和时间线。但是当我切换到另一个 'page' 然后返回到我的铯页面时，这就是显示混乱的时候，并且一直保持这种状态直到我关闭浏览器选项卡并重新开始。

这是我拥有的：

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

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

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

显然，Cesium viewer 非常喜欢那个 cesium-viewer class 为了看起来漂亮。

Answer 2

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

如您所见，将 cesium-viewer class 添加到 div 是解决此问题的有效方法，因为此 class 包含所需的样式。如果你愿意，你也可以自己制作一个 class，例如，如果你希望 Cesium 最终位于某个容器中，该容器不是 width: 100%; height: 100%，但大小仍然受控而不是要求浏览器允许根据内容调整大小。

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

Viewer clock and timeline displaying poorly

firefox

angularjs

cesium

twitter-bootstrap-3