参考：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>

结果：