1.camera详解

new Cesium.Camera (scene)

摄像机由位置，方向和视锥台定义。

方向与视图形成正交基准，上和右=视图x上单位矢量。

视锥由6个平面定义。每个平面都由 Cartesian4 对象表示，其中x，y和z分量定义垂直于平面的单位矢量，w分量是从原点/相机位置开始的平面。

Name	Type	Description
`scene`	Scene	现场。

Example:

// Create a camera looking down the negative z-axis, positioned at the origin,
// with a field of view of 60 degrees, and 1:1 aspect ratio.
var camera = new Cesium.Camera(scene);
camera.position = new Cesium.Cartesian3();
camera.direction = Cesium.Cartesian3.negate(Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
camera.up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Y);
camera.frustum.fov = Cesium.Math.PI_OVER_THREE;
camera.frustum.near = 1.0;
camera.frustum.far = 2.0;

Camera提供以下成员：

例如设置默认视角（弧度制）：

//设置默认视角（弧度制）
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle(0.2308051452597943,//west-0.9708868758478914,//south0.7277505257203901,//east0.78817571480016838//north
);

获取当前相机视角：

const gui = new dat.GUI();
onMounted(() => {let params = {ViewRect: () => {// 计算相机视角const currentViewRect = viewer.camera.computeViewRectangle();console.log(currentViewRect);//输出当前视角// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = currentViewRect;},};// 获取相机视角gui.add(params, "ViewRect");
})

2.设置时钟

new Cesium.Clock ( options )

Throws:

DeveloperError :startTime必须在stopTime之前。

Example:

// Create a clock that loops on Christmas day 2013 and runs in real-time.
var clock = new Cesium.Clock({startTime : Cesium.JulianDate.fromIso8601("2013-12-25"),currentTime : Cesium.JulianDate.fromIso8601("2013-12-25"),stopTime : Cesium.JulianDate.fromIso8601("2013-12-26"),clockRange : Cesium.ClockRange.LOOP_STOP,clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER
});

See:

ClockStep
ClockRange
JulianDate

clock包含以下成员：

示例代码：

// 初始化时间const clock = new Cesium.Clock({startTime: Cesium.JulianDate.fromIso8601("2022-06-13"),//开始时间currentTime: Cesium.JulianDate.fromIso8601("2022-06-13"),//当前时间stopTime: Cesium.JulianDate.fromIso8601("2022-06-16"),//结束时间clockRange: Cesium.ClockRange.LOOP_STOP,//时钟范围 //CLAMPED-到达时不会前进  /UNBOUNDED-始终沿前方前进 /LOOP_STOP-到达结束时间时到间隔的另一端，当时间倒流时不会前进过去开始时间clockStep: Cesium.ClockStep.TICK_DEPENDENT,//时钟步长multiplier: 60,//倍增器shouldAnimate: true,});var viewer = new Cesium.Viewer("cesiumContainer", {clockViewModel: new Cesium.ClockViewModel(clock),});viewer.scene.globe.enableLighting = true;//设置太阳光照

3.案例：

能够获取当前视角的弧度制坐标，设置当前默认视角；

设置用于跟踪模拟时间的简单时钟。

<template><div id="cesiumContainer" ref="cesiumContainer"></div>
</template><script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import * as dat from "dat.gui";
// console.log(flightData);
const gui = new dat.GUI();// 设置cesium的token
Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   // 西边经度
//   89.5,
//   // 南边维度
//   0.4,
//   // 东边经度
//   110.4,
//   // 北边维度
//   81.2
// );
//设置默认视角（弧度制）
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle(0.2308051452597943,//west-0.9708868758478914,//south0.7277505257203901,//east0.78817571480016838//north
);onMounted(() => {// 初始化时间const clock = new Cesium.Clock({startTime: Cesium.JulianDate.fromIso8601("2022-06-13"),//开始时间currentTime: Cesium.JulianDate.fromIso8601("2022-06-13"),//当前时间stopTime: Cesium.JulianDate.fromIso8601("2022-06-16"),//结束时间clockRange: Cesium.ClockRange.LOOP_STOP,//时钟范围 //CLAMPED-到达时不会前进  /UNBOUNDED-始终沿前方前进 /LOOP_STOP-到达结束时间时到间隔的另一端，当时间倒流时不会前进过去开始时间clockStep: Cesium.ClockStep.TICK_DEPENDENT,//时钟步长multiplier: 60,//倍增器shouldAnimate: true,});var viewer = new Cesium.Viewer("cesiumContainer", {clockViewModel: new Cesium.ClockViewModel(clock),});viewer.scene.globe.enableLighting = true;//设置太阳光照// 设置沙箱允许使用JSvar iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-popups allow-forms");iframe.setAttribute("src", "");// // 隐藏cesiumLogoviewer.cesiumWidget.creditContainer.style.display = "none";let params = {ViewRect: () => {// 计算相机视角const currentViewRect = viewer.camera.computeViewRectangle();console.log(currentViewRect);//输出当前视角// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = currentViewRect;},};// 获取相机视角gui.add(params, "ViewRect");
});
</script><style>
* {margin: 0;padding: 0;
}
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>

VUE3-Cesium（视角操作、时钟设置）相关推荐

Cesium 鼠标操作习惯设置
Cesium默认左键平移,中键旋转,右键缩放,但是这些功能都是可以绑定到任意键上的. 以下是将中键和右键功能互换的代码 //设置中键放大缩小viewer.scene.screenSpaceCamera ...
GIS数据处理-cesium中模型位置设置
GIS数据处理-cesium中模型位置设置介绍最近我收到不少人私信询问我,在cesium中加载3dtiles模型后如何调整模型位置,这里我就统一的介绍一下,我是怎么处理的以供大家参考. 常见模型分 ...
cesium 鼠标操作习惯修改鼠标左键旋转鼠标右键平移
修改鼠标操作习惯 // 倾斜视图鼠标左键旋转 viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEve ...
计算机的时钟设置错误,错误：系统时钟已被设置回过去的时间。这是不允许的！...
错误:系统时钟已被设置回过去的时间. 这是不允许的! 错误消息启动 Esri 软件产品可能会返回以下错误:错误: "系统时钟已被设置回过去的时间. 这是不允许的!" 原因任何将 ...
抖音文字时钟壁纸html源码,这次要把抖音网红文字时钟设置为壁纸了~
原标题:这次要把抖音网红文字时钟设置为壁纸了~ 本文作者作者:二娃_ https://juejin.im/post/5d52aea86fb9a06ae61aad5b 还记得上篇吗?我们先实现了抖音网 ...
s3c6410 时钟设置
S3C6410的时钟是挺复杂的.比51单片机的时钟要是要复杂多了去了.下面是时钟的框图. S3C6410共有3个PLL.PLL是时钟倍频用的.我使用的OK6410外部晶振是12M的.但是CPU的时钟是 ...
Cesium 视角跟随-第一人称视角漫游
Cesium 视角跟随-第一人称视角漫游实现思路核心代码完整代码在线示例 2023年4月19日更新-搞了一个 Cesium 镜像,欢迎使用:沙盒示例和 API 作为三维项目,以第一人称视角漫 ...
freescale飞思卡尔 HC9S12 系列单片机 Flash擦写详解（一）之时钟设置
Flash擦写的内容,个人做HC9S12系列单片机时觉得应该是各模块内容中最难而且是最麻烦的一步了.只有能够对Flash进行擦写以后,所做的Bootloader才有真正手段将串口或者其他通讯手段接收到 ...
《SolidWorks 2017中文版机械设计从入门到精通）》——1.4　操作环境设置
本节书摘来自异步社区<SolidWorks 2017中文版机械设计从入门到精通>一书中的第1章,第1.4节,作者: 赵罘 , 杨晓晋 , 赵楠更多章节内容可以访问云栖社区"异步 ...

VUE3-Cesium（视角操作、时钟设置）