跳转到高德app增加设备点位

public/index.html

@@ -21,6 +21,7 @@
   <script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
   <script type="text/javascript" src="/dep/localforage.min.js"></script> -->
 
+  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ca09155e1bad6661625a45fedb6ad595"></script>
 
   <!-- 线上Mars3d -->
   <!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />

src/views/contentData/LeftSidebar/index.vue

@@ -426,10 +426,31 @@ export default {
   },
   methods: {
     closeNavigation(drone) {
-      const naviUrl = `https://uri.amap.com/navigation?to=${
+      console.log(drone.app_lat, drone.app_lon, "导航");
-        drone.app_lon + "," + drone.app_lat
+      // 确保 drone.app_lon 和 drone.app_lat 存在
-      },飞手位置&callnative=1`;
+      if (!drone || !drone.app_lon || !drone.app_lat) {
-      window.open(naviUrl, "_blank"); // '_blank' 表示在新标签页中打开
+        this.$message.error("无人机的经纬度信息无效");
+        return;
+      }
+
+      window.location.href =
+        "amapuri://route/plan/?dlat=" +
+        drone.app_lat +
+        "&dlon=" +
+        drone.app_lon +
+        "&dname=飞手位置&dev=0&t=0";
+
+      // 可选：提供后备方案（如果 App 未安装，跳转到网页版）
+      setTimeout(() => {
+        const isAppOpened = document.hidden || document.webkitHidden;
+        if (!isAppOpened) {
+          this.$message.warning("未安装高德地图 App，将打开网页版导航");
+          window.open(
+            `https://uri.amap.com/navigation?to=${drone.app_lon},${drone.app_lat},飞手位置&callnative=1`,
+            "_blank"
+          );
+        }
+      }, 1000);
     },
     noNavigation(drone) {
       this.$set(this.navigationStates, drone.BatchId, false);
@@ -701,10 +722,15 @@ export default {
 .left-sidebar.contracted {
   transform: translateX(-90%);
 }
+#uavAudio {
+  position: absolute;
+  bottom: -100%;
+}
 .audio-prompt {
   position: fixed;
   top: 0%;
   left: 50%;
+  bottom: -100%;
   width: 20%;
   height: 10%;
   background: rgba(0, 0, 0, 0.5);

src/views/contentData/headerTop/index.vue

@@ -24,9 +24,13 @@
 <script>
 import { mapGetters } from "vuex";
 import { HomeSyncLocation } from "@/api/home";
-import _ from "lodash";
+import Geolocation from "ol/Geolocation";
-import { fromLonLat } from "ol/proj";
+import { fromLonLat, transform } from "ol/proj";
-
+import { Vector as VectorLayer } from "ol/layer";
+import VectorSource from "ol/source/Vector";
+import Point from "ol/geom/Point";
+import { Style, Icon, Stroke } from "ol/style";
+import Feature from "ol/Feature";
 export default {
   name: "header-top",
   props: {
@@ -45,10 +49,12 @@ export default {
       latitude: "",
       longitude: "",
       lastUpdated: "",
-      watchId: null,
       timer: null,
+      locationTimer: null,
+      geolocation: null,
       showPermissionPrompt: false,
-      retryCount: 0
+      retryCount: 0,
+      positionLayer: null
     };
   },
   computed: {
@@ -58,24 +64,29 @@ export default {
     console.log("组件挂载，启动定位");
     this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
     this.updateTime();
-    this.startTracking();
+
     this.timer = setInterval(() => {
       this.updateTime();
     }, 1000);
-    this.$on("retry-tracking", this.startTracking);
+    this.startTracking();
   },
   watch: {
     positionPoint: {
       handler(newVal) {
-        if (newVal && this.latitude && this.longitude) {
+        // this.$message.success(this.latitude + ", " + this.longitude);
-          const newLocation = fromLonLat([this.longitude, this.latitude]);
+        console.log("位置更新", newVal, this.latitude, this.longitude);
-          this.$message.success(this.longitude + "," + this.latitude);
+        if (newVal && this.latitude && this.longitude && window.olMap) {
+          const newLocation = fromLonLat(
+            [this.longitude, this.latitude],
+            "EPSG:3857"
+          );
+          this.$message.success("定位成功");
+          this.updateMapPosition(this.longitude, this.latitude);
           const zoomLevel = 13;
           window.olMap.getView().animate({
             center: newLocation,
             zoom: zoomLevel
           });
-          this.startTracking();
         }
         this.$store.commit("SET_POSITIONPOINT", false);
       },
@@ -83,69 +94,62 @@ export default {
     }
   },
   methods: {
+    updateMapPosition(lng, lat) {
+      let center = fromLonLat([lng, lat]);
+      var iconFeature = new Feature({
+        geometry: new Point(center),
+        name: "当前位置",
+        population: 4000,
+        rainfall: 500
+      });
+      var iconStyle = new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          scale: 0.4,
+          anchorXUnits: "fraction",
+          anchorYUnits: "pixels",
+          src: require("@/assets/img/icon_dev.png")
+        })
+      });
+      iconFeature.setStyle(iconStyle);
+      var vectorSource = new VectorSource({
+        features: [iconFeature]
+      });
+      this.positionLayer = new VectorLayer({
+        source: vectorSource
+      });
+
+      window.olMap.addLayer(this.positionLayer);
+    },
     updateTime() {
       const now = new Date();
       this.currentTime = now.toLocaleTimeString();
       this.currentDate = now.toLocaleDateString();
     },
     startTracking() {
-      console.log("启动定位");
+      if (!window.olMap) {
-      if (!navigator.geolocation) {
+        console.error("OpenLayers 地图未传入，延迟重试");
-        this.$message.error("您的浏览器不支持地理位置功能");
+        setTimeout(() => this.startTracking(), 1000);
-        this.leftText = "不支持定位";
-        this.rightText = "定位异常";
         return;
       }
-      this.watchId = navigator.geolocation.watchPosition(
+
-        (position) => this.handleSuccess(position),
+      // 清除旧的 locationTimer
-        (error) => this.handleError(error),
+      if (this.locationTimer) {
-        {
+        clearInterval(this.locationTimer);
+      }
+
+      // 初始化 Geolocation
+      this.geolocation = new Geolocation({
+        trackingOptions: {
           enableHighAccuracy: true,
           timeout: 30000,
           maximumAge: 10000
-        }
-      );
         },
-    syncLocation: _.debounce(function (latitude, longitude) {
+        projection: window.olMap.getView().getProjection()
-      console.log("触发上报:", {
-        latitude,
-        longitude,
-        time: new Date().toLocaleString()
       });
-      let params = {
+
-        lat: latitude,
+      // 监听定位错误
-        lon: longitude,
+      this.geolocation.on("error", (error) => {
-        userId: localStorage.getItem("userId")
-      };
-      HomeSyncLocation(params)
-        .then((res) => {
-          if (res.code === 0) {
-            this.leftText = "平台已连接";
-            this.rightText = "定位正常";
-            if (!latitude && res.data.fallbackLocation) {
-              this.handleSuccess({
-                coords: { latitude: this.latitude, longitude: this.longitude }
-              });
-            }
-          } else {
-            this.leftText = "平台连接失败";
-            this.rightText = "定位异常";
-          }
-        })
-        .catch((err) => {
-          this.leftText = "平台连接失败";
-          this.rightText = "定位异常";
-        });
-    }, 1000),
-    handleSuccess(position) {
-      this.latitude = position.coords.latitude;
-      this.longitude = position.coords.longitude;
-      this.lastUpdated = new Date().toLocaleString();
-      this.showPermissionPrompt = false;
-      this.retryCount = 0;
-      this.syncLocation(this.latitude, this.longitude);
-    },
-    handleError(error) {
         let message = "";
         this.retryCount = this.retryCount || 0;
         switch (error.code) {
@@ -177,6 +181,54 @@ export default {
         }
         this.leftText = message;
         this.rightText = "定位异常";
+      });
+
+      // 开启定位
+      this.geolocation.setTracking(true);
+
+      // 每 2 秒传递一次经纬度
+      this.locationTimer = setInterval(() => {
+        const coordinates = this.geolocation.getPosition();
+        if (coordinates) {
+          this.handleSuccess(coordinates);
+        }
+      }, 2000);
+    },
+    handleSuccess(coordinates) {
+      // 转换为 WGS84 坐标
+      const wgs84 = transform(coordinates, "EPSG:3857", "EPSG:4326");
+      this.longitude = wgs84[0];
+      this.latitude = wgs84[1];
+      this.lastUpdated = new Date().toLocaleString(); //EPSG:3857 转 EPSG:4326
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+
+      // 传递经纬度到 API
+      let params = {
+        lat: this.latitude,
+        lon: this.longitude,
+        userId: localStorage.getItem("userId")
+      };
+      this.updateMapPosition(this.longitude, this.latitude);
+      // console.log("触发上报:", {
+      //   latitude: this.latitude,
+      //   longitude: this.longitude,
+      //   time: this.lastUpdated
+      // });
+      HomeSyncLocation(params)
+        .then((res) => {
+          if (res.code === 0) {
+            this.leftText = "平台已连接";
+            this.rightText = "定位正常";
+          } else {
+            this.leftText = "平台连接失败";
+            this.rightText = "定位异常";
+          }
+        })
+        .catch((err) => {
+          this.leftText = "平台连接失败";
+          this.rightText = "定位异常";
+        });
     },
     retryTracking() {
       this.showPermissionPrompt = false;
@@ -185,12 +237,15 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.watchId) {
+    if (this.geolocation) {
-      navigator.geolocation.clearWatch(this.watchId);
+      this.geolocation.setTracking(false);
     }
     if (this.timer) {
       clearInterval(this.timer);
     }
+    if (this.locationTimer) {
+      clearInterval(this.locationTimer);
+    }
   }
 };
 </script>

src/views/index.vue

@@ -80,7 +80,7 @@ export default {
             ? localhostPath
             : process.env.VUE_APP_API_URL;
         connection = new signalR.HubConnectionBuilder()
-          .withUrl("ws://" + "114.66.57.139:5001" + "/websocket", {
+          .withUrl(uploadUrl + "/websocket", {
             skipNegotiation: true,
             transport: signalR.HttpTransportType.WebSockets
           })

src/views/mapControl/index.vue

@@ -448,20 +448,21 @@ export default {
     right: 40px;
     z-index: 1000;
     color: #fff;
-    width: 29px;
+    width: 50px;
-    height: 174px;
+    height: 200px;
     background-color: rgba(209, 242, 255, 0.9);
-    padding: 19px 8px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     .refresh {
-      width: 32px;
+      width: 100%;
-      height: 32px;
+      height: 30%;
+      line-height: 60px;
       img {
         width: 32px;
         height: 32px;
+        margin-top: 30%;
       }
     }
   }

vue.config.js

@@ -18,7 +18,7 @@ module.exports = defineConfig({
   productionSourceMap: false,
   transpileDependencies: true,
   devServer: {
-    host: "192.168.1.9",
+    host: "192.168.79.70",
     port: 9997,
     open: true,
     proxy: {}