web网站显示机器人实时导航地图
web网站显示ros实时地图。
1.可以用2d和3d渲染
3d

2d

示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4/lib/eventemitter2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>
<script src="../build/ros3d.js"></script>
<script>
/**
* Setup all visualization elements when the page is loaded.
*/
function init() {
// Connect to ROS.
var ros = new ROSLIB.Ros({
url : 'ws://192.168.1.102:9091'
});
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID : 'map1',
width : 800,
height : 600,
antialias : true
});
// Setup the marker client.
var gridClient = new ROS3D.OccupancyGridClient({
ros : ros,
rootObject : viewer.scene,
topic : '/projected_map', // 修改这里
continuous: true
});
}
</script>
</head>
<body onload="init()">
<h1>Continuous Map Example</h1>
<p>
Use any method to publish continuous updates to topic /map and use this page to visualize updates. Follow these commands:
</p>
<ol>
<li><tt>roscore</tt></li>
<li><tt>(method of choice to publish to /map)</tt></li>
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
</ol>
<div id="map1"></div>
</body>
</html>
此代码不完整:完整的需要去robotwebtools上下载2d、3d功能包。主要提供一种思路:默认订阅map话题,如果机器人不是map话题发布地图,得加上topic参数。
实现思路:
1.启动机器人地图话题
2.启动机器人端websocket
3.在web端口修改代码、话题,实现地图实时订阅
如果需要webros技术整合支持,请加qq:2455232431
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐



所有评论(0)