当前位置：首页 > article >正文

CesiumJS 案例 P3：清空默认图层、添加纯色图层、创建圆点、创建矩形

article 2025/1/11 7:44:18

CesiumJS

CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html
CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）

一、清空默认图层

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>清空默认图层</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%;
			}

			.container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

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

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmM3MTFjMC1mOTIyLTQ4MmItYWU0MC0wNWM5ODdjZWIzOGMiLCJpZCI6MTI0NzQ5LCJpYXQiOjE2NzY0MzgxMDh9.xXOpAIyhIp3pd7ki0PuzXcbjowOEVVkd5skntQ8ra6I";

		const viewer = new Cesium.Viewer("container");

		// 清空默认图层
		while (viewer.imageryLayers.length > 0) viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
	</script>
</html>

二、添加纯色图层

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>添加纯色图层</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%;
			}

			.container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

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

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmM3MTFjMC1mOTIyLTQ4MmItYWU0MC0wNWM5ODdjZWIzOGMiLCJpZCI6MTI0NzQ5LCJpYXQiOjE2NzY0MzgxMDh9.xXOpAIyhIp3pd7ki0PuzXcbjowOEVVkd5skntQ8ra6I";

		const viewer = new Cesium.Viewer("container");

		// 清空默认图层
		while (viewer.imageryLayers.length > 0) viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

		// 创建一个画布（用于纯色纹理）
		const canvas = document.createElement("canvas");
		canvas.width = 256; // 纹理分辨率（可调整）
		canvas.height = 256;

		// 获取画布的 2D 渲染上下文
		const ctx = canvas.getContext("2d");

		// 用纯色填充画布
		ctx.fillStyle = "rgba(173, 216, 230, 0.5)";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		// 使用画布作为源创建一个图像提供器
		const colorImageryProvider = new Cesium.SingleTileImageryProvider({
			url: canvas.toDataURL(), // 画布的数据 URL
			rectangle: Cesium.Rectangle.MAX_VALUE, // 覆盖整个地球
			minimumLevel: 0, // 最小层级
			maximumLevel: 0, // 最大层级，确保图层不被分割或重复
		});

		viewer.imageryLayers.addImageryProvider(colorImageryProvider, {
			alphaBlending: true, // 允许透明度混合
		});
	</script>
</html>

三、创建圆点

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity - 创建圆点</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%;
			}

			.container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

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

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmM3MTFjMC1mOTIyLTQ4MmItYWU0MC0wNWM5ODdjZWIzOGMiLCJpZCI6MTI0NzQ5LCJpYXQiOjE2NzY0MzgxMDh9.xXOpAIyhIp3pd7ki0PuzXcbjowOEVVkd5skntQ8ra6I";

		const viewer = new Cesium.Viewer("container");

		// 创建实体实例
		const entity = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
			point: {
				pixelSize: 100,
				color: new Cesium.Color(0, 1, 0, 1),
			},
		});

		// 设置相机当前正在跟踪的实体实例
		viewer.trackedEntity = entity;
	</script>
</html>

四、创建矩形

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity - 创建矩形</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%;
			}

			.container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

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

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmM3MTFjMC1mOTIyLTQ4MmItYWU0MC0wNWM5ODdjZWIzOGMiLCJpZCI6MTI0NzQ5LCJpYXQiOjE2NzY0MzgxMDh9.xXOpAIyhIp3pd7ki0PuzXcbjowOEVVkd5skntQ8ra6I";

		const viewer = new Cesium.Viewer("container");

		// 创建实体实例
		const entity = viewer.entities.add({
			rectangle: {
				coordinates: Cesium.Rectangle.fromDegrees(
					-120.0, // 西经
					20.0, // 南纬
					-60.0, // 东经
					40.0 // 北纬
				),
				material: Cesium.Color.BLUE.withAlpha(0.5), // 半透明的蓝色
			},
		});

		// 设置相机当前正在跟踪的实体实例
		viewer.trackedEntity = entity;
	</script>
</html>