作者: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的分享