2016-11-15 5 views
1

これは私が使用しているものです:角度1.5.8、ブートストラップ3.3.7、セシウム1.27.0、Firefox 49(まだ他のブラウザではこれをテストしていません)ビューアの時計とタイムラインの表示が悪い

私はAngular 1アプリケーション内でセシウムを使用しようとしています。問題は次のとおりです。

セシウムは画面の下半分全体を占めるクロックを表示しています。タイムラインは表示されません。ビューアは私のSPAで時計とタイムラインを正しく表示するようです。しかし、別の「ページ」に切り替えてからセシウムのページに戻ると、ディスプレイが乱れてブラウザのタブを閉じてやり直すまでそのままになります。

は、ここで私が持っているものです。

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の依存関係の1つである別のモジュールです。このサービスは単にCesium.clockを作成し、get/setメソッドを提供します。アイデアは、Angularのシングルトンサービスを使用して、クライアントモジュールに同じセシウムクロックを提供して、すべてのクライアントモジュールを互いの時間に合わせて維持することでした。

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に住んでいる:、どうやら

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

:私のmoduleADirectiveで

<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> 

答えて

0

は、私は私のlinkFunctionにこれを追加しましたセシウム視聴者は、実際にセシウム視聴者クラスがうまく見えるようにするのが大好きです。

1

セシウムビューアは、制御されたサイズのdivの中に配置する必要があります。たとえば、display: block; position: relative; width: 100%; height: 100%などのCSSを設定します。

あなたが発見したように、cesium-viewerクラスをdivに追加することは、このクラスに必要なスタイルが含まれているため、この問題の有効な解決方法です。あなたがとても傾けているならば、例えばセシウムがwidth: 100%; height: 100%以外の何人かの容器に入ることを望むならば、あなた自身のクラスを作ることもできますが、ブラウザに許可するように依頼するのではなく、コンテンツに基づいたサイジング。

関連する問題