管道加载

src/components/mapJK.vue

@@ -37,6 +37,7 @@ import SetLocation from "../units/map/SetLocation.js";
 import GeometryMeshPrismEffect from "../units/map/GeometryMeshPrismEffect.js";
 import ReRenderingEvent from "../units/map/ReRenderingEvent.js";
 import PathPipeEvent from "../units/map/PathPipeEvent.js";
+import FlyGLTFEvent from "../units/map/FlyGLTFEvent.js";
 
 export default {
   name: "mapJK",
@@ -58,6 +59,7 @@ export default {
     let limitHeightAnalysisEvent = null;
     let reRenderingEvent = null;
     let pathPipeEvent = null;
+    let flyGLTFEvent = null;
     onMounted(() =>{
       bus.on('CreateMap',() =>{
         MapReady = $.Deferred();
@@ -147,6 +149,9 @@ export default {
           case "ThreeGrid":
             threeGrid(params);
             break;
+          case "RealPositionGrid":
+            realPositionGrid(params);
+            break;
           case "LimitHeightAnalysis":
             limitHeightAnalysis(params);
             break;
@@ -156,6 +161,9 @@ export default {
           case "PathPipe":
             pathPipe(params);
             break;
+          case "FlyGLTF":
+            flyGLTF(params);
+            break;
         }
       }
       function setBackground(params){
@@ -414,9 +422,10 @@ export default {
           m_handles.add(addScaleEvent.scaleHandle,scale_handle_id);
         }
       }
-      function getEyeExtent(){
+      function getEyeExtent() {
         const screenWidth = m_view.width;
         const screenHeight = m_view.height;
+
         // 四个角的像素坐标
         const screenCorners = [
           { x: 0, y: 0 }, // 左上角
@@ -425,35 +434,58 @@ export default {
           { x: 0, y: screenHeight }, // 左下角
         ];
 
-        const mapPoints = screenCorners.map((screenPoint) => {
-          return m_view.toMap(screenPoint);
-        });
-        mapPoints.forEach((item)=>{
-          if(item == null || item == undefined){
-            return false;
+        // 将屏幕角坐标转为地图坐标
+        const mapPoints = screenCorners.map((screenPoint) => m_view.toMap(screenPoint)).filter(p => p);
+
+        // 添加 camera.position 到 mapPoints
+        const cameraPoint = m_view.camera.position;
+
+        if (mapPoints.length < 4) {
+          if (cameraPoint) {
+            const bufferDistance = 2000; // 2公里
+            const spatialReference = m_view.spatialReference;
+
+            const screenExtent = {
+              xmin: cameraPoint.x - bufferDistance,
+              ymin: cameraPoint.y - bufferDistance,
+              xmax: cameraPoint.x + bufferDistance,
+              ymax: cameraPoint.y + bufferDistance,
+              spatialReference: spatialReference,
+            };
+            console.warn("视图范围不足4个有效点，使用摄像机位置生成的2公里范围。");
+            console.log(screenExtent);
+            return screenExtent;
+          } else {
+            console.warn("无法获取摄像机位置，请检查视图状态。");
+            return null;
           }
-        })
-        try{
-          // 获取最小和最大坐标值
-          const xmin = Math.min(...mapPoints.map((p) => p.x));
-          const ymin = Math.min(...mapPoints.map((p) => p.y));
-          const xmax = Math.max(...mapPoints.map((p) => p.x));
-          const ymax = Math.max(...mapPoints.map((p) => p.y));
-          const screenExtent = {
-            xmin: xmin,
-            ymin: ymin,
-            xmax: xmax,
-            ymax: ymax,
-            spatialReference: m_view.spatialReference,
-          };
-          console.log(screenExtent);
-          return screenExtent
-        }catch (e){
-        }
+        } else {
+          try {
+            // 获取最小和最大坐标值
+            const xmin = Math.min(...mapPoints.map((p) => p.x));
+            const ymin = Math.min(...mapPoints.map((p) => p.y));
+            const xmax = Math.max(...mapPoints.map((p) => p.x));
+            const ymax = Math.max(...mapPoints.map((p) => p.y));
 
+            const screenExtent = {
+              xmin: xmin,
+              ymin: ymin,
+              xmax: xmax,
+              ymax: ymax,
+              spatialReference: m_view.spatialReference,
+            };
+            console.log(screenExtent);
+            return screenExtent;
+          } catch (e) {
+            console.error("获取地图范围时出错：", e);
+            return null;
+          }
+        }
       }
 
 
+
+
       function showLayersWithScaleEventsReturn(scaleValue){
         let eyeExtent = getEyeExtent();
         if(!eyeExtent){
@@ -476,6 +508,8 @@ export default {
           addThreeGridEvent.height = height>1200?1200:height;
           addThreeGridEvent.size = size;
           addThreeGridEvent.layerHeight = layerHeight;
+          addThreeGridEvent.gridEnabled = true;
+          addThreeGridEvent.netEnabled = true;
           addThreeGridEvent.start();
         }else{
           addThreeGridEvent = new AddThreeGridEvent({
@@ -483,6 +517,8 @@ export default {
             extent: {minX:eyeExtent.xmin,maxX:eyeExtent.xmax,minY:eyeExtent.ymin,maxY:eyeExtent.ymax},
             height:height>1200?1200:height,
             size:size,
+            gridEnabled : true,
+            netEnabled : true,
             layerHeight:layerHeight,
           })
           addThreeGridEvent.start();
@@ -577,6 +613,8 @@ export default {
           addThreeGridEvent.size = params.size;
           addThreeGridEvent.layerHeight = params.layerHeight;
           addThreeGridEvent.animationEnabled = animationEnabled;
+          addThreeGridEvent.gridEnabled = true;
+          addThreeGridEvent.netEnabled = true;
           addThreeGridEvent.start();
         }else{
           addThreeGridEvent = new AddThreeGridEvent({
@@ -585,11 +623,19 @@ export default {
             height : params.height,
             size : params.size,
             layerHeight :params.layerHeight,
+            gridEnabled:true,
+            netEnabled:true,
             animationEnabled
           })
           addThreeGridEvent.start();
         }
       }
+
+      function realPositionGrid(params){
+        let status = params.status;
+
+      }
+
       function limitHeightAnalysis(params){
         let status = params.status;
         if(limitHeightAnalysisEvent){
@@ -637,7 +683,6 @@ export default {
         if(status == "hide"){
           return
         }
-        debugger
         pathPipeEvent = new PathPipeEvent({
           view:m_view,
           paths:params.paths,
@@ -646,6 +691,25 @@ export default {
         });
         pathPipeEvent.start()
       }
+      function flyGLTF(params){
+        let status = params.status;
+        if(flyGLTFEvent){
+          flyGLTFEvent.clear();
+          flyGLTFEvent = null;
+        }
+        if(status == "hide"){
+          return
+        }
+        flyGLTFEvent = new FlyGLTFEvent({
+          view:m_view,
+          path:params.paths,
+          speed:0.0001
+        })
+        flyGLTFEvent.start();
+        if(params.isFollow){
+          flyGLTFEvent.followPath();
+        }
+      }
     })
   }
 }

src/config/basicTool.json

@@ -58,7 +58,7 @@
             "title":"WhiteMold",
             "visible": true,
             "opacity": 1,
-            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzI2ODg1NTYsImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.aUO35JAoBWzx4WSi5M-9v0cznraFXP6VAUxfjESPw-4",
+            "url": "\nhttps://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzI5NTE2NDgsImtleSI6IjA1MTk1NDE4Iiwic2VydmljZU5vIjoiRDkwMDMwMDA2MjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.w2Ind0H4xqEMGLkzD8wUtxblpSVgzLXnBWvhCY7jnS8",
             "token": ""
           }
         }
@@ -191,6 +191,19 @@
           }
         }
       },
+      {
+        "code": "1-19",
+        "title": "指定位置格子加载渲染",
+        "data": {
+          "ActionName": "realPositionGrid",
+          "Parameters": {
+            "status": "show",
+            "size": 50,
+            "data": null,
+            "token": ""
+          }
+        }
+      },
       {
         "code": "1-13",
         "title": "限高分析",
@@ -447,29 +460,125 @@
             "paths": [
               [
                 [
-                  528.7129407720578,
-                  187.11712073204322,
+                  4419.489284,
+                  7361.3196348,
                   0
                 ],
                 [
-                  663.3835485133418,
-                  246.0417022856806,
-                  120
+                  4722.45233401,
+                  7353.53178799,
+                  112.6
                 ],
                 [
-                  3264.7233137927133,
-                  633.3174867911413,
-                  120
+                  5082.94702425,
+                  7512.13693485,
+                  112.6
                 ],
                 [
-                  3407.849588250223,
-                  641.7371347257925,
-                  0
+                  5757.15146837,
+                  7714.98006736,
+                  112.6
+                ],
+                [
+                  5775.16196758,
+                  7551.31840959,
+                  112.6
+                ],
+
+
+                [
+                  5774.80167843,
+                  7449.51383181,
+                  112.6
+                ],
+                [
+                  5737.21978829,
+                  7127.43709037,
+                  112.6
+                ],
+                [
+                  5591.31188012,
+                  6784.34449701,
+                  61.6
+                ],
+                [
+                  5542.67695791,
+                  6669.98448716,
+                  41
+                ],
+                [
+                  5533.43949585,
+                  6674.18149397,
+                  26
                 ]
               ]
             ],
             "color": "#00FF7F",
-            "pipeRadius": 50
+            "pipeRadius": 10
+          }
+        }
+      },
+      {
+        "code": "1-18",
+        "title": "骨骼动画飞行",
+        "data": {
+          "ActionName": "FlyGLTF",
+          "Parameters": {
+            "status": "show",
+            "paths":    [
+              [
+                4419.489284,
+                7361.3196348,
+                0
+              ],
+              [
+                4722.45233401,
+                7353.53178799,
+                112.6
+              ],
+              [
+                5082.94702425,
+                7512.13693485,
+                112.6
+              ],
+              [
+                5757.15146837,
+                7714.98006736,
+                112.6
+              ],
+              [
+                5775.16196758,
+                7551.31840959,
+                112.6
+              ],
+              [
+                5774.80167843,
+                7449.51383181,
+                112.6
+              ],
+              [
+                5737.21978829,
+                7127.43709037,
+                112.6
+              ],
+              [
+                5591.31188012,
+                6784.34449701,
+                61.6
+              ],
+              [
+                5542.67695791,
+                6669.98448716,
+                41
+              ],
+              [
+                5533.43949585,
+                6674.18149397,
+                26
+              ]
+            ],
+            "isFollow": true,
+            "speed": 0.001
           }
         }
       }

src/config/pathJson.json

@@ -0,0 +1,356 @@
+{
+  "ypPath": [
+    [571, 951, 0],
+    [572, 951, 0],
+    [573, 951, 0],
+    [574, 951, 1],
+    [575, 951, 1],
+    [576, 951, 1],
+    [577, 951, 2],
+    [578, 951, 2],
+    [579, 951, 2],
+    [580, 951, 3],
+    [581, 951, 3],
+    [582, 951, 4],
+    [583, 952, 4],
+    [584, 952, 4],
+    [585, 952, 5],
+    [586, 952, 5],
+    [587, 952, 5],
+    [588, 952, 6],
+    [589, 952, 6],
+    [590, 952, 7],
+    [591, 952, 7],
+    [592, 952, 7],
+    [593, 952, 8],
+    [594, 952, 8],
+    [595, 952, 8],
+    [596, 952, 9],
+    [597, 952, 9],
+    [598, 952, 10],
+    [599, 952, 10],
+    [600, 952, 10],
+    [601, 952, 11],
+    [602, 952, 11],
+    [603, 952, 11],
+    [604, 952, 12],
+    [605, 952, 12],
+    [606, 952, 13],
+    [607, 952, 13],
+    [608, 952, 13],
+
+
+
+
+    [571, 952, 0],
+    [572, 952, 0],
+    [573, 952, 0],
+    [574, 952, 1],
+    [575, 952, 1],
+    [576, 952, 1],
+    [577, 952, 2],
+    [578, 952, 2],
+    [579, 952, 2],
+    [580, 952, 3],
+    [581, 952, 3],
+    [582, 952, 4],
+    [583, 951, 4],
+    [584, 951, 4],
+    [585, 951, 5],
+    [586, 951, 5],
+    [587, 951, 5],
+    [588, 951, 6],
+    [589, 951, 6],
+    [590, 951, 7],
+    [591, 951, 7],
+    [592, 951, 7],
+    [593, 951, 8],
+    [594, 951, 8],
+    [595, 951, 8],
+    [596, 951, 9],
+    [597, 951, 9],
+    [598, 951, 10],
+    [599, 951, 10],
+    [600, 951, 10],
+    [601, 951, 11],
+    [602, 951, 11],
+    [603, 951, 11],
+    [604, 951, 12],
+    [605, 951, 12],
+    [606, 951, 13],
+    [607, 951, 13],
+    [608, 951, 13],
+    [609, 951, 14],
+    [610, 951, 14],
+    [611, 951, 14],
+    [612, 952, 14],
+    [613, 952, 14],
+    [614, 953, 14],
+    [615, 953, 14],
+    [616, 953, 14],
+    [617, 954, 14],
+    [618, 954, 14],
+    [619, 955, 14],
+    [620, 955, 14],
+    [621, 956, 14],
+    [622, 956, 14],
+    [623, 957, 14],
+    [624, 957, 14],
+    [625, 957, 14],
+    [626, 958, 14],
+    [627, 958, 14],
+    [628, 959, 14],
+    [629, 959, 14],
+    [630, 960, 14],
+    [631, 960, 14],
+    [632, 960, 14],
+    [633, 961, 14],
+    [634, 961, 14],
+    [635, 962, 14],
+    [636, 962, 14],
+    [637, 963, 14],
+    [638, 963, 14],
+    [639, 964, 14],
+    [640, 964, 14],
+    [641, 964, 14],
+    [642, 965, 14],
+    [643, 965, 14],
+    [644, 966, 14],
+    [645, 966, 14],
+    [646, 967, 14],
+    [647, 967, 14],
+    [648, 968, 14],
+    [649, 968, 14],
+    [650, 968, 14],
+    [651, 969, 14],
+    [652, 969, 14],
+    [653, 970, 14],
+    [654, 970, 14],
+    [655, 971, 14],
+    [656, 971, 14],
+    [657, 971, 14],
+    [658, 972, 14],
+    [659, 972, 14],
+    [660, 972, 14],
+    [661, 973, 14],
+    [662, 973, 14],
+    [663, 973, 14],
+    [664, 973, 14],
+    [665, 974, 14],
+    [666, 974, 14],
+    [667, 974, 14],
+    [668, 975, 14],
+    [669, 975, 14],
+    [670, 975, 14],
+    [671, 976, 14],
+    [672, 976, 14],
+    [673, 976, 14],
+    [674, 976, 14],
+    [675, 977, 14],
+    [676, 977, 14],
+    [677, 977, 14],
+    [678, 978, 14],
+    [679, 978, 14],
+    [680, 978, 14],
+    [681, 979, 14],
+    [682, 979, 14],
+    [683, 979, 14],
+    [684, 979, 14],
+    [685, 980, 14],
+    [686, 980, 14],
+    [687, 980, 14],
+    [688, 981, 14],
+    [689, 981, 14],
+    [690, 981, 14],
+    [691, 982, 14],
+    [692, 982, 14],
+    [693, 982, 14],
+    [694, 982, 14],
+    [695, 983, 14],
+    [696, 983, 14],
+    [697, 983, 14],
+    [698, 984, 14],
+    [699, 984, 14],
+    [700, 984, 14],
+    [701, 985, 14],
+    [702, 985, 14],
+    [703, 985, 14],
+    [704, 985, 14],
+    [705, 986, 14],
+    [706, 986, 14],
+    [707, 986, 14],
+    [708, 987, 14],
+    [709, 987, 14],
+    [710, 987, 14],
+    [711, 988, 14],
+    [712, 988, 14],
+    [713, 988, 14],
+    [714, 988, 14],
+    [715, 989, 14],
+    [716, 863, 4],
+    [716, 989, 14],
+    [717, 862, 5],
+    [717, 863, 5],
+    [717, 864, 5],
+    [717, 989, 14],
+    [718, 865, 5],
+    [718, 866, 5],
+    [718, 990, 14],
+    [719, 867, 6],
+    [719, 868, 6],
+    [719, 869, 6],
+    [719, 990, 14],
+    [720, 870, 6],
+    [720, 871, 6],
+    [720, 990, 14],
+    [721, 872, 7],
+    [721, 873, 7],
+    [721, 991, 14],
+    [722, 874, 7],
+    [722, 875, 7],
+    [722, 876, 7],
+    [722, 991, 14],
+    [723, 877, 7],
+    [723, 878, 8],
+    [723, 879, 8],
+    [723, 991, 14],
+    [724, 880, 8],
+    [724, 881, 8],
+    [724, 991, 14],
+    [725, 882, 8],
+    [725, 883, 8],
+    [725, 992, 14],
+    [726, 884, 8],
+    [726, 885, 9],
+    [726, 886, 9],
+    [726, 992, 14],
+    [727, 887, 9],
+    [727, 888, 9],
+    [727, 992, 14],
+    [728, 889, 9],
+    [728, 890, 9],
+    [728, 993, 14],
+    [729, 891, 9],
+    [729, 892, 10],
+    [729, 893, 10],
+    [729, 993, 14],
+    [730, 894, 10],
+    [730, 895, 10],
+    [730, 993, 14],
+    [731, 896, 10],
+    [731, 897, 10],
+    [731, 898, 10],
+    [731, 994, 14],
+    [732, 899, 11],
+    [732, 900, 11],
+    [732, 994, 14],
+    [733, 901, 11],
+    [733, 902, 11],
+    [733, 994, 14],
+    [734, 903, 11],
+    [734, 904, 11],
+    [734, 905, 12],
+    [734, 994, 14],
+    [735, 906, 12],
+    [735, 907, 12],
+    [735, 995, 14],
+    [736, 908, 12],
+    [736, 909, 12],
+    [736, 995, 14],
+    [737, 910, 12],
+    [737, 911, 12],
+    [737, 912, 13],
+    [737, 995, 14],
+    [738, 913, 13],
+    [738, 914, 13],
+    [738, 996, 14],
+    [739, 915, 13],
+    [739, 916, 13],
+    [739, 996, 14],
+    [740, 917, 13],
+    [740, 918, 13],
+    [740, 919, 14],
+    [740, 996, 14],
+    [741, 920, 14],
+    [741, 921, 14],
+    [741, 997, 14],
+    [742, 922, 14],
+    [742, 923, 14],
+    [742, 924, 14],
+    [742, 925, 14],
+    [742, 926, 14],
+    [742, 927, 14],
+    [742, 928, 14],
+    [742, 997, 14],
+    [743, 929, 14],
+    [743, 930, 14],
+    [743, 931, 14],
+    [743, 932, 14],
+    [743, 933, 14],
+    [743, 934, 14],
+    [743, 935, 14],
+    [743, 936, 14],
+    [743, 997, 14],
+    [744, 937, 14],
+    [744, 938, 14],
+    [744, 939, 14],
+    [744, 940, 14],
+    [744, 941, 14],
+    [744, 942, 14],
+    [744, 943, 14],
+    [744, 944, 14],
+    [744, 945, 14],
+    [744, 997, 14],
+    [744, 998, 14],
+    [745, 946, 14],
+    [745, 947, 14],
+    [745, 948, 14],
+    [745, 949, 14],
+    [745, 950, 14],
+    [745, 951, 14],
+    [745, 952, 14],
+    [745, 953, 14],
+    [745, 987, 14],
+    [745, 988, 14],
+    [745, 989, 14],
+    [745, 990, 14],
+    [745, 991, 14],
+    [745, 992, 14],
+    [745, 993, 14],
+    [745, 994, 14],
+    [745, 995, 14],
+    [745, 996, 14],
+    [746, 954, 14],
+    [746, 955, 14],
+    [746, 956, 14],
+    [746, 957, 14],
+    [746, 958, 14],
+    [746, 959, 14],
+    [746, 960, 14],
+    [746, 961, 14],
+    [746, 962, 14],
+    [746, 978, 14],
+    [746, 979, 14],
+    [746, 980, 14],
+    [746, 981, 14],
+    [746, 982, 14],
+    [746, 983, 14],
+    [746, 984, 14],
+    [746, 985, 14],
+    [746, 986, 14],
+    [747, 963, 14],
+    [747, 964, 14],
+    [747, 965, 14],
+    [747, 966, 14],
+    [747, 967, 14],
+    [747, 968, 14],
+    [747, 969, 14],
+    [747, 970, 14],
+    [747, 971, 14],
+    [747, 972, 14],
+    [747, 973, 14],
+    [747, 974, 14],
+    [747, 975, 14],
+    [747, 976, 14],
+    [747, 977, 14]]
+}

src/units/map/FlyGLTFEvent.js

@@ -0,0 +1,114 @@
+import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode.js'
+import * as webgl from "@arcgis/core/views/3d/webgl.js";
+import {FlyGLTFClass} from "../threejs/flyGLTF.js";
+
+class FlyGLTFEvent{
+    constructor(options) {
+        this.view = options.view;
+        this.path = options.path;
+        this.speed = options.speed;
+        this.flyGLTFEvent = null;
+        this.followTimer = null;
+    }
+    start(){
+        if(this.flyGLTFEvent){
+            this.clear();
+        }
+        let subRenderClass = RenderNode.createSubclass(FlyGLTFClass);
+        this.flyGLTFEvent =  new subRenderClass({
+            view: this.view,
+            webgl,
+            path: this.path,
+            speed: this.speed
+        })
+    }
+    clear(){
+        if(this.flyGLTFEvent){
+            this.flyGLTFEvent.destroy();
+            this.flyGLTFEvent = null;
+        }
+        if(this.followTimer){
+            clearInterval(this.followTimer);
+            this.followTimer = null;
+        }
+    }
+    followPath(){
+        debugger
+        if(this.followTimer){
+            clearInterval(this.followTimer);
+            this.followTimer = null;
+        }
+        this.followTimer = setInterval(()=>{
+            const pathProgress = this.flyGLTFEvent.pathProgress;
+            const currentPosition = this.flyGLTFEvent.pathCurve.getPointAt(pathProgress);
+            const nextProgress = Math.min(pathProgress + 0.01,1);
+            const nextPosition = this.flyGLTFEvent.pathCurve.getPointAt(nextProgress);
+            if(pathProgress >= 1){
+                this.flyGLTFEvent.pathProgress = 0
+            };
+            if(currentPosition && nextPosition){
+                //将坐标转换为地图参考系
+                let currentAfterPosition = [currentPosition.y,currentPosition.z,currentPosition.x - 6378137];
+                let nextAfterPosition = [nextPosition.y,nextPosition.z,nextPosition.x - 6378137];
+                //计算heading
+                const heading = this.calculatePathHeading(currentAfterPosition,nextAfterPosition);
+                const cameraHeading = this.calculateCameraPathHeading(currentAfterPosition,nextAfterPosition);
+                //计算相机后方的偏移位置
+                const offsetDistance = 40;
+                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] + 30
+                ];
+                this.view.camera = {
+                    position:{
+                        x:mapPosition[0],
+                        y:mapPosition[1],
+                        z:mapPosition[2],
+                        type:"point",
+                        spatialReference:this.view.spatialReference
+                    },
+                    heading: heading,
+                    tilt: 50
+                };
+            }
+
+        },1);
+
+    }
+    // 计算两个点之间的heading和tilt
+    calculatePathHeading(startPoint, endPoint) {
+        // 计算矩形的朝向角度
+        let a = endPoint[0] - startPoint[0];
+        let b = endPoint[1] - startPoint[1];
+        let heading;
+        if (b === 0) {
+            heading = a > 0 ? 90 : 270;
+        } else {
+            let angle = Math.atan(Math.abs(a / b)) * 180 / Math.PI;
+            if (a >= 0 && b > 0) {
+                heading = angle;
+            } else if (a >= 0 && b < 0) {
+                heading = 180 - angle;
+            } else if (a < 0 && b < 0) {
+                heading = 180 + angle;
+            } else {
+                heading = 360 - angle;
+            }
+        }
+        heading = (heading + 450) % 360;
+        return heading - 90;
+    }
+    // 计算两个点之间的heading和tilt
+    calculateCameraPathHeading(currentPosition, nextPosition) {
+        const dx = nextPosition[0] - currentPosition[0];
+        const dy = nextPosition[1] - currentPosition[1];
+        const heading = Math.atan2(dy, dx) * (180 / Math.PI); // 将弧度转换为度数
+        return heading;
+    }
+
+}
+export default FlyGLTFEvent

src/units/map/InitMap.js

@@ -11,6 +11,9 @@ class InitMap{
     }
     intMap(){
         this.m_map = new Map({});
+        this.m_map.ground.navigationConstraint = {
+            type: "none"
+        };
         this.m_view = new SceneView({
             container:"viewDiv",
             map:this.m_map,
@@ -35,8 +38,13 @@ class InitMap{
                     directShadowsEnabled: true,
                     cameraTrackingEnabled: true
                 }
-            },
+            }
         });
+        this.m_view.constraints = {
+            collision: {
+                enabled: false
+            }
+        };
         this.m_view.ui.empty("top-left");
         this.m_view.ui.remove("attribution");
     }

src/units/map/addThreeGridEvent.js

@@ -10,6 +10,8 @@ class AddThreeGridEvent{
         this.height = options.height;
         this.size = options.size;
         this.layerHeight = options.layerHeight;
+        this.gridEnabled = options.gridEnabled;
+        this.netEnabled = options.netEnabled;
         this.animationEnabled = options.animationEnabled;
     }
     start(){
@@ -17,6 +19,15 @@ class AddThreeGridEvent{
         if(this.addThreeGridEvent){
             this.clear();
         }
+
+        // 调整minX和maxX，使其符合size的整数倍
+        this.extent.minX = Math.floor(this.extent.minX / this.size) * this.size - this.size;
+        this.extent.maxX = Math.ceil(this.extent.maxX / this.size) * this.size  + this.size;
+
+        // 调整minY和maxY，使其符合size的整数倍
+        this.extent.minY = Math.floor(this.extent.minY / this.size) * this.size - this.size;
+        this.extent.maxY = Math.ceil(this.extent.maxY / this.size) * this.size + this.size;
+
         let subRenderClass = RenderNode.createSubclass(ThreeGridClass);
         this.view.when(()=>{
             that.addThreeGridEvent = new subRenderClass({
@@ -28,6 +39,8 @@ class AddThreeGridEvent{
                     maxX: that.extent.maxX > 60000?60000:that.extent.maxX,
                     maxY: that.extent.maxY > 70000?70000:that.extent.maxY,
                 },
+                gridEnabled:that.gridEnabled,
+                netEnabled:that.netEnabled,
                 height:that.height,
                 size:that.size,
                 layerHeight:that.layerHeight,

src/units/threejs/flyGLTF.js

@@ -0,0 +1,156 @@
+import * as THREE from 'three';
+import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";
+export const FlyGLTFClass = {
+    constructor(options){
+        this.webgl = options.webgl;
+        this.view = options.view;
+        this.mixer = null;
+        this.airCraftMixer = null;
+        this.clock = null;
+        this.airCraftClock = null;
+        this.path = options.path;  //路径点
+        this.pathProgress = 0; //路径速度
+        this.speed = options.speed; //飞行速度
+        this.pathCurve = null; //路径曲线
+        this.targetObject = null; //路径飞行的目标对象
+        this.gridMeshes = []; //用于存储路径周边的网格
+        this._camera = null;
+        this.gridSize = options.gridSize || 100;
+    },
+    initialize(){
+        this.mixer = new THREE.AnimationMixer();
+        this.airCraftMixer = new THREE.AnimationMixer();
+        this.clock = new THREE.Clock();
+        this.airCraftClock = new THREE.Clock();
+
+        this.renderer = new THREE.WebGLRenderer({
+            context:this.gl,
+            premultipliedAlpha: false
+        });
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setViewport(0,0,this.view.width,this.view.height);
+        this.renderer.autoClear = false;
+        this.renderer.autoClearDepth = false;
+        this.renderer.autoClearColor = false;
+        let originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);
+        this.renderer.setRenderTarget = function(target){
+            originalSetRenderTarget(target);
+            if(target){
+                this.bindRenderTarget()
+            }
+        }
+        this.scene = new THREE.Scene();
+        let cam = this.camera;
+        this._camera = new THREE.PerspectiveCamera(cam.fovY,cam.aspect,cam.near,cam.far);
+        //添加坐标轴辅助工具
+        const axesHelper = new THREE.AxesHelper(1);
+        axesHelper.position.set(1000000,1000000,1000000);
+        this.scene.add(axesHelper);
+
+        const grid = new THREE.GridHelper(30,10,0xf0f0f0,0xffffff);
+        this.scene.add(grid);
+
+        this.ambient = new THREE.AmbientLight(0xffffff,0.5);
+        this.scene.add(this.ambient);
+
+        this.loadGLTF();
+        //初始化路径曲线
+        this.initPathCurve();
+
+        this.resetWebGLState();
+    },
+
+    loadGLTF(){
+        const loader = new GLTFLoader();
+        let that = this;
+        loader.load('public/gltf/wrj.glb',function (gltf){
+            gltf.scene.scale.set(0.2,0.2,0.2);
+            that.scene.add(gltf.scene);
+            that.targetObject = gltf.scene;
+
+            that.mixer = new THREE.AnimationMixer(gltf.scene);
+            const AnimationAction = that.mixer.clipAction(gltf.animations[0]);
+            AnimationAction.play();
+        })
+    },
+
+    initPathCurve(){
+      if(this.path.length > 1){
+          //用于存储路径的点
+          const points = this.path.map(point => {
+              const renderPoint = [0,0,0];
+              this.webgl.toRenderCoordinates(
+                  this.view,
+                  point,
+                  0,
+                  this.view.spatialReference,
+                  renderPoint,
+                  0,
+                  1
+              );
+              return new THREE.Vector3(renderPoint[0],renderPoint[1],renderPoint[2]);
+          });
+          //创建一个CurvePath来容纳多条直线路径
+          this.pathCurve = new THREE.CurvePath();
+          //将路径点的相邻俩点组成一条直线添加到pathCurve中
+          for(let i=0;i<points.length-1;i++){
+              const line = new THREE.LineCurve3(points[i],points[i+1]);
+              this.pathCurve.add(line);
+          }
+          //创建几何体以便在场景中可视化路径
+          const geometry = new THREE.BufferGeometry().setFromPoints(this.pathCurve.getPoints(50));
+          const material = new THREE.LineBasicMaterial({color:0xff0000,lineWidth:2});
+          this.pathLine = new THREE.Line(geometry,material);
+          this.scene.add(this.pathLine);
+      }
+    },
+
+
+
+
+    render(){
+        let cam = this.camera;
+        //需要调整相机的视角
+        this._camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
+        this._camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
+        this._camera.lookAt(new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2]));
+        // Projection matrix can be copied directly
+        this._camera.projectionMatrix.fromArray(cam.projectionMatrix);
+
+        if (this.mixer) {
+            this.mixer.update(this.clock.getDelta());
+        }
+
+        if (this.airCraftMixer) {
+            this.airCraftMixer.update(this.airCraftClock.getDelta());
+        }
+
+        if (this.pathCurve && this.targetObject) {
+            this.pathProgress += this.speed;
+            if (this.pathProgress > 1) this.pathProgress = 0;
+
+            const position = this.pathCurve.getPointAt(this.pathProgress);
+            const tangent = this.pathCurve.getTangentAt(this.pathProgress);
+
+            this.targetObject.position.copy(position);
+            this.targetObject.quaternion.setFromUnitVectors(
+                new THREE.Vector3(0, 0, 1), tangent
+            );
+
+            this.targetObject.rotation.z = -Math.PI/2;
+        }
+
+
+        this.renderer.state.reset();
+
+        this.bindRenderTarget();
+
+        this.renderer.render(this.scene, this._camera);
+        // as we want to smoothly animate the ISS movement, immediately request a re-render
+        this.requestRender();
+
+        // cleanup
+        this.resetWebGLState();
+    }
+
+}

src/units/threejs/pathPipe.js

@@ -63,8 +63,9 @@ export const PathPipeClass = {
         let material = new THREE.MeshBasicMaterial({
             color: this.color,
             transparent:true,
-            opacity:0.1,
-            side: THREE.DoubleSide // 设置为双面材质
+            opacity:0.2,
+            side: THREE.DoubleSide, // 设置为双面材质
+            depthWrite: false // 关闭深度写入
         });
 
         this.paths.forEach(path => {

src/units/threejs/threeGrid.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-
+import Path from '../../config/pathJson.json'
 export const ThreeGridClass = {
     constructor(options) {
         this.webgl = options.webgl;
@@ -9,6 +9,8 @@ export const ThreeGridClass = {
         this.size = options.size ||200; // 单个立方体的尺寸
         this.layerHeight = this.layerHeight || 400, // 每层的高度
         this.layerColors = this.layerColors || [new THREE.Color(0xff0000), new THREE.Color(0x00ff00), new THREE.Color(0x0000ff)] // 自定义每层颜色
+        this.gridEnabled = options.gridEnabled;
+        this.netEnabled = options.netEnabled;
         this.mesh = null;
         this._camera = null;
         this.currentLayer = 0;
@@ -54,9 +56,13 @@ export const ThreeGridClass = {
 
 
         // 创建实例化立方体网格
-        this.createInstancedMesh();
-        this.createGlobalGridLines();
-        this.scene.add(this.mesh);
+        if(this.gridEnabled){
+            this.createInstancedMesh();
+            this.scene.add(this.mesh);
+        }
+        if(this.netEnabled){
+            this.createGlobalGridLines();
+        }
 
         // 添加灯光（确保物体在场景中可以被看见）
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
@@ -76,7 +82,8 @@ export const ThreeGridClass = {
     },
 
     createInstancedMesh() {
-        const geometry = new THREE.BoxGeometry(this.layerHeight, this.size, this.size);
+        //const geometry = new THREE.BoxGeometry(this.layerHeight, this.size, this.size);
+        const geometry = new THREE.BoxGeometry(7.73, 7.73, 7.73);
         geometry.computeVertexNormals();  // 计算并更新顶点法线
         const material = new THREE.MeshPhongMaterial({
             transparent: true,
@@ -84,7 +91,7 @@ export const ThreeGridClass = {
             depthTest:true,
             side:THREE.DoubleSide
         });
-
+        debugger
         // 修改材质支持 instanceColor
         material.onBeforeCompile = (shader) => {
             shader.vertexShader = `
@@ -116,78 +123,63 @@ export const ThreeGridClass = {
         const yCount = Math.floor((this.extent.maxY - this.extent.minY) / this.size);
         const zCount = Math.floor(this.height / this.layerHeight);
         const count = xCount * yCount * zCount;
-        if(count >2000000){
-            return
-        }
-
         this.mesh = new THREE.InstancedMesh(geometry, material, count);
-
-
         // 为实例添加颜色属性
         const instanceColors = new Float32Array(count * 3);
         const dummy = new THREE.Object3D();
         const color = new THREE.Color();
         let index = 0;
 
-        // 存储合并后的线段
-        const mergedLines = [];
-
-        // 创建边框线的几何体 (LineSegments)
-        const edges = new THREE.EdgesGeometry(geometry);
-        this.edgeMaterial = new THREE.LineBasicMaterial({
-            color: 0xffffff,
-            opacity: 0.8,
-            linewidth:1,
-            transparent: true
-        });
-
-        // 按照网格的格子来合并线段
-        for (let i = 0; i < xCount; i++) {
-            for (let j = 0; j < yCount; j++) {
-                for (let k = 0; k < zCount; k++) {
-                    const worldX = this.extent.minX + i * this.size + this.size / 2;
-                    const worldY = this.extent.minY + j * this.size + this.size / 2;
-                    const worldZ = k * this.layerHeight + this.layerHeight / 2;
-
-                    let renderPos = [];
-                    this.webgl.toRenderCoordinates(this.view, [worldX, worldY, worldZ], 0, this.view.spatialReference, renderPos, 0, 1);
-
-                    dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
-                    dummy.updateMatrix();
-                    this.mesh.setMatrixAt(index, dummy.matrix);
-
-                    // 分配颜色：由层数计算从红到绿的渐变
-                    const layerFraction = k / (zCount - 1); // 当前层在总层数中的比例
-                    color.setHSL(layerFraction * 0.33, 1, 0.5); // HSL中的H从0（红）到0.33（绿）
-
-                    instanceColors[index * 3] = color.r;
-                    instanceColors[index * 3 + 1] = color.g;
-                    instanceColors[index * 3 + 2] = color.b;
-
-                    // 将当前格子的边框添加到合并的线段列表中
-                    const edgesArr = edges.attributes.position.array;
-                    const startIndex = index * edgesArr.length;
-
-                    // for (let i = 0; i < edgesArr.length; i++) {
-                    //     mergedLines.push(edgesArr[i] + dummy.position.toArray()[i % 3]);
-                    // }
-
-
-
-                    index++;
-                }
-            }
+        // for (let i = 0; i < xCount; i++) {
+        //     for (let j = 0; j < yCount; j++) {
+        //         for (let k = 0; k < zCount; k++) {
+        //             const worldX = this.extent.minX + i * this.size + this.size / 2;
+        //             const worldY = this.extent.minY + j * this.size + this.size / 2;
+        //             const worldZ = k * this.layerHeight + this.layerHeight / 2;
+        //             debugger
+        //             let renderPos = [];
+        //             this.webgl.toRenderCoordinates(this.view, [worldX, worldY, worldZ], 0, this.view.spatialReference, renderPos, 0, 1);
+        //
+        //             dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
+        //             dummy.updateMatrix();
+        //             this.mesh.setMatrixAt(index, dummy.matrix);
+        //
+        //             // 分配颜色：由层数计算从红到绿的渐变
+        //             const layerFraction = k / (zCount - 1); // 当前层在总层数中的比例
+        //             color.setHSL(layerFraction * 0.33, 1, 0.5); // HSL中的H从0（红）到0.33（绿）
+        //
+        //             instanceColors[index * 3] = color.r;
+        //             instanceColors[index * 3 + 1] = color.g;
+        //             instanceColors[index * 3 + 2] = color.b;
+        //
+        //             index++;
+        //         }
+        //     }
+        // }
+
+        for(let i=0;i<Path.ypPath.length;i++){
+            let renderPos = [];
+
+            this.webgl.toRenderCoordinates(this.view, [Path.ypPath[i][0] * 7.73,Path.ypPath[i][1] * 7.73,Path.ypPath[i][2] * 7.73], 0, this.view.spatialReference, renderPos, 0, 1);
+
+            dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
+            dummy.updateMatrix();
+            this.mesh.setMatrixAt(index, dummy.matrix);
+
+            debugger
+            instanceColors[index * 3] = 0;
+            instanceColors[index * 3 + 1] = 1;
+            instanceColors[index * 3 + 2] = 0;
+
+            index++;
         }
 
+
         // 为实例化的网格设置颜色
         geometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instanceColors, 3));
         geometry.attributes.instanceColor.needsUpdate = true;
         this.mesh.instanceMatrix.needsUpdate = true;
 
-        // 创建合并后的线段几何体
-        const mergedLineGeometry = new THREE.BufferGeometry();
-        mergedLineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(mergedLines, 3));
-        this.mergedLineMesh = new THREE.LineSegments(mergedLineGeometry, this.edgeMaterial);
 
         // 将网格和边框分别添加到场景中
         this.scene.add(this.mesh);