cesium-learning-examples
/
cesium鼠标交互、数据查询.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./Cesium/Cesium.js"></script>
		<link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
		<style>
			html,
			body {
				padding: 0px;
				margin: 0px;
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="cesiumContainer"></div>
		<script>
			Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g';
			// 配置地图地形
			const viewer = new Cesium.Viewer('cesiumContainer', {
				baseLayerPicker: false, //  隐藏默认的地图按钮，否则会影响新地图的加载
				terrainProvider: new Cesium.CesiumTerrainProvider({
					// 加载地形数据，搜索 珠穆朗玛峰,查看山川地形效果
					url: Cesium.IonResource.fromAssetId(1),
					requestVertexNormals: true, // 设置为true,可以增加法线，用于提高光照效果，
					requestWaterMask: true, // 设置为true,可以增加水面特效
				}),
			});
			// 设置相机位置
			viewer.camera.setView({
				destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0), // 目的地位置
				orientation: {
					// 设置相机视口的方向
					heading: Cesium.Math.toRadians(0), // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
					pitch: Cesium.Math.toRadians(-90.0), // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
					roll: 0.0, // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
				},
			});
			const position = new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0);

			// 加载填充图片的实体
			const entity = viewer.entities.add({
				id: 'wxLogo',
				position: position,
				plane: {
					plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0), // 设置面的朝向,设置为沿着Z轴平铺，轴向需要参考笛卡尔坐标，如果想让图形竖立起来，将Z轴平铺改为X轴平铺即可(Cesium.Cartesian3.UNIT_X)
					dimensions: new Cesium.Cartesian2(400, 300), // 设置面的长度和宽度
					material: './img/wx.png', // 这里是支持填充图片的
					outline: true, // 设置是否显示边框
					outlineColor: Cesium.Color.BLACK, // 将边框的颜色设置为黑色
				},
				description: `<div>
                <img width="100%" height="300px" src="./img/wx.png">
                <h3>测试文本内容1</h3>
                <h3>测试文本内容2</h3>
                <h3>测试文本内容3</h3>
                <h3>测试文本内容4</h3>
                </div>`,
			});

			// ScreenSpaceEventHandler 创建一个屏幕控制实例
			const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // viewer.scene.canvas获取scene下所有canvas创建的元素
			// setInputAction 使用setInputAction方法进行监听，它可以监听各种点击、移入事件等
			// 第一个参数是回调函数
			// 第二个参数是设置具体监听的是哪个事件，这里监听的是鼠标左键点击事件
			handler.setInputAction(function (movement) {
				const pick = viewer.scene.pick(movement.position); // 通过viewer.scene.pick获取到点击的对象,这里获取的是位置信息
				if (Cesium.defined(pick) && pick.id.id === 'wxLogo') {
					// 判断位置信息不为空，同时id等于我们指定的实体id
					// alert('ccc')
				}
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
		</script>
	</body>
</html>