亲宝软件园·资讯

展开

Cesium小插件改造--clock和timeline

Joker-Face 人气:2

 

一、Clock

  废话不多说,先上效果图再说。如效果图所示:clock的日期显示为YY/MM/DD这种简洁明了格式,时间则为当前系统时间(也就是北京时间)。Clock内部以儒略日(JulianDate)维护时间。其起始日期为公元前4713年1月1日中午12时,这和我们常用的格林威治时间略有不同,主要是天文学家使用。

  下面上代码:

   var date = new Date();
  //可返回格林威治时间和本地时间之间的时差
var h = 0 - date.getTimezoneOffset(); viewer.animation.viewModel.timeFormatter = function(date, viewModel) {
    //重新构造一个当前系统时间的儒略日
var dateZone = Cesium.JulianDate.addMinutes(date,h,new Cesium.JulianDate()); var gregorianDate = Cesium.JulianDate.toGregorianDate(dateZone); var 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) { var dateZone = Cesium.JulianDate.addMinutes(date,h,new Cesium.JulianDate()); var gregorianDate = Cesium.JulianDate.toGregorianDate(dateZone);
      //设置格式为xx/xx/xx,格式可自定义为任意你想要的 return Cesium.sprintf("%4d/%02d/%02d",gregorianDate.year,gregorianDate.month,gregorianDate.day); }

 

二、TimeLine

  TimeLine的改造就比较麻烦些,因为Cesium并没有留有API接口(目前据我所知,如有错请留言给我更改),所以我们需要去修改源码。

  首先定位显示元素的class--->cesium-timeline-ticLabel,然后我们到Cesium.js中的116399行找到对应的元素。

  然后我们会发现<span>+k+</span>,显示的值为k,而k在上面为this.makeLabel(N);为TimeLine实例调用makeLabel()方法。我们在定位到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) }

 

  这样就完成了系统本地化的一些小改造,由于目前也是刚接触Cesium,还有很多不了解的。之后做项目进行哪些比较好的改造尽分享给大家

加载全部内容

相关教程
猜你喜欢
用户评论