Vue3+Cesim ^1.122.0 Home按钮位置自定义；时间轴UTC时间转化为北京时间

1. Home按钮位置自定义

1. 项目需求

Cesium自带的Home、视图等按钮默认在页面的右侧；但是项目中左侧有自定义的功能面板，为使用Cesium自带的Home按钮，需要将其位置调整到页面左侧面板中

2. CSS实现方式

fixed到页面左上方，调整left-panel位置和宽高，让其显示在左侧面板的右上角。

:deep(.cesium-viewer-toolbar) {
  position: fixed;
  text-align: left;
  left: 15px;
  top: 40px;
  z-index: 100;
  width: 40px;
}

2. UTC时间转化为北京时间

1. 项目需求：

• cesium自带的时钟和时间轴，默认显示UTC时间，但是传给后端的时间戳是北京时间，所以需要把cesium的UTC时间转化为北京时间，确保整个系统里时间的统一性。

2. UTC转为北京时间Cesium.JulianDate.fromDate

• 转化函数

 //1. cesium时钟日期格式化函数
const 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}日`;
    },

// 2. cesium时间轴格式化函数
const 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")}`;
    },

• 格式化clock和timeline

Cesium.Timeline.prototype.makeLabel = CesiumDateTimeFormatter;
viewer.animation.viewModel.dateFormatter =CesiumDateFormatter;
viewer.animation.viewModel.timeFormatter = CesiumTimeFormatter; 

• 时间轴设置可视范围

window.viewer.timeline.zoomTo(
  Cesium.JulianDate.fromDate(new Date(sceneStartTime )), // +8小时
  Cesium.JulianDate.fromDate(new Date(sceneEndTime )) // +8小时
)