学习【Cesium】第三篇，从Cesium.Viewer查看器开始学习（学不会揍我）

 创建一个默认的Cesium.Viewer对象及效果

 this.viewer = new Cesium.Viewer('cesiumContainer')    
 // 参数1：container ，包含小部件的 DOM 元素或 ID
 // 参数2：options，初始化选项，设置相关控件默认值

 Viewer是展示三维要素内容的主要窗口，它不仅是包含三维地球的视窗，还包含了一些基础控件在定义Viewer对象的同事需要设定基础部件、图层等的初始化状态。

 

通过代码了解Viewer部分参数配置级效果（一个孤单的地球还有无尽星空）

 this.viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,  // 设置动画小组件关闭展示
    timeline: false, // 时间轴关闭展示
    // vrButton: false, // vr按钮关闭展示
    infoBox: false, // 信息盒子关闭展示
    geocoder: false, // 地理编码搜索关闭展示
    baseLayerPicker: false, // 基础图层选择器关闭展示
    sceneModePicker: false, // 场景选择器关闭展示
    fullscreenButton: false, // 全屏按钮关闭展示
    navigationInstructionsInitiallyVisible: false, // 导航说明是否最初展示
    navigationHelpButton: false, // 导航帮助按钮关闭展示
    creditContainer: 'testCredit',
    // creditViewport: 'testCreditViewport',
    homeButton: false // 主页按钮关闭展示
})    

 除了以上部分配置，还有很多例如地球、天空盒、光照等等

Scene对象配置及效果

// 地球是否展示,效果如下图
this.viewer.scene.globe.show = false

 Scene控制相机调整视口和高度

 // 地球是否展示
 this.viewer.scene.globe.show = true
 // scene控制相机对视口切换
 this.viewer.scene.camera.setView({ 
    destination: Cesium.Cartesian3.fromDegrees(114.21, 30.55, 1500) 
 })

       Scene可以控制对整个场景环境进行修改，如修改地球的显示隐藏、光照强度、地形数据和图层绘制、图层样式等等，它还控制着整个场景的交互，如鼠标对场景的控制、相机视口的移动。

Entity对象创建一个球及效果

const entity = this.viewer.entities.add({
     position: Cesium.Cartesian3.fromDegrees(114.21, 30.55, 400),
     ellipsoid: {
          radii: new Cesium.Cartesian3(400.0, 400.0, 400.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
     }
})
this.viewer.trackedEntity = entity

 正面：

 关于Entity的API 创建的受支持形状和体积的完整列表：Creating Entities – Cesium

DataSourceCollection对象使用效果及展示

 以上我们可以看到DataSource包含了很多数据源对象：

• CzmlDataSource
• GeoJsonDataSource
• GpxDataSource
• KmlDataSource
  ​​

不同的对象类型，加载数据的效果有所区别，我这边简单做几个数据源效果

Czml数据源：

const czml = [
     {
          id: 'document',
          name: 'CZML Model',
          version: '1.0'
     },
     {
          id: 'aircraft model',
          name: 'Cesium Air',
          position: {
               cartographicDegrees: [114.21, 30.55, 600]
          },
          model: {
          gltf: window.CESIUM_BASE_URL + '/SampleData/models/CesiumAir/Cesium_Air.glb',
          scale: 2.0,
          minimumPixelSize: 128
          }
     }
     ]
 
const dataSourcePromise = this.viewer.dataSources.add(
     Cesium.CzmlDataSource.load(czml)
)
            
dataSourcePromise.then(dataSource => {
     this.viewer.trackedEntity = dataSource.entities.getById('aircraft model')
}).catch(function(error) {
     window.alert(error)
})

 GeoJson数据源：

this.viewer.dataSources.add(
Cesium.GeoJsonDataSource.load(window.CESIUM_BASE_URL + '/SampleData/ne_10m_us_states.topojson',
      {
            stroke: Cesium.Color.HOTPINK,
            fill: Cesium.Color.PINK.withAlpha(0.5),
            strokeWidth: 3
      })
)
this.viewer.camera.lookAt(
      Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
      new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0)
)
this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)

加载Gpx数据源：

// 加载Gpx源数据
loadGpxData() {
        const that = this
        that.viewer.dataSources.add(Cesium.GpxDataSource.load(
                window.CESIUM_BASE_URL +  '/SampleData/gpx/complexTrk.gpx',
                {clampToGround: true}
)).then(function(dataSource) {
        that.viewer.flyTo(dataSource.entities)
})
}

 加载kml数据源：

const that = this
that.viewer.dataSources.add(Cesium.KmlDataSource.load(
    window.CESIUM_BASE_URL +      '/SampleData/kml/bikeRide.kml'
))