Cesium格式化时间轴的显示时间

在Cesium中，要格式化时间轴以显示北京时间（UTC+8），可以通过修改JulianDate对象来实现。以下是一些关键步骤和代码示例：

使用JulianDate.addHours()方法将时间加上8小时，以便将UTC时间转换为北京时间。
创建自定义的时间格式化函数，以便在时间轴上显示格式化后的时间。
重写Cesium.Timeline.prototype.makeLabel方法，以便时间轴使用自定义的时间格式化函数[1]。
设置viewer.animation.viewModel.dateFormatter和viewer.animation.viewModel.timeFormatter，以便动画控件使用自定义的日期和时间格式化函数[1]。

以下是一个具体的代码示例，展示了如何格式化时间轴的显示时间：

 // cesium时钟时间格式化函数
    function CesiumTimeFormatter(datetime, viewModel) {
      var julianDT = new Cesium.JulianDate();
      Cesium.JulianDate.addHours(datetime, 8, julianDT);
      var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
      let hour = gregorianDT.hour + "";
      let minute = gregorianDT.minute + "";
      let second = gregorianDT.second + "";
      return `${hour.padStart(2, "0")}:``{minute.padStart(2, "0")}:``{second.padStart(2, "0")}`;
    }

// cesium时钟日期格式化函数
    function CesiumDateFormatter(datetime, viewModel, ignoredate) {
      var julianDT = new Cesium.JulianDate();
      Cesium.JulianDate.addHours(datetime, 8, julianDT);
      var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
      return `${gregorianDT.year}年``{gregorianDT.month}月``{gregorianDT.day}日`;
    }

// cesium时间轴格式化函数
    function CesiumDateTimeFormatter(datetime, viewModel, ignoredate) {
      var julianDT = new Cesium.JulianDate();
      Cesium.JulianDate.addHours(datetime, 8, julianDT);
      var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
      let hour = gregorianDT.hour + "";
      let minute = gregorianDT.minute + "";
      return `${gregorianDT.day}日``{hour.padStart(2, "0")}:``{minute.padStart(2, "0")}`;
    }

    this.viewer = new Viewer(this.$refs.cesiumContainer)


// 立即设置时间格式化函数
    this.viewer.animation.viewModel.dateFormatter = CesiumDateFormatter;
    this.viewer.animation.viewModel.timeFormatter = CesiumTimeFormatter;
    Cesium.Timeline.prototype.makeLabel = CesiumDateTimeFormatter;

// 确保时间轴更新
    this.viewer.timeline.updateFromClock();
    this.viewer.timeline.zoomTo(this.viewer.clock.startTime, this.viewer.clock.stopTime);

cesium版本

"cesium": "^1.114.0",

运行效果

Cesium格式化时间轴的显示时间

实例代码下载

代码运行环境vue3 vite js nodejs 16