修改Cesium默认的时间轴timeline和时钟clock

参考文章：https://www.cnblogs.com/Joker-Face/p/11914277.html

时钟 clock

如下图所示：clock的日期显示为YY-MM-DD这种简洁明了格式，时间则为当前系统时间（也就是北京时间）。Clock内部以儒略日（JulianDate）维护时间。其起始日期为公元前4713年1月1日中午12时，这和我们常用的格林威治时间略有不同，主要是天文学家使用。

image.png

let date = new Date();
//可返回格林威治时间和本地时间之间的时差
let h = 0 - date.getTimezoneOffset();
// 设置时间
viewer.animation.viewModel.timeFormatter = function(date, viewModel) {
    //重新构造一个当前系统时间的儒略日
    let dateZone = Cesium.JulianDate.addMinutes(date,h,new Cesium.JulianDate());
    let gregorianDate = Cesium.JulianDate.toGregorianDate(dateZone);
    let millisecond = Math.round(gregorianDate.millisecond );　　　　　//倍速是否小于1，小于1则显示毫秒级
    if(Math.abs(viewModel._clockViewModel.multiplier) < 1){
        return Cesium.sprintf("%02d:%02d:%02d.%03d",gregorianDate.hour,gregorianDate.minute,gregorianDate.second,gregorianDate.millisecond);
    }
    return Cesium.sprintf("%02d:%02d:%02d",gregorianDate.hour,gregorianDate.minute,gregorianDate.second);
};
//设置日期
 viewer.animation.viewModel.dateFormatter = function(date, viewModel) {
     let dateZone = Cesium.JulianDate.addMinutes(date, h, new Cesium.JulianDate());
     let gregorianDate = Cesium.JulianDate.toGregorianDate(dateZone);　　　　　　//设置格式为xx/xx/xx，格式可自定义为任意你想要的
     return Cesium.sprintf("%4d-%02d-%02d", gregorianDate.year, gregorianDate.month, gregorianDate.day);
 }

时间轴 timeline

image.png

TimeLine的改造就比较麻烦些，因为Cesium并没有留有API接口，所以我们需要去修改源码。
首先定位显示元素的class--->cesium-timeline-ticLabel，然后我们到Cesium.js中的116399行找到对应的元素
然后我们会发现<span>+k+</span>，显示的值为k，而k在上面为this.makeLabel(N)；为TimeLine实例调用makeLabel()方法。
我们在Cesium.js中定位到Timeline的makeLabel()方法，修改为如下代码：

Timeline.prototype.makeLabel = function (e) {
    var date = new Date();
    var h = 0 - date.getTimezoneOffset();　　　　　
    //由于Cesium都是以JulianDate作为默认日期，所以参数e肯定为JulianDate类型，所以我们可以像上面clock改造一样改造
    var dateZone = Cesium.JulianDate.addMinutes(e,h,new Cesium.JulianDate());
    var t = JulianDate.toGregorianDate(dateZone)
      , i = t.millisecond
      , r = " UTC";
    if (0 < i && this._timeBarSecondsSpan < 3600) {
        for (r = Math.floor(i).toString(); r.length < 3; )
            r = "0" + r;
        r = "." + r
    }　　　　　
    //这里就是设置格式的地方
    return  t.year + "-" + t.month + "-" + t.day + " " + twoDigits(t.hour) + ":" + twoDigits(t.minute) + ":" + twoDigits(t.second)
}