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，還有很多不了解的。之后做項目進行哪些比較好的改造盡分享給大家