From f79670d51e41f1e762762c73e423fb658556102b Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期五, 08 八月 2025 10:55:32 +0800
Subject: [PATCH] 模板增加计算两个点距离

---
 src/utils/components/init-map.vue |  142 ++++++++++++++++++++++++-----------------------
 1 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/src/utils/components/init-map.vue b/src/utils/components/init-map.vue
index 6cb1d61..e77392c 100644
--- a/src/utils/components/init-map.vue
+++ b/src/utils/components/init-map.vue
@@ -27,11 +27,12 @@
     </div>
 
       <!-- 宸︿笅瑙掑�嶇巼淇℃伅 -->
-      <div class="zoom-info">
-        <el-tag type="success">鍊嶇巼: {{ zoomRatio.toFixed(1) }}X</el-tag>
-      </div>
+      
     </div>
-
+    <div class="zoom-info">
+      <el-tag type="success">鍊嶇巼: {{ zoomRatio.toFixed(1) }}X</el-tag>
+      <el-tag type="success">璺濈: {{ betweenDistance.toFixed(1) }}绫�</el-tag>
+    </div>
     
     
     <!-- botton -->
@@ -125,7 +126,7 @@
 // let  pois = [0, 0,0] 
 let holdingPosition;
 let rightKeyMove = false
-let  distance = 100; 
+let  distance = 25; 
 export default {
   props: {
     towerUrl: {
@@ -133,6 +134,9 @@
       default() {
         return ''
       }
+    },
+    deviceData: {
+      type: Object,
     },
   },
   data(){
@@ -169,11 +173,13 @@
           14: '14X',
           28: '28X',
           56: '56X'
-        }
+        },
+        betweenDistance:0
     }
   },
   mounted(){
      this.initCesium();
+     console.log(this.deviceData)
   },
   computed: {
     boxWidth() {
@@ -209,7 +215,6 @@
         control.enableTilt = false;
         control.enableLook = false;
         viewerC.scene.camera.percentageChanged = 0.05聽
-        this.cammove_measure_point();
       },1000)
     },
 
@@ -248,13 +253,6 @@
           fullscreenButton: false,
           vrButton: false,
       });
-       // 鍏抽棴澶╃┖鐩掓晥鏋�
-      // viewer.scene.skyAtmosphere = undefined; // 鎴栬�呰缃负 null
-      
-      // // 鍏抽棴鍏夌収鏁堟灉
-      // viewer.scene.globe.enableLighting = false; // 鍏抽棴鍏夌収鏁堟灉
-      
-    //    viewer.imageryLayers.add(bdtvectoranoimagery);
       viewer._cesiumWidget._creditContainer.style.display="none";  
       return viewer;
       
@@ -271,7 +269,6 @@
       // 璁剧疆瑙嗚锛屼娇鍏堕粯璁ゆ煡鐪嬫煇涓湴鐞嗕綅缃�
       viewerM.scene.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(globalon, globalat, 349.0), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級
-          // destination: Cesium.Cartesian3.fromDegrees(0.0005, 0.0017, 207.8), // 浠ョ粡绾害璁剧疆浣嶇疆锛堜緥濡傦細澶у簡榫欏叴璺級
           orientation: {
               heading: Cesium.Math.toRadians(194.65),  // 鏂瑰悜
               pitch: Cesium.Math.toRadians(-31.43), // 淇
@@ -303,12 +300,10 @@
     },
     addSyncListener() {
       // 瀛樹笅鍥炶皟浠ヤ究閿�姣�
-      // this._preRenderCallback = () => this.syncViewer();
       viewerM.scene.preRender.addEventListener( this.syncViewer());
       window.addEventListener("keydown", this.handleKeydown);
     },
     syncViewer(){
-      console.log(viewerM.camera)
       viewerC.camera.flyTo({
           destination: viewerM.camera.position,
           orientation: {
@@ -351,7 +346,6 @@
                 let lng = Cesium.Math.toDegrees(cartographic.longitude);
                 let lat = Cesium.Math.toDegrees(cartographic.latitude);
                 height = cartographic.height;
-                console.log(lng+','+lat+','+height)
             }
 
             //鍦ㄤ袱涓獥鍙e垱寤烘爣娉�
@@ -380,37 +374,37 @@
                 //鏍规嵁鍋忕Щ閲忔眰鍋忕Щ鍚戦噺
             聽聽聽聽const scalerNormalize聽=聽Cesium.Cartesian3.multiplyByScalar(normalize,distance,new聽Cesium.Cartesian3());
                 const tagert = Cesium.Cartesian3.add(holdingPosition,scalerNormalize,new聽Cesium.Cartesian3());
-                console.log(Cesium.Cartographic.fromCartesian(tagert))
+                //鍒涘缓绌轰腑鐐筽in
                 _this.creatPin("aerialPoiId"+counter,tagert,`绌�${counter}`,Cesium.Color.RED,viewerM);
-                // preVideoScopePrimitiveArrTie = []
-                console.log(preVideoScopePrimitiveArrTie)
-                
-                console.log(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).height))
+                //鏇存柊閿洏浜嬩欢
                 _this.updateCameraMovement();
-                // if(cameraVideo){
-                //   viewerM.scene.primitives.remove(cameraVideo)
-                // }
-              chooseId = crypto.randomUUID()
-              //鍒涘缓瑙嗛敟浣�
+                //褰撳墠閫夋嫨鐨刬d
+                chooseId = crypto.randomUUID()
+                //鍒涘缓瑙嗛敟浣�
                 let data = {
-                    "FHorFieldAngle": 32.13,
-                    "FVerFieldAngle": 18.39,
                     "altitude":  Cesium.Cartographic.fromCartesian(tagert).height,
                     "id": chooseId,
-                    "chanNo": 1,
                     "latitude": Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude),
                     "longitude":  Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude),
-                    "p": 26.8,
-                    "t": 351.3,
-                    "z": 1,
                 }
-                const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50);
+                const lookPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude)
+                const watchPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude))
+                const betweenDistanceWatch = Cesium.Cartesian3.distance(lookPoint, watchPoint)
+                _this.betweenDistance = betweenDistanceWatch
+                console.log(lookPoint)
+                console.log(watchPoint)
+                // const guanPoint1 = Cesium.Cartesian3.fromDegrees(longitude, latitude)
+                console.log(viewerM.entities.getById('groundPoiId0'))
+                //濉旂殑璺濈鍜岃娴嬬偣鐨勮窛绂�
+                console.log(_this.deviceData)
+                const point1 = Cesium.Cartesian3.fromDegrees(0, 0, _this.deviceData?.modelHeight || 45);
+                // const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 45);
                 const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude), Cesium.Cartographic.fromCartesian(tagert).height);
 
                 // 璁$畻璺濈锛堝崟浣嶏細绫筹級
-                const distance1 = Cesium.Cartesian3.distance(point1, point2)
-                console.log(distance1)
-                data.distance = distance1
+                const distanceCalculate = Cesium.Cartesian3.distance(point1, point2)
+                data.distance = distanceCalculate
+                //鍙抽敭缁撴潫鍚庢妸缂╂斁閲嶇疆涓�1
                 _this.zoomRatio = 1
                 _this.createVideoScope(data)
                 setTimeout(() => {
@@ -448,8 +442,6 @@
       return result;
     },
     changeCamera(position,heading){
-        console.log(position)
-        console.log(heading)
         viewerC.camera.flyTo({
             destination: position,
             orientation: {
@@ -551,7 +543,19 @@
         } else {
           groupEntity.position = position;
         }
-        console.log(groupEntity)
+        //璁$畻涓や釜鐐硅窛绂�
+        console.log(viewerM.entities)
+           const groupEntityGround = viewerM.entities.getById("groundPoiId"+(counter-1));
+           const groupPosition  = groupEntityGround.position.getValue(Cesium.JulianDate.now());
+           if (groupPosition) {
+              const cartographic = Cesium.Cartographic.fromCartesian(groupPosition);
+              const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+              const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+              const point1 = Cesium.Cartesian3.fromDegrees(lon, lat);
+              const point2 = Cesium.Cartesian3.fromDegrees(longitude, latitude);
+              const gure = Cesium.Cartesian3.distance(point1, point2)
+              this.betweenDistance  = gure
+          }
       }
       const key = event.key;
       const lower = key.toLowerCase();
@@ -718,12 +722,6 @@
       // Fly back to the initial view (home) in 1 second
       viewerC.camera.flyHome(1.0);
     },
-    move_measure_point(){
-      CesiumSurvey.measureMovePoint(viewerC,'moveResultCon');
-    },
-    cammove_measure_point(){
-      CesiumSurvey.cammeasureMovePoint(viewerC,'cammoveResultCon');
-    },
     mergePoint(){
       let allEntities = viewerM.entities.values; // 鎵�鏈夊疄浣撳璞$粍鎴愮殑鏁扮粍
       const grouped = {};
@@ -760,7 +758,6 @@
           ]
         };
       });
-      console.log(result)
       this.$emit('mergePoint',result,this.mergeNumber,viewerM)
     },
     genId() {
@@ -791,7 +788,6 @@
     },
     handleKeydown(e) {
       const key = e.key;
-      console.log(key)
       const validKeys = ["a", "s", "d", "w",'q','e','ArrowUp','ArrowDown','ArrowLeft','ArrowRight','q','e'];
       if (validKeys.includes(key)) {
         this.triggerKey(key);
@@ -800,8 +796,6 @@
     },
      // 鍒涘缓鍒濆鍖栫殑鍏夎酱
     createVideoScope(data) {
-      console.log(data)
-      console.log(data.distance)
       if (data == undefined) {
         this.$message({
           showClose: true,
@@ -822,7 +816,6 @@
             // Number(data.altitude) + Number(hight[1]) + 1.7
             Number(data.altitude)
         );
-        console.log(data)
         let inverseViewMatrix = this.hpr2m({
           position: positionCt3, // 鐩告満鍧愭爣
           // heading: Cesium.Math.toRadians(Number(120)),
@@ -833,7 +826,7 @@
           roll: Cesium.Math.toRadians(0),
         });
         let frustum = new Cesium.PerspectiveFrustum({
-          fov: Cesium.Math.toRadians(1),
+          fov: Cesium.Math.toRadians(56),
           aspectRatio: Number(1.77778), // 瀹介珮姣�
           near: Number(0.05), // 璁惧鐒﹁窛
           far: Number(data.distance), // 鎷嶆憚璺濈
@@ -861,16 +854,11 @@
             );
         // viewer.scene.primitives.add(cameraVideo);
         let pmObj = {};
-        console.log(data)
         pmObj.id = data.id;
-        console.log(pmObj)
         pmObj.primitive = cameraVideo;
-        // pmCollection.push(pmObj);//骞曞竷锛岃棰戣浆鎹娇鐢�
         viewerM.scene.primitives.add(cameraVideo);
         preVideoScopePrimitiveArrTie.push(pmObj);
         preVideoScopePrimitiveArrTie.map((item)=>{
-          console.log(item)
-          console.log(chooseId)
           if(item.id != chooseId){
             item.primitive.show = false
           }
@@ -937,18 +925,36 @@
       const heading = Cesium.Math.toDegrees(camera.heading);
       const pitch = Cesium.Math.toDegrees(camera.pitch);
       const roll = Cesium.Math.toDegrees(camera.roll);
-      const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50);
+      const point1 = Cesium.Cartesian3.fromDegrees(0, 0, this.deviceData?.modelHeight || 45);
       const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height)
+      
+      var camResult =
+        position.longitude.toFixed(4) +
+        '\u00B0' +
+        ',' +
+        position.latitude.toFixed(4) +
+        '\u00B0' +
+        ',' +
+        position.height.toFixed(1) +
+        '绫�,' +
+        heading.toFixed(2) +
+        '\u00B0' +
+        ',' +
+        pitch.toFixed(2) +
+        '\u00B0' +
+        ',' +
+        roll.toFixed(1) +
+        '\u00B0';
+      document.getElementById('cammoveResultCon').innerHTML = camResult;
       // 璁$畻璺濈锛堝崟浣嶏細绫筹級
       const distanceBetween = Cesium.Cartesian3.distance(point1, point2)
-      console.log(distanceBetween)
       console.log(preVideoScopePrimitiveArrTie)
-      console.log(chooseId)
       preVideoScopePrimitiveArrTie.map((item)=>{
         if(item.id == chooseId){
           let obj = this.updateSZScope(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height,heading,pitch,roll,this.zoomRatio,distanceBetween)
           item.primitive.inverseViewMatrix = obj.M
           item.primitive.frustum = obj.F
+          item.primitive.zoomRatio  = this.zoomRatio
         }
       })
     },
@@ -959,22 +965,18 @@
           Number(lat),
           Number(alt)
       );
-      console.log(positionCt3)
-      console.log(distanceBetween)
       let frustum = new Cesium.PerspectiveFrustum({
-        fov: Cesium.Math.toRadians(LightView),
+        fov: Cesium.Math.toRadians(56/LightView),
         aspectRatio: Number(1.77778),
         near: Number(0.05),
         far: Number(distanceBetween),
       });
-      console.log(frustum)
       let inverseViewMatrixNew = this.hpr2m({
         position: positionCt3,
         heading: Cesium.Math.toRadians(Number(camHeading)),
         pitch: Cesium.Math.toRadians(Number(camPitch)),
         roll: Cesium.Math.toRadians(Number(camRoll)),
       });
-      console.log(inverseViewMatrixNew)
       return {M: inverseViewMatrixNew, F: frustum};
     },
     handleWheel(event) {
@@ -1007,7 +1009,7 @@
 #cesiumContainer {
     margin: 0;
     padding: 0;
-    width: 73%;
+    width: 74%;
     height: calc(100vh - 205px);
 }
 #cesiumCamera {
@@ -1032,7 +1034,7 @@
     /* padding: 0 5px; */
     margin-top: 10px;
     right: 0px;
-    width: 420px;
+    width: 410px;
     height: calc(100vh - 210px);
     bottom: 30px;
     margin: 0;
@@ -1134,8 +1136,8 @@
 /* 宸︿笅瑙掑�嶇巼鏍囩 */
 .zoom-info {
   position: absolute;
-  bottom: 20px;
-  left: 20px;
+  bottom: 35px;
+  left: 340px;
 }
 
 </style>

--
Gitblit v1.9.3