【Vaadin7 to 14】Cesium tooltip, Clock, Timeline 本地化

tags: Vaadin

¹

Common 目標

• 將Cesium加入Vaadin專案中
• 將Clock及Timeline元件，文字及時間做本地化

Tooltip

• 自己撰寫Javascirpt file，並宣告成全域變數

var cesium_locale = {
    en_us: {
        animation_pathClock: "Replay",
        animation_pathPlayReverse: "Play Reverse",
        animation_pathPlay: "Play Forward",
        animation_pathPause: "Pause",
    },
    zh_cn: {
        animation_pathClock: "重放",
        animation_pathPlayReverse: "反向播放",
        animation_pathPlay: "播放",
        animation_pathPause: "暂停",
    },
    zh_tw: {
        animation_pathClock: "重播",
        animation_pathPlayReverse: "反向播放",
        animation_pathPlay: "播放",
        animation_pathPause: "暫停",
    },
}

window.cesium_locale = cesium_locale;

• 根據語系，動態修改

$('.cesium-viewer-animationContainer .cesium-animation-rectButton title')[0].innerHTML = cesium_locale[lang].animation_pathPlayReverse;
$('.cesium-viewer-animationContainer .cesium-animation-rectButton title')[1].innerHTML = cesium_locale[lang].animation_pathPlay;
$('.cesium-viewer-animationContainer .cesium-animation-rectButton title')[2].innerHTML = cesium_locale[lang].animation_pathPause;

Clock²

// 本地化時間
// Date formatting to a global form
//let TZcode = 'HKG';
// let UTCoffset = new Date();
// UTCoffset = -UTCoffset.getTimezoneOffset();// 時差
let UTCoffset = 0;
animation.viewModel.timeFormatter = function (datetime, viewModel) {
    datetime = Cesium.JulianDate.addMinutes(datetime, UTCoffset, new Cesium.JulianDate());
    let gregorianDate = Cesium.JulianDate.toGregorianDate(datetime);
    return Cesium.sprintf("%02d:%02d:%02d", gregorianDate.hour, gregorianDate.minute, gregorianDate.second);
    //return objDT + Cesium.sprintf("%02d:%02d " + TZcode, gregorianDT.hour, gregorianDT.minute);
}
animation.viewModel.dateFormatter = function (datetime, viewModel) {
    datetime = Cesium.JulianDate.addMinutes(datetime, UTCoffset, new Cesium.JulianDate());
    let gregorianDate = Cesium.JulianDate.toGregorianDate(datetime);
    return Cesium.sprintf("%4d/%02d/%02d", gregorianDate.year, gregorianDate.month, gregorianDate.day);
}

Timeline³

1. 修改 Cesium.js，有兩種：Cesium、CesiumUnminified
   • 建議使用Cesium 壓縮過的進行修改
2. 利用關鍵字 “prototype.makeLabel” 搜尋，只有1個搜尋結果
3. 修改該function，return 後的字串

// CesiumJS V1.73
return timelineMonthNames[t.month-1]+" "+t.day+" "+t.year+" "+twoDigits(t.hour)+":"+twoDigits(t.minute)+":"+twoDigits(t.second)+r

// 應改為
return t.year + "/" + t.month + "/" + t.day + " " + twoDigits(t.hour) + ":" + twoDigits(t.minute) + ":" + twoDigits(t.second)

Result 成果

---

1. https://cesium.com/cesiumjs/ ↩︎

2. https://www.cnblogs.com/cmt/p/14553189.html ↩︎

3. https://stackoverflow.com/questions/32338093/standalone-cesium-timeline-widget ↩︎