Cesium小插件改造--clock和timeline

一、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,还有很多不了解的。之后做项目进行哪些比较好的改造尽分享给大家

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章