뷰어 시계 및 타임 라인이 잘못 표시됩니다.

다음은 내가 사용하고있는 조각입니다. 각도 1.5.8, 부트 스트랩 3.3.7, 세슘 1.27.0, Firefox 49 (다른 브라우저에서는 아직 테스트하지 않았습니다).뷰어 시계 및 타임 라인이 잘못 표시됩니다.

Angular 1 응용 프로그램에서 Cesium을 사용하려고합니다. 문제는 다음과 같습니다.

세슘은 화면 하단 전체를 차지하는 시계를 렌더링합니다. 그리고 타임 라인이 나타나지 않습니다. 뷰어는 내 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의 종속성 중 하나입니다 다른 모듈에 있습니다. 이 서비스는 단순히 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 :는 분명히

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>

출처

2016-11-15 westandy

, 내 linkFunction이 추가 세슘 뷰어는 실제로 세슘 뷰어 클래스가 멋지게 보이기를 좋아합니다.

출처

2016-11-15 01:06:25 westandy

세슘 뷰어는 제어 된 크기의 div 안에 넣어야합니다. 예를 들어 display: block; position: relative; width: 100%; height: 100% 또는 이와 유사한 CSS를 설정하는 것이 좋습니다.

발견 한 것처럼 div에 cesium-viewer 클래스를 추가하면이 클래스에 필수 스타일이 포함되어 있기 때문에이 문제를 해결할 수 있습니다. 만약 당신이 그렇게 생각한다면, 예를 들어, 세슘이 width: 100%; height: 100% 이외의 어떤 컨테이너에서 끝나기를 원한다면 클래스를 만들 수도 있지만, 브라우저에 허용하도록 요구하는 것과는 대조적으로 제어 된 크기였습니다. 내용에 따라 크기 조정.

출처

2016-11-15 18:21:42 emackey

뷰어 시계 및 타임 라인이 잘못 표시됩니다.

답변

관련 문제