cesium时间轴格式化为北京时间

文章介绍了如何在Cesium中利用JulianDate对象和addHours()方法添加8小时,并将转换后的日期和时间应用于时间轴、日期和时间的格式化函数中,以自定义显示时间。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

中心思想:使用JulianDate.addHours()方法,将时间+8.

效果:

 初始配置:创建viewer时打开时间轴的配置(默认打开),动画配置shouleAnimate为true。

// timeline: false,
// animation: false,
shouldAnimate: true,

 代码:

// cesium时钟时间格式化函数
function CesiumTimeFormatter(datetime, viewModel) {
    var julianDT = new JulianDate();
    JulianDate.addHours(datetime, 8, julianDT);
    var gregorianDT = 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 JulianDate();
    JulianDate.addHours(datetime, 8, julianDT);
    var gregorianDT = JulianDate.toGregorianDate(julianDT);
        
    return `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日`;
}
// cesium时间轴格式化函数
function CesiumDateTimeFormatter(datetime, viewModel, ignoredate) {
   var julianDT = new JulianDate();
   JulianDate.addHours(datetime, 8, julianDT);
   var gregorianDT = JulianDate.toGregorianDate(julianDT);
        
   let hour = gregorianDT.hour + "";
   let minute = gregorianDT.minute + "";
   return `${gregorianDT.day}日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
}
        
Cesium.Timeline.prototype.makeLabel = CesiumDateTimeFormatter;
viewer.animation.viewModel.dateFormatter = CesiumDateFormatter;
viewer.animation.viewModel.timeFormatter = CesiumTimeFormatter;
### Cesium 时间轴 使用教程与配置 在Cesium中,时间线是一个重要的组件,用于控制场景的时间流动以及显示随时间变化的数据。通过`Viewer`对象中的`timeline`属性可以访问和操作时间线。 #### 启用或禁用时间线 要启用或禁用时间线,可以通过设置`viewer.timeline`的可见性来实现: ```javascript // 创建 viewer 对象时隐藏时间线 var viewer = new Cesium.Viewer('cesiumContainer', { timeline: false // 设置为 true 则会显示,默认情况下是开启状态 }); ``` #### 获取当前时间和范围 获取当前选定的时间段或者整个时间线表示的时间区间是非常有用的: ```javascript // 获取当前选中的时间段 var currentTimeInterval = viewer.timeline.zoomTo(); // 手动指定时间间隔并应用到时间线上 var start = Cesium.JulianDate.fromIso8601('2023-01-01T00:00:00Z'); var stop = Cesium.JulianDate.fromIso8601('2023-01-02T00:00:00Z'); viewer.timeline.zoomTo(new Cesium.TimeInterval({ start : start, stop : stop })); ``` #### 自定义样式 对于更进一步的自定义需求,比如改变颜色、字体大小等外观上的调整,则可能涉及到CSS样式的修改[^1]。 #### 动态更新时间 为了使某些实体能够随着时间推移而发生变化,可以在创建这些实体的时候为其提供一个基于时间的位置函数或其他动态属性: ```javascript entity.position = new Cesium.CallbackProperty(function(time, result) { var secondsSinceEpoch = Cesium.JulianDate.toSecondsSinceEpoch(time); return Cesium.Cartesian3.fromDegrees( longitudeFunction(secondsSinceEpoch), latitudeFunction(secondsSinceEpoch), height, result); }, false); ``` 以上就是有关于如何使用和配置Cesium时间轴的一些基本指导[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值