Forráskód Böngészése

低空修改250325-01

zhiyuan-007 3 hete
szülő
commit
3b0832fdf1

+ 81 - 6
src/components/mapJK.vue

@@ -49,6 +49,7 @@ import ws from 'ws';
 
 import Path from '../config/path_wjc.json'
 import routeList from '../config/routeList.json'
+import MoveCar from '../config/moveCar.json'
 
 import {
   getAvoidRoute,
@@ -114,6 +115,7 @@ export default {
     let addFlowPathEvent = null;
     let movePointEvent = null;
     let currentRealPowerShow = false;  //当前是否显示无极网格
+    let getFixedFlyInstance = {};
     let currentRealPowerIds = {
       power_wj_15:[],
       power_wj_16:[],
@@ -126,6 +128,7 @@ export default {
       power_wj_23:[]
     };   //当前无极网格
     let currentRealPowerLevel = null; //当前无极网格层级
+    let popupEnabled = false;
     onMounted(() =>{
       bus.on('CreateMap',() =>{
         MapReady = $.Deferred();
@@ -303,6 +306,9 @@ export default {
           case "GetVirtualFlyPoint":
             getVirtualFlyPoint(params);
             break;
+          case "GetFixedFlyPoint":
+            getFixedFlyPoint(params);
+            break;
           case "ChangePointStatus":
             changePointStatus(params);
             break;
@@ -731,6 +737,9 @@ export default {
           if(m_handles.has(highlight_handle_id)){
             m_handles.remove(highlight_handle_id);
           }
+          if(params.popupEnabled){
+            popupEnabled = params.popupEnabled;
+          }
           let addPointEvent = new AddPointEvent({
             m_view,
             type,
@@ -753,15 +762,27 @@ export default {
               let highlightHandle = lyrView.highlight(result.graphic);
               m_handles.add(highlightHandle,handleId);
             })
-            let setPopupOptions = new SetPopupOptions({
-              title:popupTitle,
-              location:m_view.toMap(screenPoint),
-              content:result.graphic.attributes
+            if(popupEnabled){
+              let setPopupOptions = new SetPopupOptions({
+                title:popupTitle,
+                location:m_view.toMap(screenPoint),
+                content:result.graphic.attributes
+              })
+              m_view.popup.open(setPopupOptions.popupOptions());
+            }
+            bus.emit('SendMessage',{
+              action:"ClickResult",
+              data:{
+                "message":result.graphic.attributes
+              }
             })
-            m_view.popup.open(setPopupOptions.popupOptions());
           }
         })
       }
+
+
+
+
       function showLayersWithScaleEvents(params){
         let status = params.status;
         let scale_handle_id = params.scale_handle_id;
@@ -1762,7 +1783,7 @@ export default {
           view:m_view,
           m_map,
           id:params.id,
-          data:params.data
+          data:params.data,
         });
         m_map.add(geometryMeshEffect.graphicsLayer);
       }
@@ -1956,6 +1977,55 @@ export default {
         connectVirtualWebSocket(status);
       }
 
+      function getFixedFlyPoint(params){
+        let status = params.status;
+        let data = MoveCar.paths;
+        let id = "fixedPath"
+        // let data  = params.paths;
+        // let id = params.id;
+        //设置定时2秒发送data里面下一个点执行flyGltf
+
+        if (status === "show") {
+          // 清除已有定时器避免重复
+          if (getFixedFlyInstance[id]) {
+            clearInterval(getFixedFlyInstance[id].timerId);
+            getFixedFlyInstance[id].timerId = null;
+            getFixedFlyInstance[id] = null;
+          }
+          // 重置索引以重新开始
+          getFixedFlyInstance[id] = {};
+          getFixedFlyInstance[id].currentIndex = 0;
+          // 设置新定时器
+          getFixedFlyInstance[id].timerId = setInterval(() => {
+            if (getFixedFlyInstance[id].currentIndex < data.length) {
+              // 获取当前点并发送
+              debugger
+              let currentPoint = data[getFixedFlyInstance[id].currentIndex];
+              flyGLTF({
+                uavid:id,
+                status:"show",
+                duration:2000,
+                //duration:3000,
+                point:currentPoint
+              });
+              getFixedFlyInstance[id].currentIndex++;
+            } else {
+              // 数据发送完毕,清除定时器
+              clearInterval(getFixedFlyInstance[id].timerId);
+              getFixedFlyInstance[id].timerId = null;
+              getFixedFlyInstance[id] = null;
+            }
+          }, 2000); // 每2秒执行一次
+        } else {
+          // 状态非show时停止发送
+          if (getFixedFlyInstance[id].timerId !== null) {
+            clearInterval(getFixedFlyInstance[id].timerId);
+            getFixedFlyInstance[id].timerId = null;
+            getFixedFlyInstance[id] = null;
+          }
+        }
+      }
+
 
 
       function getRealFlyPoint(params){
@@ -3432,6 +3502,11 @@ export default {
             let newShape = JSON.parse(item.shape);
             newShape.color = "red"
             showData.push({
+              attributes:{
+                id:item.id,
+                name:item.name,
+                height:newShape.height,
+              },
               type:item.geoType,
               shape: newShape
             })

+ 2 - 2
src/components/mapTest.vue

@@ -75,8 +75,8 @@ export default {
       bridge = new CityGIS.Bridge({
         id:"i_map",
         //url:'https://cimweb.zjw.sh.cegn.cn:2007/map-tool-widget/#/jk_map',
-        url:'http://localhost:5173/map-tool-widget/#/jk_map',
-        //url: 'http://172.16.8.44:9250/map-tool-widget/#/jk_map',
+        //url:'http://localhost:5173/map-tool-widget/#/jk_map',
+        url: 'http://172.16.8.44:9250/map-tool-widget/#/jk_map',
         onReady:function (){
           // console.log("地图创建完成");
         }

+ 13 - 2
src/config/basicTool.json

@@ -42,7 +42,7 @@
             "title":"BaseMap",
             "visible": true,
             "opacity": 1,
-            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDI3MDcyMTIsImtleSI6IjkzNDkzMzIxIiwic2VydmljZU5vIjoiRDkwMDEwMDcxMjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.Cb3SIeyf4xYD_Hb8yc-__2YDosWQ4Lj-CprBGet2aZw",
+            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDI4ODQzNzksImtleSI6IjkzNDkzMzIxIiwic2VydmljZU5vIjoiRDkwMDEwMDcxMjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.DH5xs3Z9CRnSWr4TINknLKXX37AGYE36euh3NZlEfEQ",
             "token": ""
           }
         }
@@ -58,7 +58,7 @@
             "title":"WhiteMold",
             "visible": true,
             "opacity": 1,
-            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDIzNjgwNzIsImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.h0erCmFVw6Xao3TTbrRYT_XLwa42xqJAbduKSDgqJjM/SceneServer",
+            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDI4ODQ0MzMsImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.YQfZ9qL8Nnx7bwVVNpwqYV8jPkKV2lVVPqGONQLK-as/SceneServer",
             "token": ""
           }
         }
@@ -1390,6 +1390,17 @@
           }
         }
       },
+      {
+        "code": "1-42-1",
+        "title": "获取固定点位无人机",
+        "data": {
+          "ActionName": "GetFixedFlyPoint",
+          "Parameters": {
+            "status": "show",
+            "token": ""
+          }
+        }
+      },
       {
         "code": "1-32",
         "title": "获取实时点位",

+ 69 - 0
src/config/moveCar.json

@@ -0,0 +1,69 @@
+{
+  "paths": [
+    [
+      3499.5782683948523,
+      7252.273350408689,
+      0
+    ],
+    [
+      3499.364569722593,
+      7251.626996858693,
+      100
+    ],
+    [
+      3558.8660344507416,
+      7251.648514626977,
+      100
+    ],
+    [
+      3558.852005535551,
+      7290.14634859842,
+      100
+    ],
+    [
+      3568.767473443955,
+      7293.999751210939,
+      100
+    ],
+    [
+      4279.47656249917,
+      7294.283510610084,
+      100
+    ],
+    [
+      4282.768839396391,
+      7325.0832129770815,
+      100
+    ],
+    [
+      4286.069444710435,
+      7336.633997891262,
+      100
+    ],
+    [
+      4299.290211928166,
+      7340.489525285203,
+      100
+    ],
+    [
+      4309.205361465806,
+      7344.34362776725,
+      100
+    ],
+    [
+      4735.628798268906,
+      7344.538185844389,
+      100
+    ],
+    [
+      4735.579268035517,
+      7448.4823634558725,
+      100
+    ],
+    [
+      4734.06792183444,
+      7449.867157578444,
+      0
+    ]
+  ]
+}

+ 2 - 2
src/main.js

@@ -6,8 +6,8 @@ import '@arcgis/core/assets/esri/themes/dark/main.css'
 import router from "./router/index.js";
 import './assets/global.scss'
 import esriConfig from  '@arcgis/core/config.js'
-esriConfig.assetsPath = '/public/assets';
-//esriConfig.assetsPath = '/map-tool-widget/assets';
+//esriConfig.assetsPath = '/public/assets';
+esriConfig.assetsPath = '/map-tool-widget/assets';
 import mitt from 'mitt'
 app.use(ElementPlus, {
     locale: zhCn,

+ 7 - 0
src/units/map/GeometryMeshEffect.js

@@ -18,10 +18,12 @@ class GeometryMeshEffect{
     addGeometryMeshFrustumEffect(){
         this.graphicsLayer = new GraphicsLayer({
             id: "geometryMeshEffect" + this.id,
+            popupEnabled: true,
             title: "空域分层"
         })
         this.data.forEach((item)=>{
             let graphic;
+            debugger
             if(item.type == "polygon"){ //圆柱、矩形、棱锥
                 let rings = new Polygon({
                     type: "polygon",
@@ -30,6 +32,7 @@ class GeometryMeshEffect{
                 });
                 graphic = new Graphic({
                     geometry: rings,
+                    attributes: item.attributes,
                     symbol:{
                         "type": "polygon-3d",
                         "symbolLayers": [
@@ -51,6 +54,7 @@ class GeometryMeshEffect{
                 });
                 graphic = new Graphic({
                     geometry: paths,
+                    attributes: item.attributes,
                     symbol:{
                         "type": "line-3d",
                         "symbolLayers": [
@@ -76,6 +80,7 @@ class GeometryMeshEffect{
                 });
                 graphic = new Graphic({
                     geometry: point,
+                    attributes: item.attributes,
                     symbol:{
                         "type": "point-3d",
                         "symbolLayers": [
@@ -99,6 +104,7 @@ class GeometryMeshEffect{
                 let mesh = this.createTruncatedCone(item.shape.bottomRadius, item.shape.topRadius, item.shape.height,item.shape.point,item.shape.color);
                 graphic = new Graphic({
                     geometry: mesh,
+                    attributes: item.attributes,
                     symbol: {
                         "type": "mesh-3d",
                         "symbolLayers": [{
@@ -113,6 +119,7 @@ class GeometryMeshEffect{
                 let funnel = this.createTruncatedConeWithCylinder(item.shape.bottomRadius, item.shape.topRadius, item.shape.coneHeight, item.shape.cylinderHeight,item.shape.point,item.shape.color);
                 graphic = new Graphic({
                     geometry: funnel,
+                    attributes: item.attributes,
                     symbol: {
                         "type": "mesh-3d",
                         "symbolLayers": [{

+ 63 - 62
src/units/threejs/flyGLTF.js

@@ -54,7 +54,7 @@ export const FlyGLTFClass = {
         const grid = new THREE.GridHelper(30,10,0xf0f0f0,0xffffff);
         this.scene.add(grid);
 
-        this.ambient = new THREE.AmbientLight(0xffffff,0.5);
+        this.ambient = new THREE.AmbientLight(0xffffff,5);
         this.scene.add(this.ambient);
 
         this.loadGLTF();
@@ -79,66 +79,67 @@ export const FlyGLTFClass = {
             const AnimationAction = that.mixer.clipAction(gltf.animations[0]);
             AnimationAction.play();
 
-            // 创建信息面板
-            const panelGeometry = new THREE.PlaneGeometry(3.5, 3.5); // 面板大小
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            // 加载背景图片
-            const backgroundImage = new Image();
-            backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
-            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); // 填充透明背景
-
-                context.save();
-                context.scale(-1, 1);
-                context.translate(-canvas.width, 0);
-                // 绘制背景图片,填满整个 canvas
-                context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
-
-                // // 绘制文字信息
-                // context.fillStyle = '#fff';
-                // context.font = 'normal 15px Arial';
-                // context.fillText('无人机信息:',40, 25);
-                // context.fillText('无人机名称: 无人机1号', 40, 50);
-                // context.fillText('所属企业: 美团', 40, 70);
-                // context.fillText('速度: 100km/h', 40, 90);
-                // context.fillText('高度: 200m', 40, 110);
-                // context.fillText('状态: 正常',40, 130);
-
-
-                const textInfo = [
-                    { text: '无人机信息: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
-                    { text: '无人机名称:'+this.panelInfo.data.name, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 50 },
-                    { text: '所属企业: 美团: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 70 },
-                    { text: '速度: '+Math.floor(this.panelInfo.data.speed * 3.6)+'km/h',color: '#fff',  font: '15px Arial', offsetX:40, offsetY: 90 },
-                    { text: '高度: '+ this.panelInfo.data.altitude+'m', 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;
-            };
 
-            const texture = new THREE.CanvasTexture(canvas);
-            const panelMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide,  transparent: true });
-            panelGeometry.scale(-1,1,1);
-            const panelMesh = new THREE.Mesh(panelGeometry, panelMaterial);
-            // 将面板附加到无人机模型
-            panelMesh.position.set(0, 2.5, 0); // 调整面板位置到无人机上方
-            gltf.scene.add(panelMesh);
-
-            // 保存信息面板,以便更新
-            that.infoPanel = { canvas, context, texture, mesh: panelMesh };
+            // 创建信息面板
+            // const panelGeometry = new THREE.PlaneGeometry(3.5, 3.5); // 面板大小
+            // const canvas = document.createElement('canvas');
+            // const context = canvas.getContext('2d');
+            // // 加载背景图片
+            // const backgroundImage = new Image();
+            // backgroundImage.src = 'public/imgs/serviceBackground.png'; // 替换为你的图片路径
+            // 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); // 填充透明背景
+            //
+            //     context.save();
+            //     context.scale(-1, 1);
+            //     context.translate(-canvas.width, 0);
+            //     // 绘制背景图片,填满整个 canvas
+            //     context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
+            //
+            //     // // 绘制文字信息
+            //     // context.fillStyle = '#fff';
+            //     // context.font = 'normal 15px Arial';
+            //     // context.fillText('无人机信息:',40, 25);
+            //     // context.fillText('无人机名称: 无人机1号', 40, 50);
+            //     // context.fillText('所属企业: 美团', 40, 70);
+            //     // context.fillText('速度: 100km/h', 40, 90);
+            //     // context.fillText('高度: 200m', 40, 110);
+            //     // context.fillText('状态: 正常',40, 130);
+            //
+            //
+            //     const textInfo = [
+            //         { text: '无人机信息: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 25 },
+            //         { text: '无人机名称:'+this.panelInfo.data.name, color: '#fff', font: '15px Arial', offsetX:40, offsetY: 50 },
+            //         { text: '所属企业: 美团: ', color: '#fff', font: '15px Arial', offsetX:40, offsetY: 70 },
+            //         { text: '速度: '+Math.floor(this.panelInfo.data.speed * 3.6)+'km/h',color: '#fff',  font: '15px Arial', offsetX:40, offsetY: 90 },
+            //         { text: '高度: '+ this.panelInfo.data.altitude+'m', 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;
+            // };
+            //
+            // const texture = new THREE.CanvasTexture(canvas);
+            // const panelMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide,  transparent: true });
+            // panelGeometry.scale(-1,1,1);
+            // const panelMesh = new THREE.Mesh(panelGeometry, panelMaterial);
+            // // 将面板附加到无人机模型
+            // panelMesh.position.set(0, 2.5, 0); // 调整面板位置到无人机上方
+            // gltf.scene.add(panelMesh);
+            //
+            // // 保存信息面板,以便更新
+            // that.infoPanel = { canvas, context, texture, mesh: panelMesh };
         });
 
     },
@@ -254,7 +255,7 @@ export const FlyGLTFClass = {
                             texture.needsUpdate = true;
                         }
                     }
-                }else if(this.panelInfo.type == "routeDeviate"){
+                }else if(this?.panelInfo?.type == "routeDeviate"){
                 //获取当前下标index
                 let index  = this.panelInfo.index * 1 +Math.floor(this.panelInfo.data.distance * 1 / 10) * 1 + 1;
                 let targetPoint = [];
@@ -375,7 +376,7 @@ export const FlyGLTFClass = {
               this.scene.remove(this.recommandPathLineGroup);
           }
 
-          if(this.panelInfo.type == "routeDeviate"){
+          if(this?.panelInfo?.type == "routeDeviate"){
               this.updateRecommandPath();
           }
 

+ 38 - 8
src/units/threejs/threeCubeDetail.js

@@ -17,6 +17,10 @@ export const ThreeCubeDetailClass = {
         this.mouseClickEvent = null;
         this.depthTest = options.depthTest;    //false是优先级低,true是优先级高
         this.deepOpacity = options.deepOpacity;
+
+        this.selectedMesh = null;
+        this.highlightGeometry = null;
+        this.highlightMaterial= null;
     },
 
     initialize() {
@@ -62,6 +66,13 @@ export const ThreeCubeDetailClass = {
         this.scene.add(directionalLight);
 
         this.mouseClickEvent = this.view.on("click", this.onMouseClick.bind(this));
+
+        this.highlightGeometry = new THREE.BoxGeometry(this.size.z, this.size.x, this.size.y);
+        this.highlightMaterial = new THREE.MeshPhongMaterial({
+            transparent: false,
+            depthTest: this.depthTest,
+            side: THREE.DoubleSide,
+        });
     },
 
     createInstancedMesh() {
@@ -165,7 +176,7 @@ export const ThreeCubeDetailClass = {
                 0,
                 1
             );
-
+            this.points[i].renderPos = renderPos.slice();
             dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
             dummy.updateMatrix();
 
@@ -275,16 +286,35 @@ export const ThreeCubeDetailClass = {
     },
 
     highlightCube(instanceIndex) {
-        const color = new THREE.Color(0xffff); // 红色高亮
-        this.setCubeStatus(instanceIndex,color);
+        if (this.selectedMesh) {
+            this.scene.remove(this.selectedMesh);
+            this.selectedMesh = null;
+        }
+        const point = this.points[instanceIndex];
+        if (!point || !point.renderPos) return;
+        // 设置高亮材质颜色
+        this.highlightMaterial.color.setRGB(
+            point.color[0],
+            point.color[1],
+            point.color[2]
+        );
+        // 创建实心立方体
+        const cube = new THREE.Mesh(this.highlightGeometry, this.highlightMaterial);
+        cube.position.set(
+            point.renderPos[0],
+            point.renderPos[1],
+            point.renderPos[2]
+        );
+        // 添加到场景并保存引用
+        this.scene.add(cube);
+        this.selectedMesh = cube;
         this.lastSelectedIndex = instanceIndex;
     },
     unHighlightCube(instanceIndex){
-        const color = new THREE.Color(); // 红色高亮
-        color.r = this.points[instanceIndex].color[0];
-        color.g = this.points[instanceIndex].color[1];
-        color.b = this.points[instanceIndex].color[2];
-        this.setCubeStatus(instanceIndex,color);
+        if (this.selectedMesh) {
+            this.scene.remove(this.selectedMesh);
+            this.selectedMesh = null;
+        }
     },
 
     setCubeStatus(instanceIndex,color){