獨立銫時間軸小工具

Question

有沒有人花時間從Cesium應用程序中提取時間軸小工具？我正在使用沒有Dojo依賴關係的時間軸小部件。我能夠找到一個宣傳片說這是可能的，但時間表示例並不是最簡單的反向工程。有沒有人有我如何提取必要的庫和刪除Dojo依賴的想法？

google groups timeline discussion

cesium timeline demo

Answer 1

的時間表本身（即演示應用程序以外）不使用Dojo。下面是一個如何工作的示例，單擊底部的「運行代碼片斷」按鈕。

function onTimelineScrubfunction(e) { 
 
    var clock = e.clock; 
 
    clock.currentTime = e.timeJulian; 
 
    clock.shouldAnimate = false; 
 
} 
 

 
var timeControlsContainer = document.getElementById('timeControlsContainer'); 
 
var clock = new Cesium.Clock(); 
 
var clockViewModel = new Cesium.ClockViewModel(clock); 
 
var animationContainer = document.createElement('div'); 
 
animationContainer.className = 'cesium-viewer-animationContainer'; 
 
timeControlsContainer.appendChild(animationContainer); 
 
var animation = new Cesium.Animation(animationContainer, new Cesium.AnimationViewModel(clockViewModel)); 
 
var timelineContainer = document.createElement('div'); 
 
timelineContainer.className = 'cesium-viewer-timelineContainer'; 
 
timeControlsContainer.appendChild(timelineContainer); 
 
var timeline = new Cesium.Timeline(timelineContainer, clock); 
 
timeline.addEventListener('settime', onTimelineScrubfunction, false); 
 
timeline.zoomTo(clock.startTime, clock.stopTime); 
 

 
window.setInterval(function() { 
 
    clock.tick(); 
 
}, 32);

html, body, #timeControlsContainer { 
 
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; 
 
    font-family: sans-serif; 
 
}

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
 
     rel="stylesheet"/> 
 
<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/lighter.css" 
 
     rel="stylesheet"/> 
 
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script> 
 
<div class="cesium-lighter" id="timeControlsContainer"></div>