当前位置：首页 > news >正文

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

news 2025/9/9 8:19:52

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小时
)