CesiumJS 案例 P35：添加图片图层（添加图片数据）

我命由我123452025-11-13 19:48

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

添加图片图层（添加图片数据）

html 复制代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>ImageryProvider - 添加图片图层（添加图片数据）</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>
		const viewer = new Cesium.Viewer("container");

		const west = 0; // 西经（西经为负）
		const south = 0; // 南纬（南纬为负）
		const east = 10; // 东经（东经为正）
		const north = 10; // 北纬（北纬为正）

		imageToBase64("../img/test.jpg", (base64) => {

			// 创建图片图层
			const imageryProvider = new Cesium.SingleTileImageryProvider({
				url: base64,
				rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),
			});

            const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider);
		});

		function imageToBase64(url, callback) {
			const img = new Image();
			img.crossOrigin = "Anonymous";
			img.onload = function () {
				const canvas = document.createElement("canvas");
				const ctx = canvas.getContext("2d");
				canvas.width = img.width;
				canvas.height = img.height;
				ctx.drawImage(img, 0, 0);

				const base64 = canvas.toDataURL("image/jpeg");
				callback(base64);
			};
			img.src = url;
		}
	</script>
</html>