增加距离位置、一直显示轨迹

public/config.js

@@ -7,7 +7,7 @@ const allPositionLat = 39.036963; // 全部防区跳转纬度
 const allPositionAlt = 4000; // 全部防区跳转高度
 const allPositionPitch = -90; // 全部防区跳转俯仰角
 
-const currTime = 15; // 左侧无人机消失时间
+const currTime = 60; // 左侧无人机消失时间
 
 const uavSize = 50; // 无人机大小
 const uaColor = "#ffffff"; // 无人机颜色

src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   isZoomedIn: (state) => state.chart.isZoomedIn, //音频是否打开
   SliderValue: (state) => state.chart.SliderValue, //音量值
   checkFlag: (state) => state.chart.checkFlag, //轨迹查看按钮
-  clearTrajectory: (state) => state.chart.clearTrajectory //清空轨迹
+  clearTrajectory: (state) => state.chart.clearTrajectory, //清空轨迹
+  lonAndLat: (state) => state.map.lonAndLat // 无人机距离我的位置
 };
 export default getters;

src/store/modules/map.js

@@ -1,7 +1,8 @@
 const user = {
   state: {
     map: null,
-    adsbisFlag: false
+    adsbisFlag: false,
+    lonAndLat: []
   },
 
   mutations: {
@@ -10,6 +11,9 @@ const user = {
     },
     SET_ADSBIS_FLAG: (state, value) => {
       state.adsbisFlag = value;
+    },
+    SET_LONANDLAT: (state, value) => {
+      state.lonAndLat = value;
     }
   },
 

src/views/contentData/LeftSidebar/index.vue

@@ -110,8 +110,8 @@
                   </div>
                   <div class="content-potions-bottom">
                     <div class="content-text content-potions-lat">
-                      <p class="text">高度：</p>
+                      <p class="text">距离：</p>
-                      <p class="characters">{{ drone.height || 0 }}M</p>
+                      <p class="characters">{{ drone.distanceMeters }}M</p>
                     </div>
                   </div>
                   <div class="content-potions-lon">
@@ -276,7 +276,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["isZoomedIn", "SliderValue"])
+    ...mapGetters(["isZoomedIn", "SliderValue", "lonAndLat"])
   },
   mounted() {
     this.endTime = moment.utc().format("YYYY-MM-DD HH:mm:ss");
@@ -356,13 +356,24 @@ export default {
                   newItem.app_lon !== 0 &&
                   newItem.app_lat !== 0
                 ) {
+                  if (this.lonAndLat && this.lonAndLat.length === 2) {
+                    const [userLon, userLat] = this.lonAndLat;
+                    newItem.distanceMeters = this.calculateDistance(
+                      userLon,
+                      userLat,
+                      newItem.drone_lon,
+                      newItem.drone_lat
+                    ).toFixed(0);
+                  } else {
+                    newItem.distanceMeters = newItem.distanceMeters || 0;
+                  }
                   // 如果已经存在相同BatchId的数据，重置计时器
                   if (newItem.BatchId) {
                     const existingTimer = this.droneTimers.get(newItem.BatchId);
                     if (existingTimer) {
                       clearInterval(existingTimer); // 清除旧计时器
                     }
-
+                    console.log(this.lonAndLat, "this.lonAndLat");
                     // 设置15秒初始时间
                     newItem.currTime = window.mapConfig.currTime;
                     // 创建新计时器
@@ -487,6 +498,20 @@ export default {
     }
   },
   methods: {
+    calculateDistance(lon1, lat1, lon2, lat2) {
+      const R = 6371e3; // 地球半径（米）
+      const a1 = (lat1 * Math.PI) / 180; // 将纬度转换为弧度
+      const a2 = (lat2 * Math.PI) / 180;
+      const ab = ((lat2 - lat1) * Math.PI) / 180;
+      const ac = ((lon2 - lon1) * Math.PI) / 180;
+
+      const a =
+        Math.sin(ab / 2) * Math.sin(ab / 2) +
+        Math.cos(a1) * Math.cos(a2) * Math.sin(ac / 2) * Math.sin(ac / 2);
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+      return R * c; // 距离（米）
+    },
     enableTouchScroll() {
       const ulElement = this.$el.querySelector(".drone-list ul");
       if (ulElement) {
@@ -742,25 +767,25 @@ export default {
       const isVisible = this.droneStates[drone.BatchId];
 
       // 无人机轨迹线
-      let graphicLayerGJ = window.olMap
+      // let graphicLayerGJ = window.olMap
-        .getLayers()
+      //   .getLayers()
-        .getArray()
+      //   .getArray()
-        .find((layer) => layer.get("id") === "guiji");
+      //   .find((layer) => layer.get("id") === "guiji");
-      let graphic = graphicLayerGJ
+      // let graphic = graphicLayerGJ
-        .getSource()
+      //   .getSource()
-        .getFeatureById(drone.BatchId + "_track");
+      //   .getFeatureById(drone.BatchId + "_track");
-      const trackStyle = new Style({
+      // const trackStyle = new Style({
-        stroke: new Stroke({
+      //   stroke: new Stroke({
-          color: this.getRandomColor(),
+      //     color: this.getRandomColor(),
-          width: 0,
+      //     width: 0,
-          zIndex: 1
+      //     zIndex: 1
-        })
+      //   })
-      });
+      // });
-      if (!isVisible) {
+      // if (!isVisible) {
-        graphic.setStyle(trackStyle);
+      //   graphic.setStyle(trackStyle);
-      } else {
+      // } else {
-        graphic.setStyle(null);
+      //   graphic.setStyle(null);
-      }
+      // }
 
       // 飞手无人机连接线
       let graphicLayerFSGJX = window.olMap

src/views/contentData/headerTop/index.vue

@@ -77,6 +77,7 @@ export default {
               "EPSG:3857"
             );
             this.$message.success("定位成功");
+            this.$store.commit("SET_LONANDLAT", newLocation);
             this.updateMapPosition(this.longitude, this.latitude);
             window.olMap.getView().animate({
               center: newLocation,
@@ -214,7 +215,8 @@ export default {
         lon: this.longitude,
         userId: localStorage.getItem("userId")
       };
-
+      let newLocation = [this.longitude, this.latitude];
+      this.$store.commit("SET_LONANDLAT", newLocation);
       HomeSyncLocation(params)
         .then((res) => {
           if (res.code === 0) {

src/views/contentData/index.js

@@ -437,7 +437,7 @@ export function mapUavFiex(options, map) {
 
           graphicLayer.getSource().addFeature(graphic);
           graphicLayerGJ.getSource().addFeature(track);
-          graphicLayerGJ.setStyle(null);
+          // graphicLayerGJ.setStyle(null);
         }
 
         // 更新无人机属性和位置
@@ -451,7 +451,7 @@ export function mapUavFiex(options, map) {
             .getSource()
             .getFeatureById(item.BatchId + "_track");
           track.getGeometry().appendCoordinate(point);
-          graphicLayerGJ.setStyle(null);
+          // graphicLayerGJ.setStyle(null);
         }
 
         // 绑定弹窗

src/views/index.vue

@@ -41,8 +41,8 @@ export default {
     //     device_type_8: 91088,
     //     app_lat: 39.055,
     //     app_lon: 117.303466,
-    //     drone_lat: 39.040924,
+    //     drone_lat: 39.05389348519259,
-    //     drone_lon: 117.337103,
+    //     drone_lon: 117.3121088583338,
     //     height: 0.0,
     //     altitude: 0.0,
     //     home_lat: 0.0,
@@ -55,7 +55,7 @@ export default {
     //     speed_N: 0.0,
     //     speed_U: 0.0,
     //     RSSI: 0.0,
-    //     positionId: "1937905595101351936",
+    //     positionId: "1937905447877087232",
     //     PostionName: "6号",
     //     DeviceId: "1937909591555837952",
     //     DeviceName: "JF0102501007",
@@ -66,9 +66,45 @@ export default {
     //     Id: "1938433406669033472"
     //   }
     // ];
-    // let time = setInterval(() => {
+    // let arr1 = [
+    //   {
+    //     BatchId: "1938433406643867648",
+    //     serial_number: "JF0102501009",
+    //     device_type: "8",
+    //     device_type_8: 91088,
+    //     app_lat: 39.055,
+    //     app_lon: 117.303466,
+    //     drone_lat: 39.06341517352996,
+    //     drone_lon: 117.31456131738705,
+    //     height: 0.0,
+    //     altitude: 0.0,
+    //     home_lat: 0.0,
+    //     home_lon: 0.0,
+    //     distance: 3299.608332218683,
+    //     centerdistance: 198311.46836461234,
+    //     IsWhitelist: false,
+    //     WhiteListId: "0",
+    //     speed_E: 0.0,
+    //     speed_N: 0.0,
+    //     speed_U: 0.0,
+    //     RSSI: 0.0,
+    //     positionId: "1937905447877087232",
+    //     PostionName: "6号",
+    //     DeviceId: "1937909591555837952",
+    //     DeviceName: "JF0102501007",
+    //     freq: 0.0,
+    //     alarmLevel: 0,
+    //     Time: 1744872277,
+    //     CreateTime: "2025-06-27T11:05:13.1524513+08:00",
+    //     Id: "1938433406669033472"
+    //   }
+    // ];
+    // setInterval(() => {
     //   this.signaData = arr;
     // }, 1000);
+    // setInterval(() => {
+    //   this.signaData = arr1;
+    // }, 2000);
     // setTimeout(() => {
     //   clearInterval(time);
     // }, 10000);