学习【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'
))

 

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

New_Wang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值