CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度

CesiumJS

CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）

CesiumJS 官网：https://www.cesium.com/
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html

一、获取容器中心点

1、演示

html 复制代码

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Scene - 获取容器中心点</title>
		<link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.box {
				width: 200px;
				height: 200px;
				background-color: green;
			}

			#container {
				width: 500px;
				height: 500px;
			}
		</style>
	</head>

	<body>
		<div class="box"></div>
		<div id="container"></div>
	</body>

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		const viewer = new Cesium.Viewer("container");

		const canvas = viewer.scene.canvas;
		const rect = canvas.getBoundingClientRect();
		console.log("X：", rect.left + rect.width / 2);
		console.log("Y：", rect.top + rect.height / 2);
	</script>
</html>

复制代码

# 输出结果

X： 250
Y： 450

2、解读

js 复制代码

const canvas = viewer.scene.canvas;

viewer 是 Cesium 三维地球的实例对象
.scene 是场景管理器，包含所有 3D 内容
.canvas 返回底层的 HTML <canvas> 元素，即 WebGL 渲染 3D 图形的画布

js 复制代码

const rect = canvas.getBoundingClientRect();

这是一个原生 DOM 方法，返回值是一个 DOMRect 对象，包含相对于浏览器视口（viewport）的坐标信息

left / top：画布左上角距视口左上角的偏移量，单位为像素
right / bottom：画布右下角坐标
width / height：画布实际渲染宽高
x / y：同 left / top

3、注意事项

getBoundingClientRect 方法如果在视图未加载完成时调用，可能会得到错误的值

二、Cartesian3 clone 方法

1、基本介绍

js 复制代码

clone(result) → Cartesian3

clone 方法用于创建一个与当前对象值完全相同的新 Cartesian3 实例
参数 result 是可选的，如果传入一个现有的 Cartesian3 对象，结果会写入这个对象并返回，以复用内存；如果不传，会创建一个全新的对象

2、演示

js 复制代码

const original = new Cesium.Cartesian3(1.0, 2.0, 3.0);
const result = original.clone();

console.log(original);
console.log(result);
console.log(original === result);

复制代码

# 输出结果

et {x: 1, y: 2, z: 3}
et {x: 1, y: 2, z: 3}
false

js 复制代码

const original = new Cesium.Cartesian3(1.0, 2.0, 3.0);
const result = new Cesium.Cartesian3(10.0, 20.0, 30.0);

const newPosition = original.clone(result);

console.log(original);
console.log(result);
console.log(newPosition);

console.log(newPosition === original);
console.log(newPosition === result);

复制代码

# 输出结果

et {x: 1, y: 2, z: 3}
et {x: 1, y: 2, z: 3}
et {x: 1, y: 2, z: 3}
false
true

三、修改 Cartesian3 对象的高度

1、基本介绍

不能直接改 Cartesian3 对象。需要先转成地理坐标（Cartographic），修改高度，再转回 Cartesian3

2、演示

js 复制代码

const original = new Cesium.Cartesian3(1.0, 2.0, 3.0);

const cartographic = Cesium.Cartographic.fromCartesian(original);

cartographic.height = cartographic.height + 1000;

const newPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);

console.log(original);
console.log(newPosition);

复制代码

# 输出结果

et {x: 1, y: 2, z: 3}
et {x: 7613.4815126920585, y: 15226.963025384117, z: -11396.224708943628}