寫項目時,有路徑回放功能。但是網(wǎng)上資料有些不適用或者不全。寫完之后想著放上來,共大家參考。
代碼參考:
cesium實現(xiàn)飛行漫游
cesium軌跡回放,按路徑飛行
核心代碼:
- 繪制軌跡線
const handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
const self = this;
handler.setInputAction(function(event) {
var earthPosition = self.viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
if (self.activeShapePoints.length === 0) {
self.floatingPoint = self.createPoint(earthPosition);
self.activeShapePoints.push(earthPosition);
var dynamicPositions = new Cesium.CallbackProperty(function() {
return self.activeShapePoints;
}, false);
self.activeShape = self.drawShape(dynamicPositions); //繪制動態(tài)圖
}
self.activeShapePoints.push(earthPosition);
self.createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠標移動
handler.setInputAction(function(event) {
if (Cesium.defined(self.floatingPoint)) {
var newPosition = self.viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
self.floatingPoint.position.setValue(newPosition);
self.activeShapePoints.pop();
self.activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function() {
self.terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
//繪制點
createPoint(worldPosition) {
var point = this.viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 1
}
});
return point;
}
//畫線
drawShape(positionData) {
var shape;
if (this.drawingMode === 'line') {
shape = this.viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3
}
});
this.drawinLink.push(shape)
}
return shape;
}
terminateShape() {
this.activeShapePoints.pop(); //去除最后一個動態(tài)點
if (this.activeShapePoints.length) {
this.marks = [];
for (const position of this.activeShapePoints) {
const latitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).latitude)
const longitude = this.toDegrees(Cesium.Cartographic.fromCartesian(position).longitude)
this.marks.push({
lat: latitude,
lng: longitude,
flytime: this.flytime,
height: 0
})
}
this.drawShape(this.activeShapePoints); //繪制最終圖
this.startFly();
}
this.viewer.entities.remove(this.floatingPoint); //去除動態(tài)點圖形(當前鼠標點)
this.viewer.entities.remove(this.activeShape); //去除動態(tài)圖形
this.floatingPoint = undefined;
this.activeShape = undefined;
this.activeShapePoints = [];
}
drawShape(positionData) {
var shape;
if (this.drawingMode === 'line') {
shape = this.viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3
}
});
}
return shape;
}
- 模型按軌跡運動
let planeModel = this.viewer.entities.add({
// 和時間軸關聯(lián)
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: property,
// 根據(jù)所提供的速度計算模型的朝向
orientation: new Cesium.VelocityOrientationProperty(property),
// 模型數(shù)據(jù)
model: {
uri: '../../static/CesiumAir/Cesium_Air.glb',
minimumPixelSize: 128
}
});
- 重點:脫離時間軸
找了很多代碼基本都是依靠Cesium的時間軸進行移動,但是寫的時候遇到了問題,如果是多條線路,可能存在時間軸播放結束但是模型未移動到終點的情況。于是將路線對應的時間軸終點修改,不再統(tǒng)一使用一條時間軸,而是多條時間軸(頁面不顯示時間軸)。以解決每條路徑長度不同移動時間不同的問題。
computeFlight(source, start) {
let property = new Cesium.SampledPositionProperty();
let end = ""
for (let i = 0; i < source.length; i++) {
let time = Cesium.JulianDate.addSeconds(start, source[i].flytime*i*10, new Cesium.JulianDate);
let position = Cesium.Cartesian3.fromDegrees(source[i].lng, source[i].lat, source[i]
.height);
// 添加位置,和時間對應
property.addSample(time, position);
if(i == source.length -1){
//獲取最后節(jié)點時間
end = Cesium.JulianDate.addSeconds(start, source[i].flytime*i*10, new Cesium.JulianDate)
}
}
return {
property,end
};
}
// 設置始終停止時間
this.viewer.clock.stopTime = stop.clone();
最后效果(刪了點幀):

drawLine.gif