cesium学习记录06-视图、场景与相机

这篇具有很好参考价值的文章主要介绍了cesium学习记录06-视图、场景与相机。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、视图(Viewer)

Viewer 是 Cesium 的最高级别的组件,它封装了很多功能,如场景(viewer.scene)、时间线、动画、相机(viewer.camera)、信息框、事件处理、实体集合(viewer.entities)、数据源管理 (viewer.dataSources)等。
Viewer 的创建通常关联到一个 HTML 元素,例如一个 div。
使用 Viewer,你可以方便地加载数据、设置时间、添加标记等。

创建Viewer实例
let viewer = new Cesium.Viewer(container, options);

container:必需,表示视图器容器元素的ID字符串或HTML元素。
options:可选,用于定制Viewer对象。有许多选项可以配置。更多选项请查看

示例代码:
// 实例化地球
    let viewerOption = {
      geocoder: false, // 地名查找,默认true
      homeButton: false, // 主页按钮,默认true
      sceneModePicker: false, //二三维切换按钮
      baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示true
      navigationHelpButton: false, // 问号图标,导航帮助按钮,显示默认的地图控制帮助
      // animation: false, // 动画控制,默认true .
      shouldAnimate: true, // 是否显示动画控制,默认true .
      shadows: true, // 阴影
      timeline: true, // 时间轴,默认true .
      CreditsDisplay: false, // 展示数据版权属性
      fullscreenButton: false, // 全屏按钮,默认显示true
      infoBox: true, // 点击要素之后显示的信息,默认true
      selectionIndicator: true, // 选中元素显示,默认true
      contextOptions: {
        webgl: {
          preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage
        }
      }
    };
  let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);

cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis

主要方法(更多内容请查看):

destroy(): 销毁viewer。
extend(): 扩展viewer。
resize(): 调整viewer的大小。
zoomTo(): 缩放视图以查看给定的对象。
flyTo(): 飞向一个对象。
forceResize(): 强制重新调整viewer的大小。

例如:

 viewer.destroy();      //销毁viewer

二、场景 (Scene)

(1)Scene 的定义和功能

Scene 是 Cesium 中 3D 地球的渲染场景,负责管理和渲染所有的图形内容,如地形、影像、3D 模型、点、线、多边形等。
它提供了对渲染过程的底层访问,包括设置环境(如天空、太阳、星星)、控制渲染效果、管理后处理等。

(2)Viewer 和 Scene 的关系

Viewer 内部持有一个 Scene 实例。当你创建一个 Viewer,它会自动为你创建一个 Scene。你可以认为 Viewer 是一个完整的应用框架,而 Scene 是其中的 3D 渲染部分。
总之,Viewer 提供了一个高级的接口,集成了很多功能,使得创建 3D 地球应用变得简单。而 Scene 则提供了对渲染的底层控制。在开发过程中,你可能大部分时间都在使用 Viewer,但当你需要对渲染进行细粒度的控制时,你会直接与 Scene 交互。

(3)添加实体的两种方法及其区别

比如;你可以使用viewer.entities.add(...)的方式向cesium中添加实体,也可以通过viewer.scene.primitives.add(...)的方式向cesium添加实体。viewer.entities 是一个实体集合(EntityCollection),它允许你添加、删除或搜索实体。当你向这个集合添加实体时,Cesium 会自动处理实体在 scene 中的渲染。所以,在代码中,实际上是在使用 viewer 的高级接口来操作实体,而不需要直接与 scene 交互。当然,如果需要进行更底层的渲染控制,那么可以直接使用 viewer.scene 来访问和操作 scene。

示例代码:

修改地球透明度

  /**
   * 修改地球透明度
   * @param {double} Alpha 透明度
   */
   changeGlobeAlpha: function(Alpha) {
    // 从场景中获取地球模型
    let globe = viewer.scene.globe;
    // 是否启用透明度功能
    globe.translucency.enabled = Alpha != 1;
    // 地球正面透明度
    globe.translucency.frontFaceAlpha = Alpha == 0 ? 0.1 : Alpha;
    // 地球背面透明度
    globe.translucency.backFaceAlpha = Alpha == 0 ? 0.1 : Alpha;
  },
示例代码:

添加场景特效之雪天效果

viewer.scene.postProcessStages.add(this.snowStage);
/**
   * 雪天效果
   */
  SnowEffect() {
    var viewer = this.viewer;
    let option = {
      snowSize: 0.01, // 雪花大小,值越大雪花越大 最好不要超过0.01
      snowSpeed: 60 // 雪花速度,值越大雪花越慢
    };
    this.snowStage = new Cesium.PostProcessStage({
      name: "czm_snow",
      fragmentShader: this.Snow(),
      uniforms: {
        snowSize: () => {
          return option.snowSize;
        },
        snowSpeed: () => {
          return option.snowSpeed;
        }
      }
    });
    viewer.scene.postProcessStages.add(this.snowStage);
  },
  /**
   * 雪天效果着色器
   * @returns {string} 着色器
   */
  Snow() {
    return "uniform sampler2D colorTexture;\n\
    varying vec2 v_textureCoordinates;\n\
    \n\
    uniform float snowSpeed;\n\
    uniform float snowSize;\n\
    float snow(vec2 uv,float scale){\n\
        float time = czm_frameNumber / snowSpeed;\n\
        float w=smoothstep(1.,0.,-uv.y*(scale/10.));\n\
        if(w<.1)return 0.;\n\
        uv+=time/scale;\n\
        uv.y+=time*2./scale;\n\
        uv.x+=sin(uv.y+time*.5)/scale;\n\
        uv*=scale;\n\
        vec2 s=floor(uv),f=fract(uv),p;\n\
        float k=3.,d;\n\
        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;\n\
        d=length(p);\n\
        k=min(d,k);\n\
        k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
        return k*w;\n\
    }\n\
    \n\
    void main(){\n\
        vec2 resolution = czm_viewport.zw;\n\
        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
        vec3 finalColor=vec3(0);\n\
        float c = 0.0;\n\
        c+=snow(uv,30.)*.0;\n\
        c+=snow(uv,20.)*.0;\n\
        c+=snow(uv,15.)*.0;\n\
        c+=snow(uv,10.);\n\
        c+=snow(uv,8.);\n\
        c+=snow(uv,6.);\n\
        c+=snow(uv,5.);\n\
        finalColor=(vec3(c));\n\
        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);\n\
        \n\
    }\n\
    ";
  },

cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis

三、相机(Camera)

Camera表示观察场景的视角。通过操作摄像机,可以控制视图的位置、方向和角度。
更多请查看

示例代码:
 //设置相机位置
    viewer.camera.setView({
      // 定义相机的目标位置(笛卡尔坐标)
      destination: {
        x: -2349785.4381783823,
        y: 4596905.031779513,
        z: 3743318.751622788
      },
      // 定义相机的方向和角度
      orientation: {
        // 相机的偏转角度(heading表示从正北开始逆时针旋转的角度。其数值是以弧度表示的。一个值为0的heading通常表示正北)
        // 偏航角(飞机向左飞还是向右飞)
        heading: 0.1015029573852555,
        // 相机的上下倾斜角度(一个负的pitch值表示相机是向下倾斜的。)
        // 俯仰角(飞机向上抬头或是向下低头)
        pitch: -0.3482370478292893,
        // 相机围绕其查看方向(或称前进方向)的旋转角度(当roll值为π/2或90°(转换为弧度)时,相机将绕其前进方向旋转90度。这意味着相机的“顶部”现在指向其右侧。)
        // 翻滚角(飞机沿前进方向轴顺时针翻转为正角度)
        roll: 0.00005029594533212389
      }
    });

Cesium中的orientation属性用于设定各种对象的方向,不仅仅是相机的方向,还包括其他实体如模型的方向。下面以飞机模型为例,当设定飞机模型的orientation,实际上是在定义飞机的朝向和姿态。想象自己在驾驶这架飞机,那么飞机的前进方向和你的视线方向在概念上是相似的,那么你的眼就相当于相机 。
飞机水平飞行:
cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis
飞机向左偏:
cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis
飞机抬头:
cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis
飞机顺时针旋转:
cesium学习记录06-视图、场景与相机,cesium学习,学习,cesium,gis

相机操作:

1,飞行(fly): 使相机飞向某个指定的位置。这通常是一个平滑的过渡,不仅仅是简单的位置变换。

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        lon,
        lat,
        height
      ),
      duration: duration //持续时间
    });

2,缩放(zoom): 使相机向前或向后移动,从而使视野放大或缩小。

// 缩小
viewer.camera.zoomOut(500); // 向后移动500米
// 放大
viewer.camera.zoomIn(500);  // 向前移动500米

3,移动(move): 沿着地平面或其他方向移动相机,而不改变它的高度或朝向。

// 向右移动
viewer.camera.moveRight(500);  // 地面上向右移动500米

4,视角(look): 改变相机的朝向,但不改变其位置。通常用于围绕某个点旋转。

viewer.camera.look(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-10));  // 向下看10度

5,平面扭转(twist): 改变相机的roll值,使相机绕其前进方向轴旋转。

viewer.camera.twistRight(Cesium.Math.toRadians(10));  // 顺时针扭转10度

6,3D旋转(rotate): 在三维空间中旋转相机,可以是任意方向的旋转。

viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10));  // 绕Z轴旋转10度

7,用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向,以使其始终面向某个特定的点或对象。

var targetPosition = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(targetPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 1500.0));

8,将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向,以最佳地查看某个特定的实体或对象文章来源地址https://www.toymoban.com/news/detail-639749.html

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),
    box: {
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.RED
    }
});
viewer.zoomTo(entity);
示例代码:
/**
   * 获得当前相机姿态及方位信息
   */
  GetCameraData() {
    var viewer = this.viewer;
    var dircartographic = viewer.scene.camera.positionCartographic;
    //相机姿态
    //角度转弧度:let radians=Cesium.Math.toRadians(degrees)
    //弧度转角度:let degrees=Cesium.Math.toDegrees(radians)
    var camerax = Cesium.Math.toDegrees(dircartographic.longitude).toFixed(6);
    var cameray = Cesium.Math.toDegrees(dircartographic.latitude).toFixed(6);
    var cameraz = dircartographic.height.toFixed(2);
    //相机方位
    var heading = Cesium.Math.toDegrees(viewer.scene.camera.heading);
    var pitch = Cesium.Math.toDegrees(viewer.scene.camera.pitch);
    var roll = Cesium.Math.toDegrees(viewer.scene.camera.roll);
    return {
      X: parseFloat(camerax),
      Y: parseFloat(cameray),
      Z: parseFloat(cameraz),
      heading: heading, //默认方向为正北,正角度为向东旋转,即水平旋转,也叫偏航角。值越大代表相机向右看的角度越大,值越小代表相机向左看的角度越大。
      pitch: pitch, //默认角度为-90,即朝向地面,正角度在平面之上,负角度为平面下,即上下旋转,也叫俯仰角。值越大代表相机向下看的角度越小
      roll: roll //默认旋转角度为0,左右旋转,正角度向右,负角度向左,也叫翻滚角。值越大代表相机向右倾斜的角度越大。
    };
  }

到了这里,关于cesium学习记录06-视图、场景与相机的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • cesium学习记录08-鼠标绘制多边形

    上一篇学习了创建实体的一些基础知识,但有时还需要我们使用鼠标进行手动绘制,这一篇就来进行鼠标绘制实体的实现(点,线,矩形,圆,多边形)。 (这里需要掌握三个知识点,一是上一篇中的创建实体、二是鼠标事件、三是回调函数) 既然是鼠标绘制,自然离不开

    2024年02月12日
    浏览(48)
  • 【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)

    本人只是一个普普通通的 GIS 学生, 下面是记录我的写的一个作业 demo 的内容, 可能会存在一定的错误, 欢迎在评论区私信交流! *完整功能展示看这里 (B站) *感兴趣可以下载完整 demo 看看 (阿里云盘) 本网站(GIS考研院校可视化专题网站)为2022年GIS考研初期准备择校的学生服务

    2024年02月13日
    浏览(85)
  • Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3

    将倾斜摄影OSGB数据转换为3dtile(转换方式很多,可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图,可以加载其他地图都行 加载3dtile数据到地图中展示 以加载天地图为例,需要先到天地图官网去申请开发者,获取一个token,以下代码直接粘贴就行,注释

    2024年02月11日
    浏览(56)
  • 三维GIS开发:利用Cesium加载 M3D 地质体模型(附代码)

    实现步骤 Step 1.  引用开发库 : 本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能; Step 2.  创建布局 : 创建 id=\\\'GlobeView\\\' 的 div 作为三维视图的容器,并设置其样式; Step 3.  构造三维场景控件 : 实例化 Cesium.WebSceneControl 对象,完成

    2024年02月10日
    浏览(44)
  • cesium学习记录08-鼠标绘制实体(点,线,矩形,圆,多边形)

    上一篇学习了创建实体的一些基础知识,但有时还需要我们使用鼠标进行手动绘制,这一篇就来进行鼠标绘制实体的实现(点,线,矩形,圆,多边形)。 (这里需要掌握三个知识点,一是上一篇中的创建实体、二是鼠标事件、三是回调函数) 既然是鼠标绘制,自然离不开

    2024年02月12日
    浏览(64)
  • MySQL学习记录——십삼 视图及用户、权限管理

    视图把查询出来的结果以表结构的形式存储起来,视图和基表有关系,两者的数据变化都会互相影响。 在查询时,假如要经常查询一条记录,select …,那么为了方便,可以这样写 create view 视图名 as select … 也就是将这条查询作为一个视图。此时所有表中就多了一个表,数据

    2024年02月22日
    浏览(45)
  • Ubuntu 20.04.06 PCL C++学习记录(十八)

    @[TOC]PCL中点云分割模块的学习 参考书籍:《点云库PCL从入门到精通》以及官方代码PCL官方代码链接,,PCL版本为1.10.0,CMake版本为3.16 PCL中实现欧式聚类提取。在点云处理中,聚类是一种常见的任务,它将点云数据划分为多个独立的簇或集群。每个簇代表点云中的一个独立物体或

    2024年04月16日
    浏览(42)
  • Ubuntu 20.04.06 PCL C++学习记录(十九)

    @[TOC]PCL中点云分割模块的学习 参考书籍:《点云库PCL从入门到精通》以及官方代码PCL官方代码链接,,PCL版本为1.10.0,CMake版本为3.16 源代码 CMakeLists.txt 运行结果 函数 pcl::RegionGrowing 是 PCL 库中提供的一种区域生长分割算法,它根据点云的几何特征(如法向量、曲率等)将点云

    2024年04月16日
    浏览(52)
  • GIS融合之路(三)CesiumJS和ThreeJS相机同步

    同样在这篇文章开始前重申一下,山海鲸并没有使用ThreeJS引擎。但由于ThreeJS引擎使用广泛,下文中直接用ThreeJS同CesiumJS的整合方案代替山海鲸中3D引擎和CesiumJS整合。 系列传送门: 山海鲸可视化:GIS融合之路(一)技术选型CesiumJS/loaders.gl/iTowns? 山海鲸可视化:GIS融合之路(

    2024年02月08日
    浏览(39)
  • PADS VX2.7学习记录06-PADS Router软件功能操作

    工具——选项 根据自己喜欢的颜色设置即可 PADS Router软件中,走线是F3快捷键 修线是Shift+S 走线时,打孔F4 1、根据BGA的大小,先确定过孔的大小 2、设置规则,安全间距,线宽,过孔 3、操作命令:编辑——特性 4、选择BGA器件,鼠标单击右键,选择扇出即可 链接: BGA扇出介绍

    2024年02月05日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包