CesiumJS 案例 P30：Entity 点击事件（单个圆点点击事件，多个圆点点击事件）

本文链接：https://blog.youkuaiyun.com/weixin_52173250/article/details/143968945

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、编码 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity 点击事件 - 单个圆点（编码 1）</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 initialColor = new Cesium.Color(0, 1, 0, 1);

		// 变化颜色，蓝色
		const highlightedColor = new Cesium.Color(0, 0, 1, 1);

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

		// 给实体实例添加点击事件
		viewer.screenSpaceEventHandler.setInputAction((movement) => {
			const pickedObject = viewer.scene.pick(movement.position);
			if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
				// 点击了，改变颜色
				entity.point.color = highlightedColor;
			} else {
				// 未点击，恢复颜色
				entity.point.color = initialColor;
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

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

2、编码 2

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity 点击事件 - 单个圆点（编码 2）</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 initialColor = new Cesium.Color(0, 1, 0, 1);

		// 变化颜色，蓝色
		const highlightedColor = new Cesium.Color(0, 0, 1, 1);

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

		// 给实体实例添加点击事件
		viewer.screenSpaceEventHandler.setInputAction((movement) => {
			const pickedObject = viewer.scene.pick(movement.position);
			if (!Cesium.defined(pickedObject)) {
				// 未点击，恢复颜色
				entity.point.color = initialColor;
				return;
			}
			if (pickedObject.id !== entity) {
				// 未点击，恢复颜色
				entity.point.color = initialColor;
				return;
			}

			// 点击了，改变颜色
			entity.point.color = highlightedColor;
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

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

3、编码 3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity 点击事件 - 单个圆点（编码 3）</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 initialColor = new Cesium.Color(0, 1, 0, 1);

		// 变化颜色，蓝色
		const highlightedColor = new Cesium.Color(0, 0, 1, 1);

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

		// 给实体实例添加点击事件
		viewer.screenSpaceEventHandler.setInputAction((movement) => {
			const pickedObject = viewer.scene.pick(movement.position);
			entity.point.color = initialColor;
			if (!Cesium.defined(pickedObject)) return;
			if (pickedObject.id !== entity) return;
			entity.point.color = highlightedColor;
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

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

二、多个圆点点击事件

1、编码 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity 点击事件 - 多个圆点（编码 1）</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 initialColor = new Cesium.Color(0, 1, 0, 1);

		// 变化颜色，蓝色
		const highlightedColor = new Cesium.Color(0, 0, 1, 1);

		const myEntities = [];

		// 创建实体实例
		const entity1 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		const entity2 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 49.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		const entity3 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 59.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		myEntities.push(entity1);
		myEntities.push(entity2);
		myEntities.push(entity3);

		// 给实体实例添加点击事件
		viewer.screenSpaceEventHandler.setInputAction((movement) => {
			const pickedObject = viewer.scene.pick(movement.position);
			if (!Cesium.defined(pickedObject)) {
				for (let entity of myEntities) entity.point.color = initialColor;
				return;
			}
			for (let entity of myEntities) {
				if (pickedObject.id !== entity) {
					entity.point.color = initialColor;
					continue;
				}
				entity.point.color = highlightedColor;
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	</script>
</html>

2、编码 2

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Entity 点击事件 - 多个圆点（编码 2）</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 initialColor = new Cesium.Color(0, 1, 0, 1);

		// 变化颜色，蓝色
		const highlightedColor = new Cesium.Color(0, 0, 1, 1);

		const myEntities = [];
		let selectEntity = null;

		const setSelectEntity = (targetEntity) => {
			if (selectEntity !== null) selectEntity.point.color = initialColor;
			selectEntity = targetEntity;
			if (selectEntity !== null) selectEntity.point.color = highlightedColor;
		};

		// 创建实体实例
		const entity1 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		const entity2 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 49.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		const entity3 = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(116.39, 59.91, 400),
			point: {
				pixelSize: 25,
				color: initialColor,
			},
		});

		myEntities.push(entity1);
		myEntities.push(entity2);
		myEntities.push(entity3);

		// 给实体实例添加点击事件
		viewer.screenSpaceEventHandler.setInputAction((movement) => {
			const pickedObject = viewer.scene.pick(movement.position);
			if (!Cesium.defined(pickedObject)) {
				setSelectEntity(null);
				return;
			}
			for (let entity of myEntities) {
				if (pickedObject.id === entity) {
					setSelectEntity(entity);
					break;
				}
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	</script>
</html>