javascript 与MQTT连接(2)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<title>卫星图</title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* 首先，为 <h4> 标签设置字体样式（如果尚未设置） */
h4 {
font-family: Arial, sans-serif; /* 示例字体，可以根据需要更改 */
font-size: 14px; /* 示例字体大小，可以根据需要更改 */
font-weight: normal; /* 可以设置为 bold 如果需要加粗 */
/* 其他可能的样式，如 color, line-height 等 */
}
#delmarker,#sentmarker {
border: none; /* 去除边框 */
background-color: transparent; /* 如果需要，可以设置为透明背景 */
padding: 5px 10px; /* 根据需要添加内边距 */
cursor: pointer; /* 鼠标悬停时显示为手型，表明可点击 */
font-size: 13px; /* 根据需要调整字体大小 */
/* 你可以根据需要添加更多的样式属性，比如颜色、圆角等 */
}
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<h4>设置航点：<button id="delmarker">删除标点</button> <button οnclick="processLngLatArray()">发送数据</button></h4>
<div class="input-item">
<input type="text" readonly="true" id="lnglat">
</div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=432746193f92f7fbb"></script>
<script>
// 声明并初始化标记点数组
var markersArray = [];
var lnglatArray = [];
var polylineArray = []; // 新增数组，用于存储线条
var map = new AMap.Map('container', {
center: [100.038, 28.23],
layers: [new AMap.TileLayer.Satellite()],
zoom: 18
});
// 为地图注册click事件，获取鼠标点击位置的经纬度坐标，并在该位置添加标记点A
map.on('click', function(e) {
// 显示经纬度坐标
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
// 创建标记点A
var marker = new AMap.Marker({
position: e.lnglat, // 使用点击事件的经纬度作为标记位置
map: map,
icon: new AMap.Icon({ // 可选：设置标记图标
size: new AMap.Size(15, 20), // 图标大小
image: 'CR2.png', // 自定义图标URL（请确保路径正确）
imageOffset: new AMap.Pixel(-2, -2) // 图标相对图片左上角的偏移量（可选）
})
});
// 将标记点添加到数组中
markersArray.push(marker);
lnglatArray.push({ lng: e.lnglat.getLng(), lat: e.lnglat.getLat() });
// 如果已存在至少一个标记点，则添加线条
if (markersArray.length > 1) {
var polyline = new AMap.Polyline({
path: [markersArray[markersArray.length - 2].getPosition(), e.lnglat], // 使用最后两个标记点的位置作为线条的路径
strokeColor: "#00FF00", // 红色线条
strokeOpacity: 1,
strokeWeight: 2,
strokeStyle: "solid",
strokeDasharray: [10, 5],
map: map
});
// 将线条添加到数组中
polylineArray.push(polyline);
}
// 记录点击事件
console.log('标记点已创建在点击位置');
// 打印整个lnglatArray数组（包括新添加的经纬度对象）
// console.log('lnglatArray after adding new point:', lnglatArray);
});
// 获取按钮delmarker元素
var deleteMarkersBtn = document.getElementById('delmarker');
// 为按钮添加点击事件监听器
deleteMarkersBtn.addEventListener('click', function() {
// 检查数组中是否有标记点
if (markersArray.length > 0) {
// 获取并移除数组中的最后一个标记点
var lastMarker = markersArray.pop();
var lastLngLat = lnglatArray.pop();
// 移除对应的线条（如果有）
if (polylineArray.length > 0) {
var lastPolyline = polylineArray.pop();
lastPolyline.setMap(null); // 从地图上移除线条
}
// 从地图上移除标记点
lastMarker.setMap(null);
// 记录删除事件（可选）
console.log('上一个标记点和线条已删除');
} else {
// 如果没有标记点可删除，则输出提示信息
console.log('没有可删除的标记点');
}
});
</script>
<script>
let specialLngLatArray = []; // 用于存储按规则分割后的经纬度信息
// 假设这是您在某个事件处理函数中调用的函数，用于处理lnglatArray并填充specialLngLatArray
function processLngLatArray() {
// 如果lnglatArray长度小于3，直接将其作为specialLngLatArray的一个元素
if (lnglatArray.length < 3) {
specialLngLatArray.push([...lnglatArray]); // 使用解构赋值来复制数组，避免直接引用
} else {
// 如果lnglatArray长度大于或等于3，按长度为3分割数组
for (let i = 0; i < lnglatArray.length; i += 3) {
// 使用slice方法提取长度为3的子数组（或剩余的子数组）
specialLngLatArray.push(lnglatArray.slice(i, i + 3));
}
}
// 打印结果以验证
console.log('Special LNG/LAT Array:', specialLngLatArray);
// 调用发送函数
sendSpecialLngLatArrayElements();
}
</script>
<script>
// 发送specialLngLatArray中的每个元素
async function sendSpecialLngLatArrayElements() {
for (let i = 0; i < specialLngLatArray.length; i++) {
let element = specialLngLatArray[i];
let msg = JSON.stringify(element); // 将单个元素转换为JSON字符串
try {
await sendMessage(msg); // 发送单个元素的JSON字符串
} catch (error) {
console.error('发送消息时出错：', error);
}
}
}
</script>
<script>
// 发送消息的函数
async function sendMessage(msg) {
var uid = '20ce9952acebfd'; // 请替换为您的实际用户ID
var topic = 'testabc'; // 请替换为实际的Topic，注意去除前后的空格
var type = '1'; // 请替换为实际的消息类型
var params = new URLSearchParams({
uid: uid,
topic: topic,
type: type,
msg: msg
});
var apiUrl = 'http://apis.bemfa.com/va/sendMessage' + '?' + params.toString();
try {
let response = await fetch(apiUrl, {
method: 'GET'
});
if (response.ok) {
let data = await response.text();
console.log('消息发送成功！响应：', data);
} else {
console.log('消息发送失败，状态码：', response.status);
}
} catch (error) {
console.log('发生错误：', error.message);
}
}
</script>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_46290197/article/details/143807115
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！