SuperMap iClient 3D for WebGL无人机探照灯

作者：kk

---

前言

本篇文章主要介绍的是如何基于SuperMap iClient 3D for WebGL实现无人机探照灯功能。

---

一、初始化时间

代码如下：

					//开始时间
					var startTime = Cesium.JulianDate.fromDate(new Date(2021, 12, 25, 20));
					//结束时间
					var endTime = Cesium.JulianDate.addSeconds(startTime, 360, new Cesium.JulianDate());
					viewer.clock.startTime = startTime.clone();
					viewer.clock.stopTime = endTime.clone();
					viewer.clock.currentTime = startTime.clone();
					viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
					viewer.clock.multiplier = 10;

二、加载无人机模型和灯光

1.无人机

代码如下：

					var url = "./无人机.glb";
					var entity = viewer.entities.add({
						name: "gltf",
						position: new Cesium.Cartesian3.fromDegrees(116.45686379834832, 39.911649250411344, 300),
						model: {
							uri: url,
							scale:2,
							color:Cesium.Color.WHITE
						}
					});
					viewer.zoomTo(entity);

2.灯光

代码如下：

					var startPosition = Cesium.Cartesian3.fromDegrees(116.44867984138107,39.903322998408537,300);
					var startTargetPosition = Cesium.Cartesian3.fromDegrees(116.44867984138107,39.903322998408537,15);
					var options = {
						color: new Cesium.Color(1, 1, 1, 1),
						distance: 2000,
						decay: 1,
						intensity: 10
					};
					var spotLight = new Cesium.SpotLight(startPosition, startTargetPosition, options);
					scene.addLightSource(spotLight);

三、实时更新无人机以及灯光的位置

加载json文件作为模型以及灯光的移动路径：

						Cesium.loadJson('kk.json').then(function (jsonData) {
						console.log(jsonData,'sssssssssss')
						var lineArray = jsonData.features[0].geometry.coordinates;
						property = new Cesium.SampledPositionProperty();
						for (var i = 0;  i< lineArray.length; i ++) {
							var lon = lineArray[i][0];
							var lat = lineArray[i][1];
							var dtime = 100*i;
							var time = Cesium.JulianDate.addSeconds(startTime, dtime, new Cesium.JulianDate());//时间递增
							var position = Cesium.Cartesian3.fromDegrees(lon, lat,300);//位置变化
							property.addSample(time, position);
						}
						entity.position = property;
						entity.orientation = new Cesium.VelocityOrientationProperty(property);
					}).otherwise(function (error) {
						console.log(error);
					});

将每个时刻返回的坐标信息赋值给灯光

viewer.clock.onTick.addEventListener(function() {
							var currentTime = Cesium.JulianDate.clone(viewer.clock.currentTime);

							//将笛卡尔坐标转化为经纬度坐标
							var cartographic = Cesium.Cartographic.fromCartesian(property.getValue(currentTime));
							console.log(cartographic)
							var longitude = Cesium.Math.toDegrees(cartographic.longitude);
							var latitude = Cesium.Math.toDegrees(cartographic.latitude);
							spotLight.targetPosition =Cesium.Cartesian3.fromDegrees( longitude, latitude, 15);
							spotLight.position = property.getValue(currentTime);

						});

四、最终效果

完整代码下载地址：
链接：https://pan.baidu.com/s/1p8YgCJOw8coQAFclzVb1mQ
提取码：3jyj
–来自百度网盘超级会员V3的分享

---