|
@@ -195,20 +195,31 @@ export const FlyGLTFClass = {
|
|
|
bottomImage.src = 'public/imgs/warningBackground_conflict.png'; // 替换为你的图片路径
|
|
|
typeInfo = "碰撞检测"
|
|
|
break;
|
|
|
- case "warning_lowbattery":
|
|
|
- backgroundImage.src = 'public/imgs/warningBackground.png'; // 替换为你的图片路径
|
|
|
+ case "electricityWarning":
|
|
|
+ backgroundImage.src = 'public/imgs/warningBackground_lowbattery.png'; // 替换为你的图片路径
|
|
|
typeInfo = "电池电量低"
|
|
|
break;
|
|
|
- case "warning_outofrange":
|
|
|
- backgroundImage.src = 'public/imgs/warningBackground.png'; // 替换为你的图片路径
|
|
|
+ case "routeDeviate":
|
|
|
+ backgroundImage.src = 'public/imgs/warningBackground_outofrange.png'; // 替换为你的图片路径
|
|
|
typeInfo = "偏移航线"
|
|
|
break;
|
|
|
+ case "noFlyZone":
|
|
|
+ backgroundImage.src = 'public/imgs/warningBackground_noFlyZone.png'; // 替换为你的图片路径
|
|
|
+ typeInfo = "禁飞区"
|
|
|
+ break;
|
|
|
+ case "collision":
|
|
|
+ backgroundImage.src = 'public/imgs/warningBackground_noFlyZone.png'; // 替换为你的图片路径
|
|
|
+ typeInfo = "建筑物过近"
|
|
|
+ break;
|
|
|
+ case "clearZone":
|
|
|
+ backgroundImage.src = 'public/imgs/warningBackground_noFlyZone.png'; // 替换为你的图片路径
|
|
|
+ typeInfo = "净空区"
|
|
|
+ break;
|
|
|
default:
|
|
|
backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
|
|
|
typeInfo = "正常"
|
|
|
break;
|
|
|
}
|
|
|
-
|
|
|
// backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
|
|
|
if(this.panelInfo.type == "conflict"){
|
|
|
topImage.onload = () => {
|
|
@@ -218,17 +229,16 @@ export const FlyGLTFClass = {
|
|
|
context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
|
|
|
- // // 绘制顶部图片
|
|
|
- // const topImageHeight = canvas.height * 0.2; // 设定顶部图片高度为 canvas 高度的 20%
|
|
|
- // context.drawImage(topImage, 0, 0, canvas.width, topImageHeight);
|
|
|
+ // 绘制顶部图片
|
|
|
+ const topImageHeight = canvas.height * 0.2; // 设定顶部图片高度为 canvas 高度的 20%
|
|
|
+ context.drawImage(topImage, 0, 0, canvas.width, topImageHeight);
|
|
|
|
|
|
// 绘制底部图片
|
|
|
const bottomImageHeight = canvas.height * 0.7; // 设定底部图片高度为 canvas 高度的 20%
|
|
|
context.drawImage(bottomImage, 0, canvas.height - bottomImageHeight, canvas.width, bottomImageHeight);
|
|
|
|
|
|
- debugger
|
|
|
const textInfo = [
|
|
|
- // { text: '暂停飞行原地等待:' + this.panelInfo.data.waitTime +'秒', color: '#fff', font: 'bold 16px Arial', offsetX:50, offsetY: 20 },
|
|
|
+ { text: '暂停飞行原地等待:' + this.panelInfo.data.waitTime +'秒', color: '#fff', font: 'bold 16px Arial', offsetX:50, offsetY: 20 },
|
|
|
{ text: '距预测撞点前方: ', color: '#fff', font: '20px Verdana', offsetX:70, offsetY: 90 },
|
|
|
{ text: Math.floor(this.panelInfo.data.waitLength * 1) + '米', color: '#ff0000', font: 'bold 22px Courier New', offsetX:120, offsetY: 120 }
|
|
|
];
|
|
@@ -242,6 +252,119 @@ export const FlyGLTFClass = {
|
|
|
texture.needsUpdate = true;
|
|
|
}
|
|
|
}
|
|
|
+ }else if(this.panelInfo.type == "electricityWarning"){
|
|
|
+ backgroundImage.onload = () => {
|
|
|
+ // 确保背景透明
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+ // 绘制背景图片,填满整个 canvas
|
|
|
+ context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ const textInfo = [
|
|
|
+ { text: '电量预警: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ { text: '低电量警告: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 70 },
|
|
|
+ { text: this.panelInfo.data.speed, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
+ { text: this.panelInfo.data.altitude, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
+ { text: this.panelInfo.data.altitude, color: '#fff', font: '15px Arial', offsetX:80, offsetY: 110 }
|
|
|
+ ];
|
|
|
+ // 绘制文字
|
|
|
+ textInfo.forEach((line) => {
|
|
|
+ context.fillStyle = line.color;
|
|
|
+ context.font = line.font;
|
|
|
+ context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ });
|
|
|
+ // 标记纹理需要更新
|
|
|
+ texture.needsUpdate = true;
|
|
|
+ };
|
|
|
+ }else if(this.panelInfo.type == "routeDeviate"){
|
|
|
+ backgroundImage.onload = () => {
|
|
|
+ // 确保背景透明
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+ // 绘制背景图片,填满整个 canvas
|
|
|
+ context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ const textInfo = [
|
|
|
+ { text: '计划偏离: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ { text: '偏离距离: '+this.panelInfo.data.speed * 3.6+'米', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
+ { text: '飞行航线偏离: '+ this.panelInfo.data.altitude, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
+ { text: '无人机正在偏离计划航线飞行,预警提示请关注', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 130 }
|
|
|
+ ];
|
|
|
+ // 绘制文字
|
|
|
+ textInfo.forEach((line) => {
|
|
|
+ context.fillStyle = line.color;
|
|
|
+ context.font = line.font;
|
|
|
+ context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ });
|
|
|
+ // 标记纹理需要更新
|
|
|
+ texture.needsUpdate = true;
|
|
|
+ };
|
|
|
+ }else if(this.panelInfo.type == "noFlyZone"){
|
|
|
+ backgroundImage.onload = () => {
|
|
|
+ // 确保背景透明
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+
|
|
|
+ // 绘制背景图片,填满整个 canvas
|
|
|
+ context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ const textInfo = [
|
|
|
+ { text: '空域闯入-禁飞区', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ { text: '已闯入禁飞区,请及时校正航线', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 }
|
|
|
+ ];
|
|
|
+ // 绘制文字
|
|
|
+ textInfo.forEach((line) => {
|
|
|
+ context.fillStyle = line.color;
|
|
|
+ context.font = line.font;
|
|
|
+ context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ });
|
|
|
+ // 标记纹理需要更新
|
|
|
+ texture.needsUpdate = true;
|
|
|
+ };
|
|
|
+ }else if(this.panelInfo.type == "collision"){ //需要米数,已返回
|
|
|
+ backgroundImage.onload = () => {
|
|
|
+ // 确保背景透明
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+ // 绘制背景图片,填满整个 canvas
|
|
|
+ context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ const textInfo = [
|
|
|
+ { text: '建筑避障: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ { text: '当前飞行轨迹距离前方建筑物实时距离: '+this.panelInfo.data.distance+'米', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
+ { text: '请注意飞行安全', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
+ ];
|
|
|
+ // 绘制文字
|
|
|
+ textInfo.forEach((line) => {
|
|
|
+ context.fillStyle = line.color;
|
|
|
+ context.font = line.font;
|
|
|
+ context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ });
|
|
|
+ // 标记纹理需要更新
|
|
|
+ texture.needsUpdate = true;
|
|
|
+ };
|
|
|
+ }else if(this.panelInfo.type == "clearZone"){
|
|
|
+ backgroundImage.onload = () => {
|
|
|
+ // 确保背景透明
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height); // 清除所有内容,包含黑色
|
|
|
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // 设置透明背景
|
|
|
+ context.fillRect(0, 0, canvas.width, canvas.height); // 填充透明背景
|
|
|
+ // 绘制背景图片,填满整个 canvas
|
|
|
+ context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
|
|
|
+ const textInfo = [
|
|
|
+ { text: '空域闯入-净空区', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
|
|
|
+ { text: '当前飞行轨迹距离前方净空区实时距离: '+this.panelInfo.data.distance+'米', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 90 },
|
|
|
+ { text: '请注意飞行安全', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 110 },
|
|
|
+ ];
|
|
|
+ // 绘制文字
|
|
|
+ textInfo.forEach((line) => {
|
|
|
+ context.fillStyle = line.color;
|
|
|
+ context.font = line.font;
|
|
|
+ context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
+ });
|
|
|
+ // 标记纹理需要更新
|
|
|
+ texture.needsUpdate = true;
|
|
|
+ };
|
|
|
}else{
|
|
|
backgroundImage.onload = () => {
|
|
|
// 确保背景透明
|
|
@@ -268,28 +391,12 @@ export const FlyGLTFClass = {
|
|
|
context.font = line.font;
|
|
|
context.fillText(line.text, line.offsetX, line.offsetY);
|
|
|
});
|
|
|
- //
|
|
|
- // // 绘制文字信息
|
|
|
- // context.fillStyle = '#fff';
|
|
|
- // context.font = 'normal 15px Arial';
|
|
|
- // context.fillText('无人机信息:',40, 25);
|
|
|
- // context.fillText('无人机名称:'+this.panelInfo.data.name, 40, 50);
|
|
|
- // context.fillText('所属企业: 美团', 40, 70);
|
|
|
- // context.fillText('速度: '+this.panelInfo.data.speed * 3.6+'km/h', 40, 90);
|
|
|
- // context.fillText('高度: '+ this.panelInfo.data.altitude+'m', 40, 110);
|
|
|
- // context.fillText(`状态: ${typeInfo}`,40, 130);
|
|
|
// 标记纹理需要更新
|
|
|
texture.needsUpdate = true;
|
|
|
};
|
|
|
}
|
|
|
mesh.up.set(1, 0, 0); // 保持面板的 "上" 方向为 Y 轴正方向
|
|
|
mesh.lookAt(this._camera.position);
|
|
|
-
|
|
|
- // // 让面板始终面向摄像机
|
|
|
- // const panelObject = this.infoPanel.object3D; // 假设 infoPanel 中有绑定的 Object3D 对象
|
|
|
- // if (panelObject && this.camera) {
|
|
|
- // panelObject.lookAt(this.camera.position);
|
|
|
- // }
|
|
|
}
|
|
|
},
|
|
|
|