添加mqtt消息获取，通过CDN链接引入，npm依赖包无法下载

index.html

@@ -4,16 +4,14 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
-    <meta
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
     <script src="<%= BASE_URL %>earthsdk/XbsjEarth/XbsjEarth.js"></script>
     <script src="<%= BASE_URL %>earthsdk/XbsjEarthUI/xbsj.js"></script>
     <script src="<%= BASE_URL %>earthsdk/XbsjCesium/Cesium.js"></script>
     <!-- <script type="text/javascript" src="<%= BASE_URL %>military/third/api/getImosSdkJs"></script> -->
-    <link rel="stylesheet" href="<%= BASE_URL %>earthsdk/XbsjCesium/Widgets/widgets.css">
+    <link rel="stylesheet" href="<%= BASE_URL %>earthsdk/XbsjCesium/Widgets/widgets.css" />
     <script src="<%= BASE_URL %>js/d3kit/libs/cesium-d3kit.js"></script>
+    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
     <title><%= title %></title>
     <link rel="icon" href="/zgxlogo.png" />
     <!-- 全局配置 -->

src/App.vue

@@ -11,11 +11,17 @@
   import { AppProvider } from '/@/components/Application';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
-
+  import MqttUnit from '@/utils/mqtt/mqttclient';
   // 解决日期时间国际化问题
   import 'dayjs/locale/zh-cn';
+  import { onMounted } from 'vue';
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
   useTitle();
+
+  onMounted(() => {
+    // 全局注册mqtt
+    new MqttUnit().mqttInit();
+  });
 </script>

src/utils/mqtt/mqttclient.js

@@ -0,0 +1,138 @@
+// import * as mqtt from 'mqtt';
+// import $mitt from "../mitt/mitt";
+import $mitt from '@/utils/earthMap/mitt';
+// export default {
+//   data() {
+//     return {
+//       connection: {
+//         host: '192.168.1.101',
+//         port: 8083,
+//         connectTimeout: 4000, // 超时时间
+//         reconnectPeriod: 4000, // 重连时间间隔
+//         username: 'admin',
+//         password: 'public',
+//       },
+//       client: {
+//         connected: false,
+//       },
+//       // 订阅的频道和事件
+//       topicList: {
+//         "ship/gps/100": "mqttShipShow",
+//         "/v1.0.0/+/up/event": "智能围网",
+//         "/server/cmd/+/zdgl":"设备:[消音/复位/重启]"
+//       }
+//     }
+//   },
+//   created() {
+//     this.createConnection()
+//   },
+//   methods: {
+//     // 创建连接
+//     createConnection() {
+//       const { host, port, endpoint, ...options } = this.connection
+//       const connectUrl = `mqtt://${host}:${port}/mqtt`
+//       try {
+//         this.client = mqtt.connect(connectUrl, options)
+
+//       } catch (error) {
+//         console.log('mqtt.connect error', error)
+//       }
+//       this.client.on('connect', () => {
+//         console.log('Connection succeeded!')
+//         // 不会订阅多个频道，所以遍历对象，循环监听多个频道
+//         for (let key in this.topicList) {
+//           this.client.subscribe(key, (err) => {
+//             if (!err) {
+//               console.log(`订阅'${key}'成功`);
+//             }
+//           });
+//         }
+//       })
+//       this.client.on('error', error => {
+//         console.log('Connection failed', error)
+//       })
+//       /**
+//        * topic: 监听的频道
+//        * message: 返回的数据
+//        */
+//       this.client.on('message', (topic, message) => {
+//         this[this.topicList[topic]](message)
+//       })
+//     },
+//     mqttShipShow(message) {
+//       const row = JSON.parse(message)
+//       // 处理逻辑
+//       fn(row)
+//     }
+//   },
+// }
+console.log(mqtt);
+// const host = import.meta.env.VUE_APP_MQTT_HOST || '127.0.0.1';
+const host = '192.168.1.200';
+const port = import.meta.env.VUE_APP_MQTT_PORT || 8083;
+const options = {
+  //mqtt配置
+  // port: 8083,//连接端口
+  protocolId: 'MQTT',
+  connectTimeout: 4000, //超时时间
+  clientID: 'mqtt_' + Math.random().toString(16).substr(2, 8),
+  username: 'admin',
+  password: 'public',
+};
+// const options = {
+//   clean: true,
+//   connectTimeout: 4000, //超时时间
+//   reconnectPeriod: 1000, //重连时间间隔
+//   clientId: 'emqx_test',
+//   username: 'emqx_test',
+//   password: 'emqx_test',
+// };
+
+// 订阅的频道和事件
+const topics = '/server/radar';
+const topicList = topics.split(',');
+// const topicList = {
+//   "ship/gps/100": "mqttShipShow",
+//   //server=服务 warning=预警 +代表所有级别预警 1,2，3  zdgl=震动光缆
+//   "server/warning/+/zdgl": "系统发布智能围网预警",
+//   "/v1.0.0/+/up/event": "智能围网",
+//   "/server/cmd/+/zdgl":"设备[消音复位重启]"
+// };
+//  $mitt.on("warnInfo", (msg) => {console.log(msg) });
+export default class MqttUnit {
+  connectUrl = `mqtt://${host}:${port}/mqtt`;
+  // connectUrl = `ws://broker.emqx.io:8083/mqtt`;
+
+  client = mqtt.connect(this.connectUrl, options);
+
+  mqttInit() {
+    const connectUrl = `mqtt://${host}:${port}/mqtt`;
+    // const connectUrl = `ws://broker.emqx.io:8083/mqtt`;
+
+    this.client.on('connect', () => {
+      console.log(`MQTT Connection ${connectUrl} succeeded!`);
+      // 不会订阅多个频道，所以遍历对象，循环监听多个频道
+      for (let key of topicList) {
+        this.client.subscribe(key, (err) => {
+          if (!err) {
+            console.log(`订阅'${key}'成功`);
+          }
+        });
+      }
+    });
+    this.client.on('error', (error) => {
+      console.log('Connection failed', error);
+    });
+    /**
+     * topic: 监听的频道
+     * message: 返回的数据
+     */
+    this.client.on('message', (topic, message) => {
+      const utf8decoder = new TextDecoder();
+      const dataString = utf8decoder.decode(message);
+      if (topic.startsWith('/server/')) {
+        $mitt.emit('deviceCmd', dataString);
+      }
+    });
+  }
+}

src/views/earthMap/edit/EarthComp.vue

@@ -106,7 +106,7 @@
   import { drawInit } from '@/utils/earthMap/earthDraw';
   import { keyControlInit } from '@/utils/earthMap/keyControlInit';
   import redFlag from '@/assets/earthMap/redFlag.png';
-  import { addModel, addPin, addViewShedRadar } from '@/utils/earthMap/earthObj';
+  import { addModel, addPin, addViewShedRadar, addShipPrimitive } from '@/utils/earthMap/earthObj';
   import hidePng from '@/assets/earthMap/hide.png';
   import alarmImg from '@/assets/earthMap/alarm.gif';
   import VideoFusionWin from './components/VideoFusionWin.vue';
@@ -114,9 +114,7 @@
   import circleDot2 from '@/assets/earthMap/circleDot2.png';
   import circleDot1 from '@/assets/earthMap/circleDot1.png';
   import circleDot3 from '@/assets/earthMap/circleDot3.png';
-
+  import { nextTick } from 'vue';
-  import {CircleScan}  from '@/utils/earthMap/radarEntity'
-  import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'
 
   class HandleNodeType {
     #sn;
@@ -526,6 +524,17 @@
     monitorPosition: any = [];
     ///////////////////////////////////////////////////////////////////////////
 
+    // 当前船只位置信息
+    shipData: any = {};
+
+    // 在地球上绘制船只信息
+    drawShips() {
+      let shipData = this.shipData;
+      let imageUrl = new URL(`../../../assets/images/ship.png`, import.meta.url).href; // 替换为你的PNG图片路径
+      let shipModel = addShipPrimitive(shipData.longitude, shipData.latitude, 0, imageUrl, [shipData.azimuth, 0, 0], '123456', [1, 1, 1]);
+      console.log('shipModel', shipModel);
+    }
+
     mounted() {
       let that = this;
       //随机数
@@ -629,6 +638,15 @@
             this.clearAlarmModel(eventSerialNum);
           }
         });
+        // 监听mqtt消息
+        $mitt.on('deviceCmd', (message: any) => {
+          // 赋值船只数据
+          this.shipData = JSON.parse(JSON.parse(message).radarTrack);
+          // 绘制
+          nextTick(() => {
+            this.drawShips();
+          });
+        });
       }
     }
     // 随机数