最近项目中用到了Cesium。功能比较简单，就是加载一个地图，使用的是高德地图的图层，并以中国地图作为初始区域，还可以定位到指定的点、添加entities，及二三维切换和放大缩小的控制。下面就来创建一个简单的地图，方便新手查看。

1.创建地图

通过设置Camera.DEFAULT_VIEW_RECTANGLE，可以指定地图初始化时的默认视角，如下为设置中国区域为默认视角。

1.1设置默认视角

    //设置默认视角在中国
      var china = Cesium.Rectangle.fromDegrees(100, 10, 120, 70);
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = china;

1.2Viewer

创建Viewer及属性介绍可以参考【Cesium指南-Viewer常用属性介绍】。

1.3添加高德地图

首先需要设置Viewer的imageryProvider属性，然后再将图层添加到地图上。
如下所示：

• 设置属性

imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url:
            "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        })

• 添加图层

viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:
            "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
        })
      );

2.添加entities

使用viewer.entities.add可以添加entities，如下所示：

viewer.entities.add({
        id:'XT001',
        position: Cesium.Cartesian3.fromDegrees(115.731109, 24.13663),
        point: {
          pixelSize: 20,
          color: Cesium.Color.YELLOW
        }
      });

3.二三维切换

this.viewer.scene.morphTo2D(1); //二维

this.viewer.scene.morphTo3D(1); //三维

4.放大缩小

this.viewer.camera.zoomIn(3000);//放大

this.viewer.camera.zoomOut(10000);//缩小

所有相关的代码如下所示：

    /*
     * 初始化地图
     * */
    initMap() {
      //设置默认视角在中国
      var china = Cesium.Rectangle.fromDegrees(100, 10, 120, 70);
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = china;
      var viewer = new Cesium.Viewer("cesiumContainer", {
       animation:false,//是否显示左下角的仪表盘
        baseLayerPicker:false,//是否显示图层选择器按钮，右上角那个地图图标
        fullscreenButton:false,//是否显示全屏按钮
        vrButton:false,//是否显示VR按钮
        geocoder:false,//是否显示搜索按钮
        homeButton:false,//是否显示主页按钮
        infoBox:false,//是否显示提示信息
        sceneModePicker:false,//是否显示右上角的模式切换按钮
        selectionIndicator:false,//是否显示选取指示器组件
        timeline:false,//是否显示下边的时间轴
        navigationHelpButton:false,//是否显示右上角的帮助按钮
        navigationInstructionsInitiallyVisible:true,//是不显示导航
        scene3DOnly:true,//是否指定仅为三维模式，全部使用三维模式可节约GPU资源
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url:
            "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        })
      });
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:
            "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
        })
      );
      this.viewer = viewer;
      setTimeout(() => {
        this.setPointAdress(viewer);
      }, 5000);
      //entities添加点击事件
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction((movement) => {
        var pick = viewer.scene.pick(movement.position);//单个对象
        var list = viewer.scene.drillPick(movement.position);//列表
        if (Cesium.defined(pick) && pick.id.id) {
          this.clickStation({
            siteid:pick.id.id,
            name:'名称'
          })
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    //设置视角位置及角度
    setPointAdress: viewer => {
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(115.731109, 24.13663, 15000.0), //视野点
        orientation: {
          heading: Cesium.Math.toRadians(0.0), 
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0
        }
      });

      viewer.entities.add({
        id:'123',
        position: Cesium.Cartesian3.fromDegrees(115.731109, 24.13663),
        point: {
          pixelSize: 20,
          color: Cesium.Color.YELLOW
        }
      });
    },