cesium播放车辆轨迹,且在播放的过程中若gps离线则用红色虚线连接,请给出完整代码
时间: 2023-12-27 16:04:50 浏览: 34
以下是一个Cesium播放车辆轨迹的示例代码,如果GPS离线,会用红色虚线连接:
```javascript
var viewer = new Cesium.Viewer('cesiumContainer');
// 创建轨迹点
var positions = [
Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
Cesium.Cartesian3.fromDegrees(-80.50, 35.14),
Cesium.Cartesian3.fromDegrees(-80.12, 25.79),
Cesium.Cartesian3.fromDegrees(-77.03, 22.06),
];
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < positions.length; i++) {
var time = Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), i, new Cesium.JulianDate());
property.addSample(time, positions[i]);
}
// 创建轨迹线
var line = viewer.entities.add({
name: '轨迹线',
polyline: {
positions: property,
width: 5,
material: Cesium.Color.BLUE
}
});
// 创建红色虚线
var offlineLine = viewer.entities.add({
name: '离线轨迹线',
polyline: {
positions: new Cesium.CallbackProperty(function(time, result) {
var lastTime = Cesium.JulianDate.addSeconds(time, -1, new Cesium.JulianDate());
var lastPosition = property.getValue(lastTime);
var currentPosition = property.getValue(time);
if (!Cesium.defined(lastPosition) || !Cesium.defined(currentPosition)) {
return [];
}
var distance = Cesium.Cartesian3.distance(currentPosition, lastPosition);
if (distance < 1) {
return [lastPosition, currentPosition];
}
return [];
}, false),
width: 5,
material: Cesium.Color.RED.withAlpha(0.5),
depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
dashLength: 16,
color: Cesium.Color.RED
})
}
});
// 创建时间线
var clock = viewer.clock;
clock.startTime = Cesium.JulianDate.now();
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 10;
clock.currentTime = Cesium.JulianDate.addSeconds(clock.startTime, 5, new Cesium.JulianDate());
// 定义时间回调函数
var updatePosition = function() {
var time = clock.currentTime;
var position = property.getValue(time);
if (!Cesium.defined(position)) {
offlineLine.polyline.show = true;
return;
}
viewer.camera.setView({
destination: position,
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0)
}
});
offlineLine.polyline.show = false;
return position;
};
// 注册时间回调函数
clock.onTick.addEventListener(updatePosition);
```
在这个示例代码中,我们首先创建了一个SampledPositionProperty对象来存储位置信息,并创建了一个轨迹线。然后,创建了一个红色虚线,在回调函数中动态计算红色虚线的位置。如果当前位置信息为空,则显示红色虚线。接着,创建了一个时间线,并定义了一个时间回调函数。在时间回调函数中获取当前位置信息,并将相机视角定位到当前位置。如果当前位置信息为空,则显示红色虚线。最后,注册时间回调函数。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)