绘制内容结算0117

src/components/mapJK.vue

@@ -1529,7 +1529,7 @@ export default {
                           origin:message.routeInfoVO
                         }
                       });
-                    }else if(message.routeDeviate.status != "SAFE"){
+                    }else if(message.routeDeviate.status != "SAFE" && message.routeDeviate.distance * 1 > 5){
                       console.log("偏航异常预警",message);
                       flyGLTF({
                         id:message.id,

src/config/routeList.json

@@ -353,89 +353,6 @@
         [3316.4692993164063, 8417.7921142578125,100],
         [3316.4692993164063, 8417.7921142578125,0]
       ]
-    },
-    {
-      "id":"13",
-      "value":"d1953588-735c-43d7-9836-57692f6fe6e5",
-      "uavid":"394a5290-1c77-4d07-862a-217ff370da74",
-      "begin":"合生汇",
-      "end":"复旦大学学生公寓",
-      "color":"#0095ff",
-      "path":	[
-        [4399.5432739257813, 7370.3377075195313,0],
-        [4399.5432739257813, 7370.3377075195313,100],
-        [4316.2117309570313, 7263.2525024414063,100],
-        [4313.8433227539063, 7261.0986938476563,100],
-        [4311.1469116210938, 7259.3724975585938,100],
-        [4308.1992797851563, 7258.1229248046875,100],
-        [4305.0841064453125, 7257.3853149414063,100],
-        [4301.8890991210938, 7257.1807250976563,100],
-        [4298.705078125, 7257.514892578125,100],
-        [4295.6220703125, 7258.3782958984375,100],
-        [4292.7277221679688, 7259.7465209960938,100],
-        [4216.0595092773438, 7303.7899169921875,100],
-        [4212.0651245117188, 7305.7418823242188,100],
-        [4207.8724975585938, 7307.2208862304688,100],
-        [4203.5374755859375, 7308.207275390625,100],
-        [4199.11767578125, 7308.6879272460938,100],
-        [4194.671875, 7308.656494140625,100],
-        [4053.96728515625, 7308.656494140625,100],
-        [4052.1204833984375, 7308.656494140625,100],
-        [4051.3637084960938, 7308.6450805664063,100],
-        [4050.6182861328125, 7308.5126953125,100],
-        [4049.9036865234375, 7308.2626953125,100],
-        [3993.6513061523438, 7287.1679077148438,100],
-        [3663.0311279296875, 7163.1854858398438,100],
-        [3661.4866943359375, 7162.6063232421875,100],
-        [3652.3311157226563, 7159.314697265625,100],
-        [3607.8442993164063, 7143.3209228515625,100],
-        [3534.5328979492188, 7116.9642944335938,100],
-        [2965.7816772460938, 6912.4888916015625,100],
-        [2964.5263061523438, 6911.9039306640625,100],
-        [2963.3909301757813, 6911.1104736328125,100],
-        [2962.4100952148438, 6910.1326904296875,100],
-        [2961.6130981445313, 6908.9998779296875,100],
-        [2961.0241088867188, 6907.7462768554688,100],
-        [2960.6610717773438, 6906.4094848632813,100],
-        [2960.5347290039063, 6905.0302734375,100],
-        [2952.6447143554688, 6770.5709228515625,100],
-        [2976.8291015625, 6692.4266967773438,100],
-        [2984.6137084960938, 6671.39990234375,100],
-        [2993.0344848632813, 6650.619873046875,100],
-        [3002.0842895507813, 6630.105712890625,100],
-        [3011.7540893554688, 6609.8765258789063,100],
-        [3016.36767578125, 6596.9122924804688,100],
-        [3020.26708984375, 6583.7156982421875,100],
-        [3023.440673828125, 6570.3261108398438,100],
-        [3025.87890625, 6556.7830810546875,100],
-        [3027.57470703125, 6543.1273193359375,100],
-        [3028.522705078125, 6529.3994750976563,100],
-        [3028.7205200195313, 6515.6400756835938,100],
-        [3028.1672973632813, 6501.8906860351563,100],
-        [3026.8646850585938, 6488.19189453125,100],
-        [3024.8167114257813, 6474.58447265625,100],
-        [3022.029296875, 6461.109130859375,100],
-        [3018.5106811523438, 6447.805908203125,100],
-        [3014.271728515625, 6434.7144775390625,100],
-        [3009.32470703125, 6421.8737182617188,100],
-        [3003.684326171875, 6409.3220825195313,100],
-        [2993.5344848632813, 6392.9868774414063,100],
-        [2983.861083984375, 6376.3649291992188,100],
-        [2974.6723022460938, 6359.4702758789063,100],
-        [2965.9758911132813, 6342.3170776367188,100],
-        [2957.7789306640625, 6324.919677734375,100],
-        [2945.0789184570313, 6297.9323120117188,100],
-        [2928.4102783203125, 6246.3383178710938,100],
-        [2925.7467041015625, 6239.644287109375,100],
-        [2920.3502807617188, 6220.2216796875,100],
-        [2910.7308959960938, 6056.2922973632813,100],
-        [2910.3040771484375, 6050.471923828125,100],
-        [2909.360107421875, 6044.7127075195313,100],
-        [2907.906494140625, 6039.0607299804688,100],
-        [2905.9548950195313, 6033.5607299804688,100],
-        [2793.6516723632813, 5721.1533203125,100],
-        [2793.6516723632813, 5721.1533203125,0]
-      ]
     }
   ],
   "conflictList":[
@@ -451,7 +368,7 @@
     },
     {
       "id": "906661eb-4af0-49f1-bb5b-c4f4a2ade8d8",
-      "speed":40,
+      "speed":10,
       "uavid": "00c6353a-79ea-4ff9-905b-793473fc1579"
     }
   ],

src/units/map/FlyGLTFEvent.js

@@ -117,14 +117,14 @@ class FlyGLTFEvent{
                 const heading = this.calculatePathHeading(currentAfterPosition,nextAfterPosition);
                 const cameraHeading = this.calculateCameraPathHeading(currentAfterPosition,nextAfterPosition);
                 //计算相机后方的偏移位置
-                const offsetDistance = 100;
+                const offsetDistance = 150;
                 const offsetX = offsetDistance * Math.cos((cameraHeading -180) * Math.PI /180);
                 const offsetY = offsetDistance * Math.sin((cameraHeading -180) * Math.PI /180);
                 //设置相机位置和视角
                 const mapPosition = [
                     currentAfterPosition[0] + offsetX,
                     currentAfterPosition[1] + offsetY,
-                    currentAfterPosition[2] + 60
+                    currentAfterPosition[2] + 40
                 ];
                 this.view.camera = {
                     position:{
@@ -135,7 +135,7 @@ class FlyGLTFEvent{
                         spatialReference:this.view.spatialReference
                     },
                     heading: heading,
-                    tilt: 70
+                    tilt: 80
                 };
             }
             bus_1.emit('SendMessage', {

src/units/threejs/flyGLTF.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";
 import List from '../../config/routeList.json'
-import texture1 from  "../../assets/lineTexture.png";
+import texture1 from  "../../assets/arrow2.png";
 export const FlyGLTFClass = {
     constructor(options){
         this.webgl = options.webgl;
@@ -70,7 +70,7 @@ export const FlyGLTFClass = {
         const loader = new GLTFLoader();
         let that = this;
         loader.load('public/gltf/mtwrj.glb', function (gltf) {
-            gltf.scene.scale.set(4, 4, 4);
+            gltf.scene.scale.set(6, 6, 6);
             that.scene.add(gltf.scene);
             that.targetObject = gltf.scene;
 
@@ -134,7 +134,7 @@ export const FlyGLTFClass = {
             panelGeometry.scale(-1,1,1);
             const panelMesh = new THREE.Mesh(panelGeometry, panelMaterial);
             // 将面板附加到无人机模型
-            panelMesh.position.set(0, 4, 0); // 调整面板位置到无人机上方
+            panelMesh.position.set(0, 2.5, 0); // 调整面板位置到无人机上方
             gltf.scene.add(panelMesh);
 
             // 保存信息面板，以便更新
@@ -370,6 +370,15 @@ export const FlyGLTFClass = {
           const material = new THREE.LineBasicMaterial({color:0xff0000,lineWidth:2});
           this.pathLine = new THREE.Line(geometry,material);
           this.scene.add(this.pathLine);
+
+          if (this.recommandPathLineGroup) {
+              this.scene.remove(this.recommandPathLineGroup);
+          }
+
+          if(this.panelInfo.type == "routeDeviate"){
+              this.updateRecommandPath();
+          }
+
       }
     },
 
@@ -470,18 +479,17 @@ export const FlyGLTFClass = {
         this.targetObject.rotation.y = 0;
         this.targetObject.rotation.z = -Math.PI/2;
 
-        // if (this.recommandPathLine) {
-        //     this.scene.remove(this.recommandPathLine);
-        // }
-        // if(this.panelInfo.type == "routeDeviate"){
-        //     this.updateRecommandPath();
-        // }
+        if (this.recommandPathLineGroup) {
+            this.map.offset.y -= 0.1;
+        }
 
     },
 
     updateRecommandPath() {
-        debugger;
         // 如果已存在曲线或管道，将其从场景中移除
+        if (this.recommandPathLineGroup) {
+            this.scene.remove(this.recommandPathLineGroup);
+        }
 
         let startPoint = this.pathCurve.getPointAt(this.pathProgress);
         let endPoint = this.targetPosition;
@@ -506,41 +514,68 @@ export const FlyGLTFClass = {
             endPoint
         ]);
 
+        // 设置传送带的宽度
+        const width = 5;
 
-
-        let tubeGeometry = new THREE.TubeGeometry(curve, 20, 100, 24, false);
-        var textureLoader = new THREE.TextureLoader();
-        //设置纹理贴图
+        // 创建纹理
+        let textureLoader = new THREE.TextureLoader();
         this.map = textureLoader.load(texture1);
 
+        // 贴图颜色空间校正
+        this.map.encoding = THREE.sRGBEncoding;
         this.map.wrapS = THREE.RepeatWrapping;
         this.map.wrapT = THREE.RepeatWrapping;
-        this.map.repeat.set(20, 10);
+        this.map.repeat.set(1, 1);
 
+       // 材质使用 MeshBasicMaterial（无需光源）
         const material = new THREE.MeshBasicMaterial({
-            color: 0xaaaaaa,
-            // map: this.map,
+            map: this.map,
             transparent: true,
-            depthWrite: false,
-            // side: 200
+            opacity: 1,
             side: THREE.DoubleSide,
-            wireframeLinewidth: 20,
         });
 
 
-        const tubeMesh = new THREE.Mesh(tubeGeometry, material);
+        // 创建一个组来存放所有的分段
+        this.recommandPathLineGroup = new THREE.Group();
+
+        // 动态分段数计算
+        const pathLength = curve.getLength(); // 获取路径总长度
+        const segmentLength = 5; // 每段的目标长度
+        const segments = Math.max(2, Math.ceil(pathLength / segmentLength)); // 确保至少分成2段
+        const step = 1 / segments;
 
-        // 将新的管道添加到场景
-        this.scene.add(tubeMesh);
+        for (let i = 0; i < segments; i++) {
+            const t1 = i * step;
+            const t2 = (i + 1) * step;
 
-        // 保存当前管道对象，以便下次更新时移除
-        this.recommandPathLine = tubeMesh;
+            // 获取当前段的起点和终点
+            const point1 = curve.getPointAt(t1);
+            const point2 = curve.getPointAt(t2);
+
+            // 创建平面
+            const planeGeometry = new THREE.PlaneGeometry(width, segmentLength);
+            const plane = new THREE.Mesh(planeGeometry, material);
+
+            // 设置平面的位置和旋转
+            plane.position.copy(point1.clone().add(point2).multiplyScalar(0.5)); // 平面中心
+            plane.lookAt(point2); // 让平面朝向下一个点
+            plane.rotateX(Math.PI / 2); // 使平面与路径对齐
+            plane.rotateY(Math.PI / 2); // 使平面与路径对齐
+
+            // 将平面添加到组中
+            this.recommandPathLineGroup.add(plane);
+        }
+
+        // 将组添加到场景
+        this.scene.add(this.recommandPathLineGroup);
 
         return curve; // 返回生成的曲线对象
     },
 
 
 
+
     render(){
         let cam = this.camera;
         //需要调整相机的视角
@@ -552,6 +587,8 @@ export const FlyGLTFClass = {
 
         this.updateInfoPanel(); // 更新面板信息
 
+
+
         if (this.mixer) {
             this.mixer.update(this.clock.getDelta());
         }