|
@@ -630,6 +630,10 @@ export default {
|
|
color = 'Blue'
|
|
color = 'Blue'
|
|
modelUrl = centerModel
|
|
modelUrl = centerModel
|
|
}
|
|
}
|
|
|
|
+ else if (type == 'satelite') {
|
|
|
|
+ color = 'Blue'
|
|
|
|
+ modelUrl = satelliteModel
|
|
|
|
+ }
|
|
this.viewer2D.entities.add({
|
|
this.viewer2D.entities.add({
|
|
id: this.id,
|
|
id: this.id,
|
|
position: position,
|
|
position: position,
|
|
@@ -720,6 +724,31 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ markSatelliteLine(position1, position2, color) {
|
|
|
|
+
|
|
|
|
+ // 创建一个带有箭头图标的PolylineMaterial
|
|
|
|
+ const material = new this.Cesium.PolylineArrowMaterialProperty(
|
|
|
|
+ this.Cesium.Color.fromCssColorString(color || "red")
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ // 将点1和点2之间的连线添加到Viewer中
|
|
|
|
+ this.viewer2D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [position1, position2],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.viewer3D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [position1, position2],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
setTimeLine(startTime, endtime, stepTime) {
|
|
setTimeLine(startTime, endtime, stepTime) {
|
|
let start = this.Cesium.JulianDate.fromDate(new Date(startTime)); // 设置时间轴当前时间为开始时间
|
|
let start = this.Cesium.JulianDate.fromDate(new Date(startTime)); // 设置时间轴当前时间为开始时间
|
|
let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
|
|
let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
|
|
@@ -750,7 +779,7 @@ export default {
|
|
currentTime,
|
|
currentTime,
|
|
this.viewer2D.clock.startTime
|
|
this.viewer2D.clock.startTime
|
|
); // 获取从起始时间到当前时间的秒数
|
|
); // 获取从起始时间到当前时间的秒数
|
|
- if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
|
|
|
|
|
|
+ if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
|
|
console.log('elapsedTime :>> ', elapsedTime);
|
|
console.log('elapsedTime :>> ', elapsedTime);
|
|
// 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
// 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
this.requestDataAndUpdateModel2D(startTime, elapsedTime);
|
|
this.requestDataAndUpdateModel2D(startTime, elapsedTime);
|
|
@@ -762,7 +791,7 @@ export default {
|
|
currentTime,
|
|
currentTime,
|
|
this.viewer3D.clock.startTime
|
|
this.viewer3D.clock.startTime
|
|
); // 获取从起始时间到当前时间的秒数
|
|
); // 获取从起始时间到当前时间的秒数
|
|
- if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
|
|
|
|
|
|
+ if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
|
|
console.log('elapsedTime :>> ', elapsedTime);
|
|
console.log('elapsedTime :>> ', elapsedTime);
|
|
// 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
// 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
this.requestDataAndUpdateModel3D(startTime, elapsedTime);
|
|
this.requestDataAndUpdateModel3D(startTime, elapsedTime);
|
|
@@ -777,9 +806,75 @@ export default {
|
|
// .get("/api", this.jsonData).then(res=>{
|
|
// .get("/api", this.jsonData).then(res=>{
|
|
// console.log('res :>> ', res);
|
|
// console.log('res :>> ', res);
|
|
// })
|
|
// })
|
|
|
|
+ const config = {
|
|
|
|
+ timeout: 0 // 设置超时时间为0,表示忽略超时问题
|
|
|
|
+};
|
|
await axios
|
|
await axios
|
|
- .post("/api/traj", this.jsonData).then(res=>{
|
|
|
|
|
|
+ .post("/api/traj", this.jsonData,config).then(res => {
|
|
console.log('res :>> ', res);
|
|
console.log('res :>> ', res);
|
|
|
|
+ let data = res.data[1].data[0]
|
|
|
|
+ for (let key in data) {
|
|
|
|
+ let isSatellite = true
|
|
|
|
+ //判断是否为卫星
|
|
|
|
+ for (let i = 0; i < this.nameIdList.length; i++) {
|
|
|
|
+ if (key === this.nameIdList[i].name || key === 'dateTime') {
|
|
|
|
+ isSatellite = false
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 新建卫星实体
|
|
|
|
+ if (isSatellite) {
|
|
|
|
+ console.log('key :>> ', key);
|
|
|
|
+ let x = parseFloat(data[key].x) * 1000
|
|
|
|
+ let y = parseFloat(data[key].y) * 1000
|
|
|
|
+ let z = parseFloat(data[key].z) * 1000
|
|
|
|
+ //终点位置
|
|
|
|
+ let position = new this.Cesium.Cartesian3(x, y, z);
|
|
|
|
+ this.viewer2D.entities.add({
|
|
|
|
+ id: this.id,
|
|
|
|
+ position: position,
|
|
|
|
+ point: {
|
|
|
|
+ pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
|
|
+ color: this.Cesium.Color.fromCssColorString('Blue')
|
|
|
|
+ },
|
|
|
|
+ model: {
|
|
|
|
+ uri: satelliteModel, // 替换为你的3D模型文件路径
|
|
|
|
+ scale: 1.0, // 调整3D模型的缩放大小
|
|
|
|
+ minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
|
|
|
|
+ },
|
|
|
|
+ label: {
|
|
|
|
+ text: 'satellite ' + key,
|
|
|
|
+ show: true,
|
|
|
|
+ font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
|
+ pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.viewer3D.entities.add({
|
|
|
|
+ id: this.id,
|
|
|
|
+ position: position,
|
|
|
|
+ point: {
|
|
|
|
+ pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
|
|
+ color: this.Cesium.Color.fromCssColorString('Blue')
|
|
|
|
+ },
|
|
|
|
+ model: {
|
|
|
|
+ uri: satelliteModel, // 替换为你的3D模型文件路径
|
|
|
|
+ scale: 1.0, // 调整3D模型的缩放大小
|
|
|
|
+ minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
|
|
|
|
+ },
|
|
|
|
+ label: {
|
|
|
|
+ text: 'satellite ' + key,
|
|
|
|
+ show: true,
|
|
|
|
+ font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
|
+ pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.nameIdList.push({
|
|
|
|
+ id: this.id,
|
|
|
|
+ name: key
|
|
|
|
+ })
|
|
|
|
+ this.id++;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
},
|
|
@@ -791,60 +886,59 @@ export default {
|
|
// 转换为需求字符串格式
|
|
// 转换为需求字符串格式
|
|
const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
|
|
const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
|
|
await axios
|
|
await axios
|
|
- .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
|
|
|
|
|
|
+ .post("/api/pos", { simulation_time: newTimeString + '.000' }).then(res => {
|
|
console.log('res :>> ', res);
|
|
console.log('res :>> ', res);
|
|
let data = res.data[1].data
|
|
let data = res.data[1].data
|
|
//依次更新每个模型位置
|
|
//依次更新每个模型位置
|
|
- for(let i=0;i<this.nameIdList.length;i++){
|
|
|
|
- if(data[this.nameIdList[i].name]!=null&&data[this.nameIdList[i].name]!=undefined){
|
|
|
|
- this.modelEntityMoveByIDAndLocation(this.viewer2D,this.nameIdList[i].id,data[this.nameIdList[i].name].x,data[this.nameIdList[i].name].y,data[this.nameIdList[i].name].z)
|
|
|
|
|
|
+ for (let i = 0; i < this.nameIdList.length; i++) {
|
|
|
|
+ if (data[this.nameIdList[i].name] != null && data[this.nameIdList[i].name] != undefined) {
|
|
|
|
+ this.modelEntityMoveByIDAndLocation(this.viewer2D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//更新模型位置
|
|
//更新模型位置
|
|
// this.modelEntityMoveByIDAndLocation(this.viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
|
|
// this.modelEntityMoveByIDAndLocation(this.viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
|
|
})
|
|
})
|
|
-
|
|
|
|
|
|
+
|
|
},
|
|
},
|
|
- // 根据时间参数请求模型位置并更新 3D
|
|
|
|
- async requestDataAndUpdateModel3D(startTime, elapsedTime) {
|
|
|
|
|
|
+ // 根据时间参数请求模型位置并更新 3D
|
|
|
|
+ async requestDataAndUpdateModel3D(startTime, elapsedTime) {
|
|
const jsDate = new Date(startTime);
|
|
const jsDate = new Date(startTime);
|
|
// 增加 elapsedTime 秒
|
|
// 增加 elapsedTime 秒
|
|
jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
|
|
jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
|
|
// 转换为需求字符串格式
|
|
// 转换为需求字符串格式
|
|
const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
|
|
const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
|
|
await axios
|
|
await axios
|
|
- .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
|
|
|
|
|
|
+ .post("/api/pos", { simulation_time: newTimeString + '.000' }).then(res => {
|
|
let data = res.data[1].data
|
|
let data = res.data[1].data
|
|
-
|
|
|
|
|
|
+
|
|
//依次更新每个模型位置
|
|
//依次更新每个模型位置
|
|
- for(let i=0;i<this.nameIdList.length;i++){
|
|
|
|
- console.log('this.nameIdList[i].name :>> ', this.nameIdList[i].name);
|
|
|
|
- console.log('data :>> ', data);
|
|
|
|
- console.log('data[this.nameIdList[i].name] :>> ', data[this.nameIdList[i].name]);
|
|
|
|
- if(this.nameIdList[i].name in data){
|
|
|
|
- console.log(' 开始移动'+this.nameIdList[i].name);
|
|
|
|
- this.modelEntityMoveByIDAndLocation(this.viewer3D,this.nameIdList[i].id,data[this.nameIdList[i].name].x,data[this.nameIdList[i].name].y,data[this.nameIdList[i].name].z)
|
|
|
|
|
|
+ for (let i = 0; i < this.nameIdList.length; i++) {
|
|
|
|
+ if (this.nameIdList[i].name in data) {
|
|
|
|
+ console.log(' 开始移动' + this.nameIdList[i].name);
|
|
|
|
+ this.modelEntityMoveByIDAndLocation(this.viewer3D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- //更新模型位置
|
|
|
|
|
|
+ //更新模型位置
|
|
// this.modelEntityMoveByIDAndLocation(this.viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
|
|
// this.modelEntityMoveByIDAndLocation(this.viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
|
|
})
|
|
})
|
|
-
|
|
|
|
- },
|
|
|
|
- // 根据模型实体Id和终点位置进行移动
|
|
|
|
- modelEntityMoveByIDAndLocation(viewer,id,x,y,z) {
|
|
|
|
- x = parseFloat(x)*1000
|
|
|
|
- y = parseFloat(y)*1000
|
|
|
|
- z = parseFloat(z)*1000
|
|
|
|
- let entity = viewer.entities.getById(id)
|
|
|
|
- //终点位置
|
|
|
|
- let position = new this.Cesium.Cartesian3(x, y, z);
|
|
|
|
- //设置方向,根据实体的位置来配置方向
|
|
|
|
- entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
|
|
|
|
- //设置查看器,让模型动起来
|
|
|
|
- entity.position.setValue(position)
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 根据模型实体Id和终点位置进行移动
|
|
|
|
+ modelEntityMoveByIDAndLocation(viewer, id, x, y, z) {
|
|
|
|
+ x = parseFloat(x) * 1000
|
|
|
|
+ y = parseFloat(y) * 1000
|
|
|
|
+ z = parseFloat(z) * 1000
|
|
|
|
+ let entity = viewer.entities.getById(id)
|
|
|
|
+
|
|
|
|
+ //终点位置
|
|
|
|
+ let position = new this.Cesium.Cartesian3(x, y, z);
|
|
|
|
+ let oldPosition = viewer.entities.getById(id).position._value
|
|
|
|
+ //设置方向,根据实体的位置来配置方向
|
|
|
|
+ entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
|
|
|
|
+ //设置查看器,让模型动起来
|
|
|
|
+ entity.position.setValue(position)
|
|
|
|
+ this.markSatelliteLine(oldPosition,position,'Blue')
|
|
|
|
+ }
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|