fix：小车打点

src/plugins/websocket.js

@@ -1,3 +1,5 @@
+import modal from "./modal";
+
 // WebSocketService.js
 class WebSocketService {
   constructor() {
@@ -10,22 +12,27 @@ class WebSocketService {
     this.ws = new WebSocket(url);
 
     this.ws.onopen = () => {
-      console.log('WebSocket connected');
+      console.log("WebSocket connected");
-      this.emit('open');
+      this.emit("open");
     };
 
     this.ws.onmessage = (event) => {
-      this.emit('message', JSON.parse(event.data));
+      const message = JSON.parse(event.data);
+      if (message.type === "info") {
+        modal.msgSuccess(message.data);
+        return;
+      }
+      this.emit("message", message);
     };
 
     this.ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
+      console.error("WebSocket error:", error);
-      this.emit('error', error);
+      this.emit("error", error);
     };
 
     this.ws.onclose = () => {
-      console.log('WebSocket closed');
+      console.log("WebSocket closed");
-      this.emit('close');
+      this.emit("close");
       setTimeout(() => this.connect(url), this.reconnectInterval);
     };
   }
@@ -34,20 +41,18 @@ class WebSocketService {
     if (this.ws && this.ws.readyState === WebSocket.OPEN) {
       this.ws.send(JSON.stringify(data));
     } else {
-      console.error('WebSocket is not connected');
+      console.error("WebSocket is not connected");
     }
   }
 
   on(event, callback) {
-    if (!this.eventListeners[event]) {
+    this.eventListeners[event] = [];
-      this.eventListeners[event] = [];
-    }
     this.eventListeners[event].push(callback);
   }
 
   emit(event, data) {
     if (this.eventListeners[event]) {
-      this.eventListeners[event].forEach(callback => callback(data));
+      this.eventListeners[event].forEach((callback) => callback(data));
     }
   }
 

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-29 15:31:24
+ * @LastEditTime: 2024-11-29 17:41:31
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -322,6 +322,7 @@ import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
 import * as geomExports from "ol/geom";
 import Cluster from "ol/source/Cluster";
+import logo from "@/assets/xc.png";
 // 组件
 import ModuleBlock from "./module-block.vue";
 import TodayInspection from "./overview-components/today-inspection.vue";
@@ -499,6 +500,9 @@ export default {
       showImageDialog: false,
       // 查看大图点位图片弹窗红框数据
       screenRects: [],
+
+      // 小车地图点位数据源
+      carMapPointSource: null,
     };
   },
   created() {
@@ -512,16 +516,6 @@ export default {
   },
   mounted() {},
   methods: {
-    /**
-     * @description: 处理websocket消息
-     * @return {*}
-     */
-    handleMessage() {
-      this.$ws.on("message", (data) => {
-        console.log("收到xxxxxxxx消息:", data);
-      });
-    },
-
     /**
      * @description: 获取当前时间
      * @return {*}
@@ -1228,6 +1222,80 @@ export default {
       }
     },
 
+    /**
+     * @description: 处理websocket消息
+     * @return {*}
+     */
+    handleMessage() {
+      this.$ws.on("message", (item) => {
+        if (item.type === "carPosition") {
+          if (!this.carMapPointSource) {
+            this.drawCarMapPoint(item.data);
+          } else {
+            console.log(item.data, "location");
+            // 获取小车图层的features数组
+            const [features] = this.carMapPointSource.getFeatures();
+            // 修改geometry定位
+            features.set("geometry", new Point(item.data.location));
+            features.setStyle([
+              new Style({
+                image: new Icon({
+                  crossOrigin: "anonymous",
+                  src: logo,
+                  // 图标缩放比例
+                  scale: 0.03,
+                  // 将角度转换为弧度,并除以180*π
+                  rotation: (item.data.direction-90) * (Math.PI / 180),
+                }),
+              }),
+            ]);
+          }
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制小车地图点位
+     * @param {object} item
+     * @return {void}
+     */
+    drawCarMapPoint(item) {
+      console.log(item, "小车点位");
+      const features = [];
+      const feature = new Feature({
+        geometry: new Point(item.location),
+        data: item,
+        type: "carPoint",
+      });
+      // 可以给点位设置样式
+      feature.setStyle([
+        new Style({
+          image: new Icon({
+            crossOrigin: "anonymous",
+            src: logo,
+            // 图标缩放比例
+            scale: 0.03,
+            // 将角度转换为弧度,并除以180*π
+            rotation: item.direction * (Math.PI / 180),
+          }),
+        }),
+      ]);
+      features.push(feature);
+      this.carMapPointSource = new VectorSource({
+        features,
+      });
+      const carMapPointLayer = new VectorLayer({
+        source: this.carMapPointSource,
+        properties: {
+          type: "carPoint",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.roadMap.instance.get("map");
+        map.addLayer(carMapPointLayer);
+      });
+    },
+
     /**
      * @description: 跳转系统首页
      * @return {void}
@@ -1291,7 +1359,8 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timeFlag);
-    this.$ws.close();
+    const data = { type: "carLocation", status: false };
+    this.$ws.send(data);
   },
 };
 </script>