<template>
<div id="map-container" ref="mapContainer" style="height: 600px;"></div>
</template>
<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import MQTT from 'mqtt';
import mqtt from 'mqtt';
import { ElMessage } from 'element-plus';
// 地图和MQTT配置信息
const amapKey = '高德key';
const mqttTopic = ''; // 订阅的主题
//mqtt配置
let options = {
username: 'admin',
password: 'public',//密码
clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),// 随机生成客户端ID
connectTimeout: 600000,
keepalive: 10,//心跳,单位秒,如果后台开启监听可以快速知道有没有退出
clean: true,
reconnecrPeriod: 3000,//重连周期,1000毫秒,两次之间的时间间隔
resubscribe: true,//如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
}
//ws wss是在h5网页上websoket协议 而wx w
前端,大疆上云api,使用Websocket、MQTT连接、订阅,进行航线数据传输
于 2024-08-09 21:39:15 首次发布