Cesium的任意时间表?

时间:2016-03-02 02:49:58

标签: maps timeline cesium

Cesium在屏幕底部有一个很好的时间线,可以改变当前的天文现象,并根据模型改变模型位置和动画。它没有什么,我真正需要的是一种在任意时间内绘制事件的方法。我想在00:00:00开始,并从那里实时前进,然后回到00:00:00。目前,我并不关心天文活动,包括太阳和月球活动。 API设置为接受Julian Time,而不是设置为任意时间。是否可以插入任意时间轴代替正常时间轴?

1 个答案:

答案 0 :(得分:2)

试一试。在内部,它仍然在某个任意日期使用JulianDates,但用户只能看到时间,而不是日期。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false,
    skyBox: false
});

var clock = viewer.clock;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.startTime = Cesium.JulianDate.fromIso8601('2016-01-01T00:00:00Z');
clock.stopTime  = Cesium.JulianDate.fromIso8601('2016-01-01T23:59:59Z');
clock.currentTime = clock.startTime;

function twoDigits(num) {
    return ((num < 10) ? ('0' + num.toString()) : num.toString());
}

var animationViewModel = viewer.animation.viewModel;
animationViewModel.dateFormatter = function() { return ''; };

animationViewModel.timeFormatter = function(date, viewModel) {
    var gregorianDate = Cesium.JulianDate.toGregorianDate(date);
    var millisecond = Math.round(gregorianDate.millisecond);
    return Cesium.sprintf("%02d:%02d:%02d.%03d", gregorianDate.hour,
        gregorianDate.minute, gregorianDate.second, millisecond);
};

viewer.timeline.makeLabel = function(time) {
    var gregorian = Cesium.JulianDate.toGregorianDate(time);
    var millisecond = gregorian.millisecond, millisecondString = '';
    if ((millisecond > 0) && (this._timeBarSecondsSpan < 3600)) {
        millisecondString = Math.floor(millisecond).toString();
        while (millisecondString.length < 3) {
            millisecondString = '0' + millisecondString;
        }
        millisecondString = '.' + millisecondString;
    }

    return twoDigits(gregorian.hour) + ':' + twoDigits(gregorian.minute) + ':' +
        twoDigits(gregorian.second) + millisecondString;
};

viewer.timeline.updateFromClock();
viewer.timeline.zoomTo(clock.startTime, clock.stopTime);
html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.18/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.18/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>