Cesium入门之五:认识Cesium中的Viewer

这篇具有很好参考价值的文章主要介绍了Cesium入门之五:认识Cesium中的Viewer。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

在创建Viewer时,可以指定要使用的HTML元素(例如canvas),该元素将用于呈现3D场景。一旦创建了Viewer对象,就可以通过调用其方法来添加实体、图像覆盖物和其他元素,并对相机进行操作。

构造函数

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

它包含两个参数:

  • container:必需,表示视图器容器元素的ID字符串或HTML元素。
  • options:可选,是一个包含所有初始选项的JavaScript对象,可以控制如何呈现三维场景、哪些数据源可用以及视图控制器的行为等方面。
    下面代码在名为“cesiumContainer”的HTML元素中创建一个新的Cesium Viewer
  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:偏移量。

Viewer构造函数的初始化选项

  • animation: 是否显示动画控制面板,默认为true。当启用时,动画小部件会在场景下方展示当前时间和时间轴,可以通过鼠标交互来改变时间。
  • baseLayerPicker: 是否显示底图选择器,默认为true。底图选择器小部件可以让用户在不同的影像图层之间进行选择切换。
  • fullscreenButton: 是否显示全屏按钮,默认为true。全屏按钮允许用户将Viewer切换到全屏模式。
  • vrButton: 是否显示VR按钮,默认为false。(需要支持WebVR才能生效)。当用户在支持WebVR的设备中使用时,可以启用VR模式以获得更加沉浸式的体验。
  • geocoder:控制是否显示地理编码器小部件,默认为true。地理编码器小部件允许用户输入地址或地名来定位场景视角。
  • homeButton: 是否显示回到初始位置按钮,默认为true。Home按钮允许用户重置场景视角到初始状态。
  • infoBox: 是否显示信息框,默认为true。信息框小部件可以展示实体、位置、高程等详细信息。
  • sceneModePicker: 是否显示场景模式选择器,默认为true。场景模式选择器小部件可以让用户在三种场景模式之间进行切换:2D、3D、哥伦布视图。
  • selectionIndicator: 是否显示选择指示器,默认为true。选择指示器可用于显示场景中所选对象的轮廓或边框。
  • timeline: 是否显示时间轴控制面板,默认为true。时间轴小部件可以让用户拖动时间来改变场景的显示。
  • navigationHelpButton: 是否显示导航帮助按钮,默认为true。导航帮助按钮允许用户查看控制场景的快捷键和鼠标操作。
  • navigationInstructionsInitiallyVisible: 导航帮助是否一开始就可见,默认为true。如果设置为false,则需要用户手动点击导航帮助按钮才能查看导航说明。
  • scene3DOnly: 是否仅允许3D场景模式,默认为false。
  • shouldAnimate:是否应该在每一帧之间循环播放场景动画。如果设置为true,则会循环播放动画,否则将保持静态不动。通过设置此属性,可以控制场景动画是否自动播放。
  • clockViewModel: 时钟视图模型,用于配置时间轴和动画控制面板。
  • selectedImageryProviderViewModel: 默认选中的底图提供者视图模型。
  • imageryProviderViewModels: 底图提供者视图模型数组。
  • selectedTerrainProviderViewModel: 默认选中的地形提供者视图模型。
  • terrainProviderViewModels: 地形提供者视图模型数组。
  • imageryProvider: 底图提供者,可以是Cesium.UrlTemplateImageryProviderCesium.WebMapTileServiceImageryProvider等类型。
  • baseLayer:指定在场景中使用的初始图层。默认情况下,这个属性设置为ImageryLayer集合中的第一项,通常是显示卫星影像的底图。可以将自己的ImageryProvider传递给baseLayer属性,从而更改初始图层。此外,如果需要同时显示多个图层,则可以创建一个ImageryLayerCollection,并将多个图层添加到其中,然后将其中一个图层设置为基础图层。
  • terrainProvider: 地形提供者,可以是Cesium.CesiumTerrainProviderCesium.GoogleEarthEnterpriseTerrainProvider等类型。
  • terrain:指定一个地形提供者(TerrainProvider),用于加载和显示场景中的地形数据。默认情况下,Cesium会加载一些全球高程数据,并使用这些数据来生成场景中的地形。如果想要更改或增强地形数据,则可以将自己的地形提供者传递给terrain属性。例如,可以使用ArcGIS Server、Mapbox或OpenTopography等服务,来获取更准确或更详细的地形数据。需要注意的是,使用地形数据会增加场景的复杂性和资源消耗,因此需要谨慎使用。
  • skyBox: 天空盒样式,可以是Cesium.SkyBox或者Cesium.Color类型。
  • skyAtmosphere: 大气层设置,可用于控制大气层渲染效果。
  • fullscreenElement: 全屏元素,默认为undefined,表示使用全局document.documentElement进行全屏。
  • useDefaultRenderLoop: Boolean类型,表示是否使用默认的渲染循环。
  • targetFrameRate: Number类型,表示目标帧率。
  • showRenderLoopErrors: 是否显示渲染循环错误信息,默认为true。
  • useBrowserRecommendedResolution: Boolean类型,表示是否使用浏览器推荐的分辨率。
  • automaticallyTrackDataSourceClocks: 是否自动跟踪数据源时钟,当设置为true时,数据源始终与场景时钟同步,如果数据源没有时钟,则不会跟踪。默认为true。
  • contextOptions: WebGL上下文参数,可以设置antialias、depth、stencil、alpha、premultipliedAlpha等属性。
  • sceneMode: 场景模式,有Cesium.SceneMode.SCENE3DCesium.SceneMode.COLUMBUS_VIEWCesium.SceneMode.SCENE2D三种,默认为SCENE3D。
  • mapProjection: 地图投影方式,可以是Cesium.WebMercatorProjection或者Cesium.GeographicProjection类型,默认为WebMercatorProjection。
  • globe: 地球对象,可以用于控制地球的旋转、缩放和其他属性。
  • orderIndependentTranslucency: 是否启用独立透明度排序,默认为true。
  • creditContainer: 显示数据源的HTML元素,默认为undefined,表示使用内置元素。
  • creditViewport: 显示数据源的矩形区域,默认为undefined,表示使用整个视窗。
  • dataSources: 数据源数组,包括所有可视化实体和图层。
  • shadows: 是否启用阴影渲染,默认为false。
  • terrainShadows: ShadowMode类型,表示地形产生阴影的模式。
  • mapMode2D: 在2D场景模式下是否显示地图,默认为true。
  • projectionPicker: 是否显示投影方式选择器,默认为true。
  • blurActiveElementOnCanvasFocus:控制当用户点击或悬停在Cesium Viewer的画布上时,是否将焦点从当前DOM元素中移出。如果设置为true,则会自动将焦点从当前的DOM元素中移开,以便Cesium Viewer可以接收键盘事件和鼠标事件。
    这个属性对于在Web应用程序中使用Cesium Viewer时很有用,因为用户可能需要与其他DOM元素进行交互,例如输入文本或单击按钮。如果不把焦点从当前元素移开,用户将不能使用键盘或鼠标来与Cesium Viewer进行交互。
    需要注意的是,默认情况下,此属性被设置为true,因此当用户点击或悬停在Cesium Viewer的画布上时,焦点将会自动从当前的DOM元素中移开。如果您想要保留焦点,请将该属性设置为false。
  • requestRenderMode: 请求渲染模式,有RequestRenderMode.AUTOMATICRequestRenderMode.MANUAL两种,默认为AUTOMATIC。
  • maximumRenderTimeChange: 最大帧率限制,表示相邻两帧之间最多允许刷新的时间差(毫秒),如果超过该值则自动降低帧率。默认为0,表示不限制帧率。
  • depthPlaneEllipsoidOffset:可以指定深度测试平面相对于椭球体表面的偏移量。这个属性通常用于解决多个三维模型重叠时出现的Z-fighting问题,即两个或多个物体处于同一深度位置,导致图像闪烁或不清晰。
    通过将depthPlaneEllipsoidOffset设置为一个Cartesian3类型的向量,可以将深度测试平面上移或下移一定距离。需要注意的是,改变深度测试平面的偏移量可能会影响场景中的渲染效果和性能。因此,应该谨慎使用这个属性,并进行必要的测试和优化。
    另外,需要注意的是,在Viewer对象中设置depthPlaneEllipsoidOffset属性并不会影响到所有场景中的实体。如果想要对单独的场景实体进行深度测试平面的偏移量设置,需要参考Scene对象的depthPlaneEllipsoidOffset属性。
  • msaaSamples:控制多重采样(Multisample Anti-Aliasing,简称MSAA)的采样数。MSAA是一种抗锯齿技术,可以减少物体边缘出现的锯齿和走样效果,提高渲染图像的质量。
    通过将msaaSamples属性设置为一个正整数,您可以指定每个像素采样的次数。默认情况下,这个属性被设置为4,表示每个像素采样4次,以获得更平滑的边缘效果。如果您将这个值设置为0或1,将禁用MSAA,将不会进行多重采样,从而降低了渲染质量。
    需要注意的是,增加MSAA采样数会增加GPU的计算负担和内存消耗,可能会影响场景的性能。因此,在使用MSAA时应该谨慎选择采样数,并进行必要的测试和优化。

使用flyTo方法飞行到指定位置

// 定义目标位置和视角
  var targetPosition = Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 1500);
  var heading = Cesium.Math.toRadians(90.0);
  var pitch = Cesium.Math.toRadians(-45.0);
  var roll = Cesium.Math.toRadians(0.0);

  // 相机飞到目标点
  viewer.camera.flyTo({
    destination: targetPosition,
    orientation: {
      heading:heading,
      pitch:pitch,
      roll:roll
    },
    duration: 3 // 飞行动画时长
  });

刷新浏览器,可以看到飞行的过渡效果
Cesium入门之五:认识Cesium中的Viewer
Viewer类是Cesium中非常重要的类,它提供了许多常用的功能,如地形数据加载、影像数据加载、高度测量以及绘制几何图形等,后面会进行介绍,这次先介绍到这里,喜欢的小伙伴点赞关注加收藏哦文章来源地址https://www.toymoban.com/news/detail-478562.html

到了这里,关于Cesium入门之五:认识Cesium中的Viewer的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Iceberg从入门到精通系列之五:Zeppelin集成iceberg,创建iceberg普通表和分区表,并插入数据

    Zeppelin支持Flink SQL Flink SQL支持iceberg Zeppelin集成Flink SQL后,就可以在Zeppelin上创建iceberg表了 下面演示下Zeppelin集成iceberg后,创建表,插入数据的方便性。

    2024年02月11日
    浏览(48)
  • 教你使用 Reflector中的Reflexil插件反编译.NET,修复Help Viewer v2.0 - Error: .cab未经Microsoft签名

    问题: 在Microsoft帮助查看器的“添加和删除内容”选项卡中选择“书籍”后,您将不得不等待最多多GB才能下载,具体取决于您的选择。下载完成后,您可能会看到以下错误: 此外,每次重试下载过程(例如,在重新安装根证书或其他措施后)时,程序都不够智能,无法保留

    2024年02月04日
    浏览(86)
  • Cesium 中的 ScreenSpaceCameraController 介绍

    Cesium 中的 ScreenSpaceCameraController 是一个控制相机行为的组件,它提供了一些方法和属性来控制相机的运动和交互。 ScreenSpaceCameraController 主要的作用是处理相机的用户交互行为,例如鼠标和键盘事件。它可以通过以下方式影响相机的行为: 控制相机的移动: ScreenSpaceCameraCon

    2024年02月07日
    浏览(37)
  • Cesium快速入门

    Cesium是全世界使用最广泛的3D WebGIS引擎。国内有若干个GIS厂家的3D GIS引擎也是基于Cesium进行开发。随着国家“新基建、数字化”战略的不断发展深化,越来越多的城市数字化项目需要用上3D GIS引擎,对Web端而言,Cesium几乎是不二的选择。但开源的项目,一般门槛都会高一点,

    2024年02月13日
    浏览(25)
  • 前端中的三维技术Cesium

    前端中的三维技术主要有以下几种: WebGL:WebGL是一种基于OpenGL ES 2.0标准的3D图形渲染技术,它能够在Web浏览器中呈现出高性能、交互式的3D视觉效果。 Three.js:Three.js是一个轻量级的JavaScript库,它为WebGL提供了更高层次的抽象,使得使用WebGL变得更加容易。通过Three.js,开发者

    2024年02月06日
    浏览(55)
  • Cesium 3D中的通视分析功能

    通视分析是一种在地理空间中确定两个位置之间是否存在可见线的技术。在Cesium 3D中,我们可以利用其强大的功能集来进行通视分析。本文将介绍如何使用Cesium 3D进行通视分析,并提供相应的源代码。 在开始之前,我们需要确保已经正确加载了Cesium 3D库。接下来,我们将介绍

    2024年04月13日
    浏览(47)
  • cesium中的坐标系统与转换

    1.cesium坐标介绍 cesium开发中常用的坐标系统 屏幕坐标系统(二维) 笛卡尔空间直角坐标系统(WGS84) 地理坐标系统(经纬度坐标) Cesium目前支持两种坐标系WGS84地理WKID=4326和WebMercator:WKID=3857,但是在Cesium中没有实际的对象来描述WGS84坐标,都是以弧度的方式来进行运用的也就是C

    2024年01月16日
    浏览(30)
  • CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)

    简述:Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可

    2024年02月10日
    浏览(45)
  • Vue:Vue项目中的Cesium配置备忘录

    作者:CSDN @ _乐多_ 本文记录了 Vue 项目中配置 Cesium 相关过程和细节。 一、安装Cesium 在node_modules中找到Cesium,将其中的Cesium文件夹复制到public中。 二、配置 index.html 主要加入这两行, 整个 index.html 如下, 声明: 本人作为一名作者,非常重视自己的作品和知识产权。在此声

    2024年02月06日
    浏览(33)
  • 第六章 Cesium学习入门之添加Geojson数据(dataSource)

    第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境 第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏 第三章 Cesium学习入门之地形数据(DEM)的加载 第四章 Cesium学习入门之加载离线影像图(tif) 第五章 Cesium学习入门之加载影像WMTS切片服务(ArcGIS/Geowebcache) 第六章 Ce

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包