查看器時鐘和時間軸顯示不佳

這些是我正在使用的部分：Angular 1.5.8，Bootstrap 3.3.7，Cesium 1.27.0，Firefox 49（我還沒有在其他瀏覽器中測試過）。查看器時鐘和時間軸顯示不佳

我想在Angular 1應用程序中使用Cesium。問題是這樣的：

銫是渲染一個時鐘，佔據屏幕的整個下半部分。時間軸不會出現。 Viewer似乎在我的SPA中第一次正確顯示時鐘和時間線。但是，當我切換到另一個「頁面」，然後返回到我的cesium頁面時，這是顯示混亂的時候，並保持這種狀態直到我關閉瀏覽器選項卡並重新開始。

這是我有：

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的singleton服務爲任何客戶端模塊提供相同的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>

來源

2016-11-15 westandy

在我moduleADirective，我已將此添加到我的linkFunction：

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

顯然，銫觀察者真的喜歡那個銫觀察者類爲了好顯示。

來源

2016-11-15 01:06:25 westandy

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

正如您發現的那樣，將cesium-viewer類添加到div是解決此問題的有效方法，因爲此類包含所需的樣式。如果你非常喜歡，你也可以自己創建一個類，例如如果你想讓Cesium最終進入除width: 100%; height: 100%之外的任何其他容器，但仍然是可控大小，而不是要求瀏覽器允許根據內容確定尺寸。

來源

2016-11-15 18:21:42 emackey

查看器時鐘和時間軸顯示不佳

回答

相關問題