cesium示例集--1.cesium初始化地球、自定义设置、汉化

CesiumJS是一个开源JavaScript库，用于创建具有最佳性能、精度、视觉质量和易用性的世界级3D地球仪和地图。
那么如何在项目中引入cesium呢？
首先我们要去cesium官网下载相应的文件，这里我们下载的是1.96版，后续的案例也是基于该版本的。
下载后，我们在项目中引入主要的js和css文件：

<script type="text/javascript" src="Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">

然后我们定义一个div容器，用来放置地图。
初始化地图，这里我们用的是arcgis在线地图服务，展示效果如图：

<div id="cesiumContainer" class="cesium-container"></div>

<script>
            var viewer = new Cesium.Viewer("cesiumContainer", {
                animation: false,//是否创建动画小器件，左下角仪表
                fullscreenButton: false,//是否显示全屏按钮
                // geocoder: false,//是否显示geocoder小器件，右上角查询按钮
                // homeButton: false,//是否显示Home按钮
                infoBox: false,//是否显示信息框
                // sceneModePicker: false,//是否显示3D/2D选择器
                // scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
                selectionIndicator: false,//是否显示选取指示器组件
                timeline: false,//是否显示时间轴
                // navigationHelpButton: false,//是否显示右上角的帮助按钮
                baselLayerPicker: false,// 将图层选择的控件关掉，才能添加其他影像数据
                shadows: false,//是否显示背影
                baseLayerPicker: false,//是否显示图层选择器
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png'
                })
            });
</script>

现在地球已经展示出来了，但这可能并不符合项目需求，那么我们如何进行自定义设置，来达到我们想要的效果呢？

1.去除文字、图片的锯齿等

viewer.scene.fxaa = false;//改善实体图片清晰度，去除图片锯齿
 viewer.scene.postProcessStages.fxaa.enabled = true; //去锯齿 使文字清晰
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    viewer.resolutionScale = window.devicePixelRatio;
}

2.去除版权信息

要去除页面的版权信息，可以通过样式隐藏版权即可

//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

3.修改鼠标左键平移、滚轮缩放、右键旋转视角

//缩放
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
];
//视图视角切换
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.PINCH,
    Cesium.CameraEventType.RIGHT_DRAG,
];

4.cesium汉化

/**cesium汉化**/
//工具条鼠标悬浮提示汉化
translateToolBarTitle();
//工具条帮助面板汉化
translateToolBarHelp();
//全屏按钮汉化
translateFullExtent();
//图层选择汉化
translateBaseLayerPicker();

cesium汉化js，可自行下载