Cesium 设置视角的两种方式

2023-10-27

作为开源WebGIS三维可视化领域的翘楚,Cesium中可以可以添加不同的Entity实体数据,也可以添加各种各样的模型数据,那么当我们添加好数据之后,如何设置视角以便于观察呢,这里介绍两种不同的方式设置视角。一种是设置添加数据的orientation属性来设置视角,另一种是设置相机的角度来设置视角。

设置 orientation 属性

这个方法是通过数据实体的坐标position和欧拉角(heading,pitch, roll),计算出四元数,四元数是绕空间某一点旋转的参数,即可设置orientation。Cesium里面的Transforms类有headingPitchRollQuaternion(origin,headingPitchRoll) 方法。
在这里插入图片描述

var myEntity = null;
var position = Cesium.Cartesian3.fromDegrees(120, 39, 0);
myEntity = window.viewer.entities.add({
  position: position,
  model: {
    uri: "./data/Flamingo.glb",
    scale: 600,
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
  },
});
//设置 entity 的 orientation
//垂直屏幕转圈
var heading = Cesium.Math.toRadians(0);
//贴着屏幕转圈
var pitch = 0;
//原地翻转
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
//计算四元数
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
  position,
  hpr
);
myEntity.orientation = orientation;
//追踪
window.viewer.trackedEntity = myEntity;

通过此种方法即可设置实体类数据的视角。

设置相机角度

换个思路,当数据不动的时候,可以设置相机动,设置相机绕着数据旋转,这样,也可以通过不同的视角观察数据。Cesium里面的Camera中有lookAt(target, offset)方法。
在这里插入图片描述

其实设置相机的视角,还是通过欧拉角(heading,pitch, range),来设置相机的视角。

var center = Cesium.Cartesian3.fromDegrees(120, 39, 10000);
var heading = Cesium.Math.toRadians(0.0);
var pitch = Cesium.Math.toRadians(-60.0);
var range = 5000.0;
var i = 0;
viewer.camera.lookAt(cc, new Cesium.HeadingPitchRange(heading, pitch,range));
setInterval(() => {
  i--;
  if (i <= -30) {
    i = 0;
  }
  pitch = Cesium.Math.toRadians(-60.0 + i);
  viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
}, 500);

通过此种方法,可以设置相机绕点旋转来设置视场,使用setInterval或者requestAnimationFrame函数循环让视角动起来。配上地形数据,大场景一下子就起来了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cesium 设置视角的两种方式 的相关文章

  • MySQL数据库之DML(数据操纵语言)

    1 DML 数据操纵语言 在进行数据库操作时 首先就是要使用DML 数据操纵语言 数据操纵语言主要由插入数据 insert 更新数据 update 以及删除数据 delete 组成 这些操作主要是针对 数据表中的数据 2 插入数据 INSE
  • 论文解读:Inpaint Anything: Segment Anything Meets Image Inpainting

    论文 https arxiv org pdf 2304 06790 pdf 代码 https github com geekyutao Inpaint Anything 图1 Inpaint Anything示意图 用户可以通过点击图像中的
  • Kanzi入门学习教程

    锋影 e mail 174176320 qq com 1 安装Kanzi 2 使用Kanzi studio创建工程 Kanzi创建的工程会包含以下目录结构 其中 Tool project文件夹中存放的是设计师设计的工程 包含kanzi UI
  • 不同业务场景下数据同步方案设计

    企业开发实践中通常需要提供数据搜索的功能 例如 电商系统中的商品搜索 订单搜索等 通常 搜索任务通常由搜索引擎担当 如Elasticsearch 而我们的原始数据为了安全性等问题通常存储在关系型数据库中 在搜索数据前 我们需要先将数据从关系
  • 前端性能优化指南

    一 常用指标 1 FP First Paint 页面在导航后首次呈现出不同于导航前内容的时间点 计算方式 白屏时间 firstPaint pageStartTime 2 FCP First Contentful Paint 从页面开始加载到
  • pandas 选取行和列的方法

    本文介绍在 pandas 中如何读取数据行列的方法 数据由行和列组成 在数据库中 行被称作记录 record 列被称作字段 field 回顾一下我们对记录和字段的获取方式 比较常见的 字段根据名称获取 记录根据筛选条件获取 比如获取 stu

随机推荐