参考:ros2djs/Tutorials/VisualizingAMap - ROS Wiki
获取ros端机器人地图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Map Example</title>
<script src="../build/eventemitter2.min.js"></script>
<script src="../build/easeljs.min.js"></script>
<script src="../build/roslib.js"></script>
<script src="../build/ros2d.min.js"></script>
<script>
function init() {
var ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// viewer将地图渲染到canvas画布
var viewer = new ROS2D.Viewer({
divID: 'map', // canvas id
width: 600, // canvas的宽度,像素
height: 600 // canvas的高度,像素
});
// 监听给定地图并设定地图场景
var gridClient = new ROS2D.OccupancyGridClient({
ros: ros,
rootObject: viewer.scene,
continuous: true // map实时更新
});
gridClient.on('change', function () {
// 缩放以适应canvas的宽高
viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
// 转换ros坐标与canvas坐标
viewer.shift(gridClient.currentGrid.pose.position.x, gridClient.currentGrid.pose.position.y);
});
}
</script>
</head>
<body onload="init()" style="text-align: center;">
<h3>Simple ROS2D Map Example</h3>
<div id="map"></div>
</body>
</html>
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/d102c81521cfda8c65de71352fc9dd51.png)