创建Viewer
Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子），
任何Cesium应用程序的基础都是Viewer。
- 创建Viewer只需传入id，将其与div绑定即可。
// html代码
<div id="cesiumContainer"></div>
// js代码
var viewer = new Cesium.Viewer('cesiumContainer');
-
使用以上代码之后，能看到三维数字地球啦。
HelloWorld
设置Viewer
- 如果不需要多余的控件，我们可以通过设置Viewer的参数，将Cesium自带的组件全部隐藏。
/*初始化地图*/
var viewer = new Cesium.Viewer('cesiumContainer',{
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
// vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
infoBox: false, // 隐藏点击要素之后显示的信息窗口
sceneModePicker: false, // 隐藏场景模式选择控件
// selectionIndicator: true, // 显示实体对象选择框，默认true
timeline: false, // 隐藏时间线控件
navigationHelpButton: false, // 隐藏帮助按钮
navigationInstructionsInitiallyVisible: false, // true:显示帮助菜单，false:只有当用户点击帮助按钮时显示
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
shouldAnimate: true, // 开启动画自动播放
// useDefaultRenderLoop: true, // 默认为true，如果不需要控制渲染循环，则设为false
// sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
// mapProjection : new Cesium.WebMercatorProjection(), // 地图投影体系，默认Ellipsoid.WGS84
// dataSources : new Cesium.DataSourceCollection() // 需要进行可视化的数据源的集合
// imageryProvider: vec_w, // 地图
// terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 地形
requestRenderMode: true, // 减少Cesium渲染新帧的总时间并减少Cesium在应用程序中的总体CPU使用率。
maximumRenderTimeChange : Infinity, // 如果场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity。
// orderIndependentTranslucency: false, // 背景透明时用到，具体不明
// contextOptions: {
// webgl: { // 默认为false，与标准WebGL默认为true相比，可以提高性能。
// alpha: true, // 如果程序需要使用alpha混合在其他HTML元素上方合成Cesium，请将其设置 webgl.alpha为true。
// }
// }
});
/*隐藏左下角的logo*/
viewer.cesiumWidget.creditContainer.style.display="none";
/*定义初始化时的镜头、视角*/
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(108.92361,34.54083, 10000000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}
});
/*矢量地图（天地图）*/
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:"http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=您的密钥"
})
);
/*矢量注记（天地图）*/
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:"http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=您的密钥"
})
);
/*影像地图（天地图）*/
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=您的密钥"
})
);
/*影像注记（天地图）*/
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:"http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=您的密钥"
})
);
/*图层展示或隐藏*/
viewer.imageryLayers.get(0).show = false;
// viewer.imageryLayers.get(1).show = false;
// viewer.imageryLayers.get(2).show = false;
viewer.imageryLayers.get(3).show = false;
viewer.imageryLayers.get(4).show = false;
/*去除实体双击事件*/
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
/*移动设备上禁掉以下几个选项，可以相对更加流畅*/
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
viewer.scene.fog.enable = false;
viewer.scene.skyAtmosphere.show = false;
viewer.scene.fxaa = false;
}
-
设置好之后，下面就是最终的效果啦。
最终效果
参考文章：
Cesium入门4 - 创建Cesium Viewer
https://www.jianshu.com/p/af99310ae6c0
Cesium-Viewer参数及属性信息
https://blog.csdn.net/weixin_42078760/article/details/81675838
Cesium 学习记录（2） 初始化Viewer
https://blog.csdn.net/zlx312/article/details/78273537
ysCesium案例和文档
https://www.wellyyss.cn/ysCesium/views/main.html
