<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Cesium实现相机360度环绕固定点旋转</title>
<script src='https://cdn.bootcdn.net/ajax/libs/cesium/1.98.1/Cesium.js'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/cesium/1.98.1/Widgets/widgets.css' rel='stylesheet'>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer");
rotateCamera({ lng: 116.404125, lat: 39.914714, pitch: -35, height: 400 });// 相机绕点环绕飞行
function rotateCamera(options) {
var position = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, 0.0);
// 相机看点的角度,如果大于0那么则是从地底往上看,所以要为负值,这里取-30度
var pitch = Cesium.Math.toRadians(options.pitch);
// 给定飞行一周所需时间,比如30s, 那么每秒转动度数
var angle = 360 / 30;
// 给定相机距离点多少距离飞行
var distance = options.height;
var startTime = Cesium.JulianDate.fromDate(new Date());
var stopTime = Cesium.JulianDate.addSeconds(startTime, 30, new Cesium.JulianDate());
viewer.clock.startTime = startTime.clone(); // 开始时间
viewer.clock.stopTime = stopTime.clone(); // 结速时间
viewer.clock.currentTime = startTime.clone(); // 当前时间
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。// 相机的当前heading
var initialHeading = viewer.camera.heading;
var Exection = function TimeExecution() {// 当前已经过去的时间,单位s
var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
// 根据过去的时间,计算偏航角的变化
var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, distance));
if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
viewer.clock.onTick.removeEventListener(Exection);
}
}; viewer.clock.onTick.addEventListener(Exection);
}
</script>
</body>
Cesium实现相机360度环绕固定点旋转
于 2023-08-17 18:04:38 首次发布