Question

有没有人花时间从Cesium应用程序中提取时间轴小部件？我希望在没有Dojo依赖的情况下使用时间轴小部件。我能够找到一个预告片说它可能，但时间线示例并不是最容易进行逆向工程的。有没有人知道如何提取必要的库并删除Dojo依赖？

Answer 1

The timeline itself (outside of that demo app) does not use Dojo. Here's a sample of how this works, click the "run code snippet" button at the bottom.

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>

独立的Cesium时间线小工具

1 个答案: