0


前端,大疆上云api,使用Websocket、MQTT连接、订阅,进行航线数据传输

  1. <template>
  2. <div id="map-container" ref="mapContainer" style="height: 600px;"></div>
  3. </template>
  4. <script setup>
  5. import { onMounted, ref, onUnmounted } from 'vue';
  6. import AMapLoader from '@amap/amap-jsapi-loader';
  7. import MQTT from 'mqtt';
  8. import mqtt from 'mqtt';
  9. import { ElMessage } from 'element-plus';
  10. // 地图和MQTT配置信息
  11. const amapKey = '高德key';
  12. const mqttTopic = ''; // 订阅的主题
  13. //mqtt配置
  14. let options = {
  15. username: 'admin',
  16. password: 'public',//密码
  17. clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),// 随机生成客户端ID
  18. connectTimeout: 600000,
  19. keepalive: 10,//心跳,单位秒,如果后台开启监听可以快速知道有没有退出
  20. clean: true,
  21. reconnecrPeriod: 3000,//重连周期,1000毫秒,两次之间的时间间隔
  22. resubscribe: true,//如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
  23. }
  24. //ws wss是在h5网页上websoket协议 而wx wxs是针对微信小程序使用 当然如果你用uniapp做app的话 使用的也是wx
  25. const client = MQTT.connect(`ws://你的ip:8083/mqtt`, options);
  26. client.on('connect', (res) => {
  27. ElMessage.success("链接成功")
  28. client.subscribe(mqttTopic, (err) => {
  29. if (!err) {
  30. ElMessage.success("订阅成功")
  31. }
  32. })
  33. }).on('message', (topic, message) => {
  34. console.log(topic, JSON.parse(message))
  35. //接受服务端信息
  36. }).on('reconnect', (topic, message) => {
  37. ElMessage.warning("重连")
  38. }).on('error', () => {
  39. console.log('77877')
  40. //重新连接
  41. client.reconnect()
  42. })
  43. // 地图容器的引用
  44. const mapContainer = ref(null);
  45. onMounted(async () => {
  46. try {
  47. // 加载高德地图API
  48. const AMap = await AMapLoader.load({
  49. key: amapKey,
  50. version: '2.0',
  51. plugins: ['AMap.Polyline'],
  52. });
  53. // 初始化地图
  54. const map = new AMap.Map(mapContainer.value, {
  55. zoom: 10,
  56. center: [116.397428, 39.90923], // 北京市中心点
  57. });
  58. // 地图上的点位,示例为北京的几个点
  59. const points = [
  60. new AMap.LngLat(116.191031, 39.988585),
  61. new AMap.LngLat(116.389275, 39.925818),
  62. new AMap.LngLat(116.287444, 39.810742),
  63. ];
  64. // 绘制航线
  65. const polyline = new AMap.Polyline({
  66. path: points,
  67. strokeColor: "#FF33FF",
  68. strokeWeight: 6,
  69. strokeOpacity: 0.2,
  70. strokeOpacity: 1,
  71. });
  72. map.add(polyline);
  73. // 序列化航线数据
  74. const lineData = JSON.stringify({ points: points.map(p => [p.lng, p.lat]) });
  75. // 发布消息到MQTT主题
  76. client.publish(mqttTopic, lineData, { qos: 1 }, (err) => {
  77. if (err) {
  78. console.error('MQTT消息发布失败:', err);
  79. } else {
  80. console.log('MQTT消息发布成功');
  81. }
  82. });
  83. } catch (error) {
  84. console.error('地图或MQTT初始化失败:', error);
  85. }
  86. });
  87. // MQTT消息接收回调
  88. client.on('message', (topic, message) => {
  89. console.log(`从主题${topic}接收到消息: ${message.toString()}`);
  90. });
  91. // 组件销毁时断开MQTT连接
  92. onUnmounted(() => {
  93. client.end();
  94. });
  95. </script>
  96. <style>
  97. #map-container {
  98. width: 100%;
  99. }
  100. </style>


本文转载自: https://blog.csdn.net/Ian1025/article/details/141071588
版权归原作者 Ian1025 所有, 如有侵权,请联系我们删除。

“前端,大疆上云api,使用Websocket、MQTT连接、订阅,进行航线数据传输”的评论:

还没有评论