|
@@ -63,9 +63,9 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- save : false,
|
|
|
+ save: false,
|
|
|
situation: [],
|
|
|
- nameIdList:[],
|
|
|
+ nameIdList: [],
|
|
|
websocket: null,
|
|
|
leftwidth: 12,
|
|
|
unit: [],
|
|
@@ -112,7 +112,7 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getData();
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
mounted() {
|
|
|
this.cesiumInit();
|
|
@@ -124,7 +124,8 @@ export default {
|
|
|
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
|
|
|
this.websocket.close();
|
|
|
}
|
|
|
-
|
|
|
+ this.viewer2D.clock.onTick.removeEventListener(this.handleTimeChange);
|
|
|
+ this.viewer3D.clock.onTick.removeEventListener(this.handleTimeChange);
|
|
|
},
|
|
|
methods: {
|
|
|
startWebSocket() {
|
|
@@ -153,22 +154,22 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
async saveJson() {
|
|
|
- if(this.save){
|
|
|
+ if (this.save) {
|
|
|
const jsonData = JSON.stringify(this.jsonData);
|
|
|
- const blob = new Blob([jsonData], { type: 'application/json' });
|
|
|
- const url = URL.createObjectURL(blob);
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = url;
|
|
|
- link.download = this.jsonData.xdname + '.json';
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click();
|
|
|
- document.body.removeChild(link);
|
|
|
+ const blob = new Blob([jsonData], { type: 'application/json' });
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+ link.download = this.jsonData.xdname + '.json';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
}
|
|
|
- else{
|
|
|
+ else {
|
|
|
this.$message("请先导入想定文件!!!")
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
changeItemPosition(data) {
|
|
|
|
|
@@ -178,71 +179,72 @@ export default {
|
|
|
let blueunit = [];
|
|
|
let satellite = [];
|
|
|
let center = [];
|
|
|
- let fileInfoStr = row.xdfile;
|
|
|
- let fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
+ let fileInfoStr = row.xdfile;
|
|
|
+ let fileInfoArr = JSON.parse(fileInfoStr);
|
|
|
await axios
|
|
|
- .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
- params: {
|
|
|
- datasourceId: "1656243335922192384",
|
|
|
- fieldName: "xdfile",
|
|
|
- asImage: false,
|
|
|
- dataId: row.id,
|
|
|
- filename: fileInfoArr[0].filename,
|
|
|
- Authorization: getToken(),
|
|
|
- MenuId: "1656244747347431424"
|
|
|
- }
|
|
|
- })
|
|
|
- .then((response) => {
|
|
|
- console.log('response.data :>> ', response.data);
|
|
|
- // // 处理成功的响应
|
|
|
- // jsonData = response.data
|
|
|
- blueunit = response.data.blueunit
|
|
|
- redunit = response.data.redunit
|
|
|
- satellite = response.data.satellite
|
|
|
- center = response.data.center
|
|
|
- this.save = true
|
|
|
- this.jsonData = {
|
|
|
- id: row.id,
|
|
|
- xdname: row.xdname,
|
|
|
- type: row.type,
|
|
|
- // creator: row.creator,
|
|
|
- createtime: row.createtime,
|
|
|
- bluecnt: row.bluecnt,
|
|
|
- target: row.target,
|
|
|
- starttime: row.starttime,
|
|
|
- steptime: row.steptime,
|
|
|
- blueunit: blueunit,
|
|
|
- redunit: redunit,
|
|
|
- satellite: satellite,
|
|
|
- center: center
|
|
|
- }
|
|
|
- this.setTimeLine(response.data.starttime,response.data.steptime)//传入时间到时间轴
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- // 处理错误
|
|
|
- console.error(error);
|
|
|
- });
|
|
|
-
|
|
|
- for(let i =0;i<blueunit.length;i++){
|
|
|
- this.markLocationbyJson(parseFloat(blueunit[i].pos.lat),parseFloat(blueunit[i].pos.lon),parseFloat(blueunit[i].pos.height),blueunit[i].name,"blue")
|
|
|
+ .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
|
|
|
+ params: {
|
|
|
+ datasourceId: "1656243335922192384",
|
|
|
+ fieldName: "xdfile",
|
|
|
+ asImage: false,
|
|
|
+ dataId: row.id,
|
|
|
+ filename: fileInfoArr[0].filename,
|
|
|
+ Authorization: getToken(),
|
|
|
+ MenuId: "1656244747347431424"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('response.data :>> ', response.data);
|
|
|
+ // // 处理成功的响应
|
|
|
+ // jsonData = response.data
|
|
|
+ blueunit = response.data.blueunit
|
|
|
+ redunit = response.data.redunit
|
|
|
+ satellite = response.data.satellite
|
|
|
+ center = response.data.center
|
|
|
+ this.save = true
|
|
|
+ this.jsonData = {
|
|
|
+ id: row.id,
|
|
|
+ xdname: row.xdname,
|
|
|
+ type: row.type,
|
|
|
+ // creator: row.creator,
|
|
|
+ createtime: row.createtime,
|
|
|
+ bluecnt: row.bluecnt,
|
|
|
+ target: row.target,
|
|
|
+ starttime: row.starttime,
|
|
|
+ steptime: row.steptime,
|
|
|
+ endtime: row.endtime,
|
|
|
+ blueunit: blueunit,
|
|
|
+ redunit: redunit,
|
|
|
+ satellite: satellite,
|
|
|
+ center: center
|
|
|
+ }
|
|
|
+ this.setTimeLine(response.data.starttime, response.data.endtime, response.data.steptime)//传入时间到时间轴
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+
|
|
|
+ for (let i = 0; i < blueunit.length; i++) {
|
|
|
+ this.markLocationbyJson(parseFloat(blueunit[i].pos.lat), parseFloat(blueunit[i].pos.lon), parseFloat(blueunit[i].pos.height), blueunit[i].name, "blue")
|
|
|
}
|
|
|
- for(let i = 0;i<center.length;i++){
|
|
|
+ for (let i = 0; i < center.length; i++) {
|
|
|
let item = center[i]
|
|
|
- this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat),parseFloat(item[center[i].name].properties.lon),parseFloat(item[center[i].name].properties.h),item.name,"center")
|
|
|
+ this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat), parseFloat(item[center[i].name].properties.lon), parseFloat(item[center[i].name].properties.h), item.name, "center")
|
|
|
}
|
|
|
- for(let i = 0;i<redunit.length;i++){
|
|
|
- this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat),parseFloat(redunit[i].component_movementjson.properties.launch_lon),parseFloat(redunit[i].component_movementjson.properties.launch_h),redunit[i].name,"red")
|
|
|
+ for (let i = 0; i < redunit.length; i++) {
|
|
|
+ this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat), parseFloat(redunit[i].component_movementjson.properties.launch_lon), parseFloat(redunit[i].component_movementjson.properties.launch_h), redunit[i].name, "red")
|
|
|
let point1 = {
|
|
|
- longitude : parseFloat(redunit[i].component_movementjson.properties.launch_lon),
|
|
|
- latitude : parseFloat(redunit[i].component_movementjson.properties.launch_lat),
|
|
|
- height :parseFloat(redunit[i].component_movementjson.properties.launch_h)
|
|
|
+ longitude: parseFloat(redunit[i].component_movementjson.properties.launch_lon),
|
|
|
+ latitude: parseFloat(redunit[i].component_movementjson.properties.launch_lat),
|
|
|
+ height: parseFloat(redunit[i].component_movementjson.properties.launch_h)
|
|
|
}
|
|
|
let point2 = {
|
|
|
- longitude : parseFloat(redunit[i].component_movementjson.properties.target_lon),
|
|
|
- latitude : parseFloat(redunit[i].component_movementjson.properties.target_lat),
|
|
|
- height : parseFloat(redunit[i].component_movementjson.properties.target_h)
|
|
|
+ longitude: parseFloat(redunit[i].component_movementjson.properties.target_lon),
|
|
|
+ latitude: parseFloat(redunit[i].component_movementjson.properties.target_lat),
|
|
|
+ height: parseFloat(redunit[i].component_movementjson.properties.target_h)
|
|
|
}
|
|
|
- this.markLine(point1,point2,"red")
|
|
|
+ this.markLine(point1, point2, "red")
|
|
|
}
|
|
|
},
|
|
|
//获取所有数据
|
|
@@ -482,7 +484,7 @@ export default {
|
|
|
/* 地图放大 */
|
|
|
big() {
|
|
|
let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
|
|
|
- let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
|
|
|
+ let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
|
|
|
// 镜头拉进
|
|
|
viewer.camera.flyTo({
|
|
|
destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
|
|
@@ -500,7 +502,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
home() {
|
|
|
- let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
|
|
|
+ let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
|
|
|
viewer.camera.flyTo({
|
|
|
destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
|
|
|
duration: 2.0
|
|
@@ -528,23 +530,23 @@ export default {
|
|
|
},
|
|
|
//显示鼠标经纬度
|
|
|
getMouseLocation(event) {
|
|
|
- let {longitude,latitude} = this.getCoordinatesFromEvent(event);
|
|
|
- this.$store.commit("app/setMouseLocation",{longitude,latitude});
|
|
|
- },
|
|
|
- /*根据camera高度近似计算当前层级*/
|
|
|
- heightToZoom(height){
|
|
|
- var A = 40487.57;
|
|
|
- var B = 0.00007096758;
|
|
|
- var C = 91610.74;
|
|
|
- var D = -40467.74;
|
|
|
- return Math.round(D+(A-D)/(1+Math.pow(height/C, B)));
|
|
|
- },
|
|
|
- getCammeraHeightAndZoom(){
|
|
|
+ let { longitude, latitude } = this.getCoordinatesFromEvent(event);
|
|
|
+ this.$store.commit("app/setMouseLocation", { longitude, latitude });
|
|
|
+ },
|
|
|
+ /*根据camera高度近似计算当前层级*/
|
|
|
+ heightToZoom(height) {
|
|
|
+ var A = 40487.57;
|
|
|
+ var B = 0.00007096758;
|
|
|
+ var C = 91610.74;
|
|
|
+ var D = -40467.74;
|
|
|
+ return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
|
|
|
+ },
|
|
|
+ getCammeraHeightAndZoom() {
|
|
|
let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
|
|
|
//获取当前相机高度
|
|
|
- let height = viewer.camera.positionCartographic.height;
|
|
|
- let zoom = this.heightToZoom(height);
|
|
|
- this.$store.commit("app/setCameraHeightAndZoom",{height,zoom});
|
|
|
+ let height = viewer.camera.positionCartographic.height;
|
|
|
+ let zoom = this.heightToZoom(height);
|
|
|
+ this.$store.commit("app/setCameraHeightAndZoom", { height, zoom });
|
|
|
},
|
|
|
selectModel(cursorStyle, image, info) {
|
|
|
console.log('image :>> ', image);
|
|
@@ -611,20 +613,20 @@ export default {
|
|
|
});
|
|
|
this.id++;
|
|
|
},
|
|
|
- markLocationbyJson(latitude, longitude,height,name,type) {
|
|
|
- const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude,height);
|
|
|
+ markLocationbyJson(latitude, longitude, height, name, type) {
|
|
|
+ const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
|
|
|
console.log('position :>> ', position);
|
|
|
let color = ''
|
|
|
let modelUrl = ''
|
|
|
- if(type=='red'){
|
|
|
+ if (type == 'red') {
|
|
|
color = 'Red'
|
|
|
- modelUrl= missileModel
|
|
|
+ modelUrl = missileModel
|
|
|
}
|
|
|
- else if(type=='blue'){
|
|
|
+ else if (type == 'blue') {
|
|
|
color = 'Blue'
|
|
|
modelUrl = radarModel
|
|
|
}
|
|
|
- else if(type=='center'){
|
|
|
+ else if (type == 'center') {
|
|
|
color = 'Blue'
|
|
|
modelUrl = centerModel
|
|
|
}
|
|
@@ -641,7 +643,7 @@ export default {
|
|
|
minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
|
|
|
},
|
|
|
label: {
|
|
|
- text: type+' '+name,
|
|
|
+ text: type + ' ' + name,
|
|
|
show: true,
|
|
|
font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
@@ -660,7 +662,7 @@ export default {
|
|
|
minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
|
|
|
},
|
|
|
label: {
|
|
|
- text: type+' '+name,
|
|
|
+ text: type + ' ' + name,
|
|
|
show: true,
|
|
|
font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
@@ -719,31 +721,78 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- setTimeLine(startTime,stepTime){
|
|
|
- console.log(startTime)
|
|
|
- let start = this.Cesium.JulianDate.fromDate(new Date(startTime)); // 设置时间轴当前时间为开始时间
|
|
|
- console.log(start)
|
|
|
- // 添加8小时,使地图时间和北京时间相同
|
|
|
- start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
|
|
|
- let stop = this.Cesium.JulianDate.addSeconds(start, stepTime, new this.Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
|
|
|
- // 设置时钟开始时间
|
|
|
- this.viewer2D.clock.startTime = start.clone();
|
|
|
- this.viewer3D.clock.startTime = start.clone();
|
|
|
- // 设置时钟当前时间
|
|
|
- this.viewer2D.clock.currentTime = start.clone();
|
|
|
- this.viewer3D.clock.currentTime = start.clone();
|
|
|
- // 设置时钟结束时间
|
|
|
- this.viewer2D.clock.stopTime = stop.clone();
|
|
|
- this.viewer3D.clock.stopTime = stop.clone();
|
|
|
- // 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样
|
|
|
- this.viewer2D.clock.multiplier = 1;
|
|
|
- this.viewer3D.clock.multiplier = 1;
|
|
|
- // 时间轴绑定到viewer上去
|
|
|
- this.viewer2D.timeline.zoomTo(start, stop);
|
|
|
- this.viewer3D.timeline.zoomTo(start, stop);
|
|
|
- // 循环执行,到达终止时间,重新从起点时间开始
|
|
|
- this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
|
|
|
- this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
|
|
|
+ setTimeLine(startTime, endtime, stepTime) {
|
|
|
+ let start = this.Cesium.JulianDate.fromDate(new Date(startTime)); // 设置时间轴当前时间为开始时间
|
|
|
+ let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
|
|
|
+ // 添加8小时,使地图时间和北京时间相同
|
|
|
+ start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
|
|
|
+ stop = this.Cesium.JulianDate.addHours(stop, 8, new this.Cesium.JulianDate());
|
|
|
+ // 设置时钟开始时间
|
|
|
+ this.viewer2D.clock.startTime = start.clone();
|
|
|
+ this.viewer3D.clock.startTime = start.clone();
|
|
|
+ // 设置时钟当前时间
|
|
|
+ this.viewer2D.clock.currentTime = start.clone();
|
|
|
+ this.viewer3D.clock.currentTime = start.clone();
|
|
|
+ // 设置时钟结束时间
|
|
|
+ this.viewer2D.clock.stopTime = stop.clone();
|
|
|
+ this.viewer3D.clock.stopTime = stop.clone();
|
|
|
+ // 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样
|
|
|
+ this.viewer2D.clock.multiplier = stepTime;
|
|
|
+ this.viewer3D.clock.multiplier = stepTime;
|
|
|
+ // 时间轴绑定到viewer上去
|
|
|
+ this.viewer2D.timeline.zoomTo(start, stop);
|
|
|
+ this.viewer3D.timeline.zoomTo(start, stop);
|
|
|
+ // 循环执行,到达终止时间,重新从起点时间开始
|
|
|
+ this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
|
|
|
+ this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
|
|
|
+ this.viewer2D.clock.onTick.addEventListener(clock => {
|
|
|
+ const currentTime = clock.currentTime; // 获取当前时间轴的时间
|
|
|
+ const elapsedTime = this.Cesium.JulianDate.secondsDifference(
|
|
|
+ currentTime,
|
|
|
+ this.viewer2D.clock.startTime
|
|
|
+ ); // 获取从起始时间到当前时间的秒数
|
|
|
+ if (parseInt(elapsedTime) % stepTime === 0) {
|
|
|
+ console.log('elapsedTime :>> ', elapsedTime);
|
|
|
+ // 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
|
+ this.requestDataAndUpdateModel2D(startTime, elapsedTime);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.viewer3D.clock.onTick.addEventListener(clock => {
|
|
|
+ const currentTime = clock.currentTime; // 获取当前时间轴的时间
|
|
|
+ const elapsedTime = this.Cesium.JulianDate.secondsDifference(
|
|
|
+ currentTime,
|
|
|
+ this.viewer2D.clock.startTime
|
|
|
+ ); // 获取从起始时间到当前时间的秒数
|
|
|
+ if (parseInt(elapsedTime) % stepTime === 0) {
|
|
|
+ console.log('elapsedTime :>> ', elapsedTime);
|
|
|
+ // 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
|
|
|
+ this.requestDataAndUpdateModel3D(startTime, elapsedTime);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.initSTK()
|
|
|
+ },
|
|
|
+ // 初始化stk方法,生成轨迹文件
|
|
|
+ async initSTK() {
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 根据时间参数请求模型位置并更新 2D
|
|
|
+ requestDataAndUpdateModel2D(startTime, elapsedTime) {
|
|
|
+ const jsDate = new Date(startTime);
|
|
|
+ // 增加 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')}`;
|
|
|
+
|
|
|
+ },
|
|
|
+ // 根据时间参数请求模型位置并更新 3D
|
|
|
+ requestDataAndUpdateModel3D(startTime, elapsedTime) {
|
|
|
+ const jsDate = new Date(startTime);
|
|
|
+ // 增加 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')}`;
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -761,10 +810,11 @@ export default {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
-.container{
|
|
|
+.container {
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.modeltooltip {
|
|
|
position: absolute;
|
|
|
padding: 5px;
|
|
@@ -842,7 +892,7 @@ export default {
|
|
|
::v-deep .el-tabs--border-card>.el-tabs__content {
|
|
|
width: 300px;
|
|
|
height: 100%;
|
|
|
- overflow-y:visible;
|
|
|
+ overflow-y: visible;
|
|
|
}
|
|
|
|
|
|
.model {
|
|
@@ -882,7 +932,8 @@ export default {
|
|
|
font-size: 14px;
|
|
|
/* right: 20px; */
|
|
|
}
|
|
|
-.TimeLine{
|
|
|
+
|
|
|
+.TimeLine {
|
|
|
position: absolute;
|
|
|
left: 21%;
|
|
|
bottom: 15px;
|