main

分支 (1)

管理

管理

main

cesium_pdf
/
7.6材质特效篇_雷达扫描.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>材质特效篇_雷达扫描</title>
	<script src="./Build/Cesium/Cesium.js"></script>
	<link rel="stylesheet" href="./Build/Cesium//Widgets/widgets.css">
	<style>
		html,
		body,
		#cesiumContainer {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	</style>
</head>

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


	<script>
		Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
		var viewer = new Cesium.Viewer("cesiumContainer", {
			animation: false, //是否显示动画工具
			timeline: false,  //是否显示时间轴工具
			fullscreenButton: false,  //是否显示全屏按钮工具
		});

		var rotation = 0; //控制纹理的旋转角度
		var amount = 4;	//表示旋转角度变化值，即每次旋转 4°

		var rader = {
			position: Cesium.Cartesian3.fromDegrees(114.40372, 30.52252),
			ellipse: { // 椭圆
				semiMajorAxis: 300.0,
				semiMinorAxis: 300.0,
				//指定材质
				material: new Cesium.ImageMaterialProperty({
					image: './RasterImage/图片/color.png',
					color: new Cesium.Color(1.0, 0.0, 0.0, 0.7),
				}),

				// 不设置高度则无法渲染外框线
				height: 0.0,
				//heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

				//外边框
				outline: true,
				outlineWidth: 2,
				outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0),

				//关键属性stRotation 纹理旋转角度通过CallbackProperty回调
				stRotation: new Cesium.CallbackProperty(function () {
					rotation += amount;
					if (rotation >= 360 || rotation <= -360) {
						rotation = 0;
					}
					//度数转弧度
					return Cesium.Math.toRadians(rotation);
				}, false)
			}
		}

		//将rader添加进entity集合
		viewer.entities.add(rader)

		var point = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(114.40372, 30.52252),
			point: {
				pixelSize: 10,
				color: Cesium.Color.RED,
				heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
			}
		});
		viewer.camera.setView({
			destination: Cesium.Cartesian3.fromDegrees(114.40372, 30.52252, 2000)
		});


	</script>
</body>

</html>