src/layout/index.vue

@@ -50,20 +50,20 @@ const onMessage = (res) => {
 };
 
 onMounted(() => {
-  // const isReload = localStorage.getItem("isReload");
+  const isReload = localStorage.getItem("isReload");
-  // if (isReload !== "true") {
+  if (isReload !== "true") {
-  //   ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", {
+    ElMessageBox.alert("由于浏览器安全策略，用户必须点击屏幕才能播放告警声音", "提示", {
-  //     confirmButtonText: "OK",
+      confirmButtonText: "OK",
-  //     callback: () => {
+      callback: () => {
-  //       localStorage.setItem("isReload", "true");
+        localStorage.setItem("isReload", "true");
-  //     },
+      },
-  //   });
+    });
-  // }
+  }
 
-  // if (ws.socket == null) {
+  if (ws.socket == null) {
-  //   ws.connect();
+    ws.connect();
-  // }
+  }
-  // ws.onMessage(onMessage);
+  ws.onMessage(onMessage);
 
   window.addEventListener("beforeunload", handleBeforeUnload);
 });

src/utils/mapCustom.js

@@ -106,34 +106,39 @@ export class MapCustom {
   newIcon(option) {
     let data = {
       size: new AMap.Size(36, 42),
-      image: option.image, // Icon的图像
+      image: '', // Icon的图像
       imageSize: new AMap.Size(36, 42)
     }
-    if (option.size) {
+    if (typeof option == 'string') {
-      data.size = new AMap.Size(option.size[0], option.size[1])
+      data.image = option
-      data.imageSize = new AMap.Size(option.size[0], option.size[1])
+    } else {
+      data = {
+        image: option.image, // Icon的图像
+        size: new AMap.Size(option.size[0], option.size[1]),
+        imageSize: new AMap.Size(option.size[0], option.size[1]),
+      }
     }
     return new AMap.Icon({ ...data })
   }
   // 创建marker
-  marker(option) {
+  marker({ icon, position, offset }) {
     return new AMap.Marker({
+      icon,
+      position,
       map: this.map,
       offset: new AMap.Pixel(-13, -26),
-      ...option
     })
   }
   lngLat(lng, lat) {
     return new AMap.LngLat(lng, lat);
   }
-  infoWindow(option) {
+  infoWindow(option = {
-    return new AMap.InfoWindow({
+    anchor: 'bottom-center',
-      anchor: 'bottom-center',
+    isCustom: true, //使用自定义窗体
-      isCustom: true,
+    content: document.querySelector('.infoBox'),
-      content: document.querySelector('.infoBox'),
+    offset: new AMap.Pixel(-2, -40),
-      offset: new AMap.Pixel(-2, -40),
+  }) {
-      ...option
+    return new AMap.InfoWindow(option)
-    })
 
   }
   //绘制轨迹线条

src/views/incidentDispose/index.vue

@@ -281,7 +281,7 @@ const getData = async () => {
 
     map.clearMap();
     map.setCenter([res.lng, res.lat]);
-    let icon = map.newIcon({ image: location });
+    let icon = map.newIcon(location);
     let marker = map.marker({ icon, position: [res.lng, res.lat] });
     marker.setMap(map.map);
     marker.on("click", () => {

src/views/monitoringCenter/deviceLocationMap.vue

@@ -62,11 +62,11 @@ const getLocateRecord = () => {
       list.forEach((item, index) => {
         let marker: any = "";
         if (index == 0) {
-          marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 });
+          marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat] });
         } else if (index == list.length - 1) {
-          marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
+          marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat] });
         } else {
-          marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 });
+          marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat] });
         }
         marker.setMap(newMap.map);
         marker.on("click", () => {

src/views/synthesizeManage/mapLocation/index.vue

@@ -68,10 +68,8 @@ import { locateRecord } from "@/api";
 import { format } from "@/utils";
 import { TLocateRecord } from "@/api/index.d";
 import { useRoute } from "vue-router";
+import location from "@/assets/img/location.png";
 import InfoWindow from "@/components/InfoWindow.vue";
-import ViaMarker from "@/assets/img/via-marker.png";
-import endMarker from "@/assets/img/end-marker.png";
-import startMarker from "@/assets/img/start-marker.png";
 
 const { query } = useRoute();
 let d = new Date();
@@ -107,28 +105,9 @@ const getLocateRecord = () => {
       newMap.clearMap();
       newMap.setCenter([list[0].lng, list[0].lat]);
       newMap.polyline(list);
-      let startIcon = newMap.newIcon({
+      let icon = newMap.newIcon(location);
-        image: startMarker,
+      list.forEach((item) => {
-        size: [20, 29],
+        let marker = newMap.marker({ icon, position: [item.lng, item.lat] });
-      });
-      let endIcon = newMap.newIcon({
-        image: endMarker,
-        size: [20, 29],
-      });
-      let ViaIcon = newMap.newIcon({
-        image: ViaMarker,
-        size: [20, 29],
-      });
-
-      list.forEach((item, index) => {
-        let marker: any = "";
-        if (index == 0) {
-          marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 });
-        } else if (index == list.length - 1) {
-          marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
-        } else {
-          marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 });
-        }
         marker.setMap(newMap.map);
         marker.on("click", () => {
           deviceInfo.value = item;