Cesium 做漢化的另一種思路
阿新 • • 發佈：2022-05-09
目前好幾個月沒有做Cesium 相關的開發了。
漢化肯定是最基礎又必須做的一個功能，要不介面上按鈕toolTip都是英文，都不知道怎麼和客戶交代。
因為Cesium 裡面的一些按鈕的toolTip提示都是硬編碼在裡面的。
所以好多小夥伴們做漢化通常是直接修改原始碼然後編譯使用。
如果僅僅是為了漢化去編譯原始碼，我覺得有些不那麼合適，你想想每次你升級Cesium版本的時候，這些重複勞動是不是很煩。
首先這個也不是我原創，是在看一個庫裡發現的這種方法。在用的過程中擴充套件了一些。
新建 cesium.local.js 內容如下
import Cesium from "cesium/Cesium" /** * @time: 2018/11/139:47 AM * @author:QingMings([email protected]) * @desc: CesiumLocal 本地化Cesium * */ export default class CesiumLocal { /** * @time: 2018/11/139:48 AM * @author:QingMings([email protected]) * @desc: CesiumLocal 本地化Cesium * @param viewer {Cesium.Viewer} */ constructor(viewer) { this._viewer = viewer; this._lang = { "Imagery": "影像", "Terrain": "地形", "GeocodersPlaceholder": "請輸入地名或座標", "HomeButtonToolTip": "回到全球", "SceneModePickerToolTip2D": "二維", "SceneModePickerToolTip3D": "三維", "SceneModePickerToolTipView": "哥倫布檢視", "NavigationHelpButtonToolTip": "操作指南", "navigationHelp_Touch": ">手勢", "navigationHelp_Mouse": ">滑鼠", "navigationHelp_Mouse_Pan": "平移", "navigationHelp_Mouse_Pan_details": "按下左鍵+ 拖動", "navigationHelp_Mouse_Zoom": "縮放", "navigationHelp_Mouse_Zoom_details0": "按下右鍵+ 拖動,或者", "navigationHelp_Mouse_Zoom_details1": "滾動滑鼠滾輪", "navigationHelp_Mouse_Rotate": "旋轉", "navigationHelp_Mouse_Rotate_details0": "按下中鍵+ 拖動,或者", "navigationHelp_Mouse_Rotate_details1": "按下CTRL + 左鍵/右鍵 +拖動", "navigationHelp_Touch_Pan": "平移", "navigationHelp_Touch_Pan_details": "單指拖動", "navigationHelp_Touch_Zoom": "縮放", "navigationHelp_Touch_Zoom_details": "雙指捏合", "navigationHelp_Touch_Rotate": "旋轉", "navigationHelp_Touch_Rotate_details": "雙指反向拖動", "navigationHelp_Touch_Tilt": "俯仰", "navigationHelp_Touch_Tilt_details": "雙指同向拖動", "enterFullScreen": "全屏", "exitFullScreen": "退出全屏" }; this.init(); } /** * @time: 2018/11/139:59 AM * @author:QingMings([email protected]) * @desc: * @type Viewer */ get viewer() { return this._viewer; } /** * @time: 2018/11/1310:04 AM * @author:QingMings([email protected]) * @desc: * @type Object */ get lang() { return this._lang; } init() { let _vm = this; _vm._baseLayerPickerSectionTitleLang(); _vm._homeButtonLang(); _vm._geocoderLang(); _vm._sceneModePickerButtonLang(); _vm._navigationHelpButtonLang(); _vm._fullScreenButtonLang(); } /** * @time: 2018/11/139:55 AM * @author:QingMings([email protected]) * @desc: 本地化 Cesium.BaseLayerPicker * */ _baseLayerPickerSectionTitleLang() { let _vm = this; let titles = _vm.viewer.container.getElementsByClassName('cesium-baseLayerPicker-sectionTitle'); for (let i = 0; i < titles.length; i++) { titles[i].innerHTML = titles[i].innerHTML.replace("Imagery", _vm.lang.Imagery).replace("Terrain", _vm.lang.Terrain) } } /** * @time: 2018/11/1310:17 AM * @author:QingMings([email protected]) * @desc: 本地化 HomeButton * */ _homeButtonLang() { let _vm = this; if (!defined(_vm.viewer.homeButton)) { return; } _vm.viewer.homeButton.viewModel.tooltip = _vm.lang.HomeButtonToolTip } /** * @time: 2018/11/1310:20 AM * @author:QingMings([email protected]) * @desc: 本地化 geocoder * */ _geocoderLang() { let _vm = this; let geocoders = this.viewer.container.getElementsByClassName("cesium-geocoder-input"); for (let i = 0; i < geocoders.length; i++) { geocoders[i].setAttribute("placeholder", _vm.lang.GeocodersPlaceholder); } } /** * @time: 2018/11/1311:22 AM * @author:QingMings([email protected]) * @desc: 本地化 sceneModePicker * */ _sceneModePickerButtonLang() { let _vm = this; if (!defined(_vm.viewer.sceneModePicker)) { return; } _vm.viewer.sceneModePicker.viewModel.tooltip2D = _vm.lang.SceneModePickerToolTip2D; _vm.viewer.sceneModePicker.viewModel.tooltip3D = _vm.lang.SceneModePickerToolTip3D; _vm.viewer.sceneModePicker.viewModel.tooltipColumbusView = _vm.lang.SceneModePickerToolTipView; } /** * @time: 2018/11/1311:23 AM * @author:QingMings([email protected]) * @desc: 本地化操作指南 * */ _navigationHelpButtonLang() { let _vm = this; if (!defined(_vm.viewer.navigationHelpButton)) { return; } _vm.viewer.navigationHelpButton.viewModel.tooltip = _vm.lang.NavigationHelpButtonToolTip; let clickHelpElement = _vm.viewer.navigationHelpButton.container.getElementsByClassName("cesium-click-navigation-help")[0]; let touchHelpElement = _vm.viewer.navigationHelpButton.container.getElementsByClassName("cesium-touch-navigation-help")[0]; let tabButtonElement = _vm.viewer.navigationHelpButton.container.getElementsByClassName("cesium-navigation-button-right")[0]; tabButtonElement.innerHTML = tabButtonElement.innerHTML.replace(">Touch", _vm.lang.navigationHelp_Touch); tabButtonElement = _vm.viewer.navigationHelpButton.container.getElementsByClassName("cesium-navigation-button-left")[0]; tabButtonElement.innerHTML = tabButtonElement.innerHTML.replace(">Mouse", _vm.lang.navigationHelp_Mouse); // 平移 let clickHelpPanElement = clickHelpElement.getElementsByClassName("cesium-navigation-help-pan")[0]; clickHelpPanElement.innerHTML = _vm.lang.navigationHelp_Mouse_Pan; let clickHelpPanDetailsElement = clickHelpPanElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; clickHelpPanDetailsElement.innerHTML = _vm.lang.navigationHelp_Mouse_Pan_details; // 縮放 let clickHelpZoomElement = clickHelpElement.getElementsByClassName("cesium-navigation-help-zoom")[0]; clickHelpZoomElement.innerHTML = _vm.lang.navigationHelp_Mouse_Zoom; let clickHelpZoomDetailsElement0 = clickHelpZoomElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; clickHelpZoomDetailsElement0.innerHTML = _vm.lang.navigationHelp_Mouse_Zoom_details0; let clickHelpZoomDetailsElement1 = clickHelpZoomElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[1]; clickHelpZoomDetailsElement1.innerHTML = _vm.lang.navigationHelp_Mouse_Zoom_details1; // 旋轉 let clickHelpRotateElement = clickHelpElement.getElementsByClassName("cesium-navigation-help-rotate")[0]; clickHelpRotateElement.innerHTML = _vm.lang.navigationHelp_Mouse_Rotate; let clickHelpRotateDetailsElement0 = clickHelpRotateElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; clickHelpRotateDetailsElement0.innerHTML = _vm.lang.navigationHelp_Mouse_Rotate_details0; let clickHelpRotateDetailsElement1 = clickHelpRotateElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[1]; clickHelpRotateDetailsElement1.innerHTML = _vm.lang.navigationHelp_Mouse_Rotate_details1; let touchHelpPanElement = touchHelpElement.getElementsByClassName("cesium-navigation-help-pan")[0]; touchHelpPanElement.innerHTML = _vm.lang.navigationHelp_Touch_Pan; let touchHelpPanDetailsElement = touchHelpPanElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; touchHelpPanDetailsElement.innerHTML = _vm.lang.navigationHelp_Touch_Pan_details; let touchHelpZoomElement = touchHelpElement.getElementsByClassName("cesium-navigation-help-zoom")[0]; touchHelpZoomElement.innerHTML = _vm.lang.navigationHelp_Touch_Zoom; let touchHelpZoomDetailsElement = touchHelpZoomElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; touchHelpZoomDetailsElement.innerHTML = _vm.lang.navigationHelp_Touch_Zoom_details; let touchHelpTiltElement = touchHelpElement.getElementsByClassName("cesium-navigation-help-rotate")[0]; touchHelpTiltElement.innerHTML = _vm.lang.navigationHelp_Touch_Tilt; let touchHelpTiltDetailsElement = touchHelpTiltElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; touchHelpTiltDetailsElement.innerHTML = _vm.lang.navigationHelp_Touch_Tilt_details; let touchHelpRotateElement = touchHelpElement.getElementsByClassName("cesium-navigation-help-tilt")[0]; touchHelpRotateElement.innerHTML = _vm.lang.navigationHelp_Touch_Rotate; let touchHelpRotateDetailsElement = touchHelpRotateElement.parentNode.getElementsByClassName("cesium-navigation-help-details")[0]; touchHelpRotateDetailsElement.innerHTML = _vm.lang.navigationHelp_Touch_Rotate_details; } /** * @time: 2018/11/133:31 PM * @author:QingMings([email protected]) * @desc: 本地化全屏按鈕 * */ _fullScreenButtonLang() { let _vm = this; if (!defined(_vm.viewer.fullscreenButton)) { return; } let tmpIsFullscreen= Cesium.knockout.getObservable(_vm.viewer.fullscreenButton.viewModel,"isFullscreen"); delete _vm.viewer.fullscreenButton.viewModel.tooltip; Cesium.knockout.defineProperty(_vm.viewer.fullscreenButton.viewModel,"tooltip",function () { if (!_vm.viewer.fullscreenButton.viewModel.isFullscreenEnabled){ return 'Full screen unavailable'; } return tmpIsFullscreen() ? _vm.lang.exitFullScreen : _vm.lang.enterFullScreen; }); // 重新繫結全屏按鈕 let fullScreenButtonElement = _vm.viewer.fullscreenButton.container.getElementsByClassName("cesium-fullscreenButton")[0]; Cesium.knockout.cleanNode(fullScreenButtonElement); Cesium.knockout.applyBindings(_vm.viewer.fullscreenButton.viewModel,fullScreenButtonElement); } }
如何使用呢
上面是一個ES 6 的類，建構函式需要傳入Cesium.Viewer 物件。
也就是說，在Cesium.Viewer物件初始化之後就可以使用了。
// ... 省略非必要程式碼
// 建立 Cesium.Viewer
this.viewer = new Cesium.Viewer(options.container, options.viewerOptions);
// 建立物件，傳入Cesium.Viewer物件。
this._local = new CesiumLocal(this.viewer)
本次分享的就是這些了，希望可以幫到大家。
本文轉自 https://www.jianshu.com/p/9e28ecf7724f