Cesium Viewer 类学习

Viewer提供了创建和控制3D场景所需的所有基本功能,包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。

构造函数:

new Cesium.Viewer(container, options)
是用来创建一个新的 Cesium 视图器(Viewer)实例的构造函数

  • container:必需,表示视图器容器元素的ID字符串或HTML元素。
  • options:可选,是一个包含所有初始选项的JavaScript对象,可以控制如何呈现三维场景、哪些数据源可用以及视图控制器的行为等方面。
    例:
  const viewer = new Cesium.Viewer('cesiumContainer',{
    animation:false,//动画小部件
    baseLayerPicker:false,//地图图层组件
    fullscreenButton:false,//全屏组件
    geocoder:false,//地理编码搜索组件
    homeButton:false,//首页组件
    infoBox:false,//信息框
    sceneModePicker:false,//场景模式
    selectionIndicator:false,//选取指示器组件
    timeline:false,//时间轴
    navigationHelpButton:false,//帮助按钮
    navigationInstructionsInitiallyVisible:false, // 导航指示
  })

成员变量:

  • animation: Animation实例,表示动画控制器,可以用于控制动画的播放和暂停。
  • baseLayerPicker: BaseLayerPicker实例,用于选择底图图层。
  • bottomContainer: HTMLElement实例,表示Viewer中底部的HTML容器元素。
  • camera: Camera实例,表示当前的相机,可以通过该实例控制相机的位置、姿态等属性。
  • canvas: HTMLCanvasElement实例,表示Viewer中渲染3D场景的Canvas元素。
  • cesiumWidget: CesiumWidget实例,Viewer的基础构建块。
  • clock: Clock实例,表示时钟,可以用于控制时间相关的可视化效果。
  • clockViewModel: ClockViewModel实例,表示时钟视图模型,用于控制时间相关的可视化效果。
  • container: HTMLElement实例,表示Viewer的HTML容器元素。
  • creditContainer: HTMLElement实例,表示Viewer中版权信息的HTML容器元素。
  • dataSourceDisplay: DataSourceDisplay实例,用于显示数据源中的实体。
  • entities: EntityCollection实例,用于管理所有的实体对象。
  • fullscreenButton: FullscreenButton实例,用于全屏显示Viewer的内容。
  • geocoder: Geocoder实例,用于地名搜索和定位。
  • homeButton: HomeButton实例,用于将相机位置和姿态重置为默认值。
  • imageryLayers: ImageryLayerCollection实例,表示图像图层集合,可以添加或删除不同的图层。
  • infoBox: InfoBox实例,用于显示实体的详细信息和属性。
  • navigationHelpButton: NavigationHelpButton实例,用于显示Viewer中的导航帮助信息。
  • postProcessStages: PostProcessStageCollection实例,表示后处理阶段的集合,可以添加或删除不同的后处理效果。
  • projectionPicker: ProjectionPicker实例,用于选择不同的地球投影方式。
  • scene: Scene实例,表示三维场景,包含了所有的3D对象和图层以及相机参数等信息。
  • screenSpaceEventHandler: ScreenSpaceEventHandler实例,用于处理鼠标和触摸事件。
  • selectedEntity: Entity实例,表示当前选中的实体。
  • selectionIndicator: SelectionIndicator实例,用于显示当前选中实体的指示器。
  • shadowMap: ShadowMap实例,用于生成和渲染阴影图。
  • skyBox: SkyBox实例,用于设置天空盒。
  • skyBoxEllipsoid: Cartesian3实例,表示天空盒所在的椭球体。
  • sun: Sun实例,用于控制太阳的位置和光照效果。
  • targetFrameRate: Number类型,表示目标帧率。
  • terrainProvider: TerrainProvider实例,表示当前使用的地形提供程序。
  • terrainShadows: ShadowMode类型,表示地形产生阴影的模式。
  • useDefaultRenderLoop: Boolean类型,表示是否使用默认的渲染循环。
  • useBrowserRecommendedResolution: Boolean类型,表示是否使用浏览器推荐的分辨率

常用方法:

  • destroy(): 销毁Viewer实例。
  • flyTo(target, options): 使相机飞行到指定的目标位置,并设置相应的动画效果和参数。
  • forceResize(): 强制刷新Viewer的大小和位置。
  • isDestroyed(): 判断Viewer是否已经销毁。
  • render(): Promise: 渲染3D场景并返回Promise对象,用于异步等待渲染结果。
  • resize(): undefined: 调整Viewer的大小和位置。
  • zoomTo(target, offset): 用于将视图缩放到指定的范围或尺寸的函数,target:定位到的实体、实体集合、数据源等。 offset:偏移量。

flyTo使用

// 定义目标位置和视角
  let targetPosition = Cesium.Cartesian3.fromDegrees(120.84, 30.15, 178500);
  let heading = Cesium.Math.toRadians(90.0);
  let pitch = Cesium.Math.toRadians(-45.0);
  let roll = Cesium.Math.toRadians(0.0);

  // 相机飞到目标点
  viewer.camera.flyTo({
    destination: targetPosition,
    orientation: {
      heading:heading, // 相机绕z轴旋转
      pitch:pitch, // 相机绕y轴旋转
      roll:roll // 相机绕x轴旋转
    },
    duration: 3 // 飞行动画时长
  });
  • 21
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值