创建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;
    }