基于 ros2djs 的地图可视化

最新推荐文章于 2024-04-02 19:38:13 发布

Ciansong

最新推荐文章于 2024-04-02 19:38:13 发布

阅读量3.4k

点赞数 4

分类专栏： ROS 文章标签：可视化自动驾驶

原文链接：https://wiki.ros.org/ros2djs/Tutorials/VisualizingAMap

版权

ROS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基于 ros2djs 的地图可视化

原文

https://wiki.ros.org/ros2djs/Tutorials/VisualizingAMap

译文

描述： 这篇教程向您展示了如何使用 ros2djs 可视化一幅地图

关键词： ros2djs, web interface, javascript, Robot Web Tools

教程等级： 初学者

1. 互动式标记例子

在这个教程里，我们展示了如何在浏览器中展示一幅地图。首先，创建一个新的 HTML 文件，并且复制以下的代码例子到文件中。

1.1 HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script type="text/javascript" src="http://static.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/ros2djs/current/ros2d.min.js"></script>

<script type="text/javascript" type="text/javascript">
  /**
   * Setup all visualization elements when the page is loaded.
   */
  function init() {
    // Connect to ROS.
    var ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

    // Create the main viewer.
    var viewer = new ROS2D.Viewer({
      divID : 'map',
      width : 600,
      height : 500
    });

    // Setup the map client.
    var gridClient = new ROS2D.OccupancyGridClient({
      ros : ros,
      rootObject : viewer.scene
    });
    // Scale the canvas to fit to the map
    gridClient.on('change', function(){
      viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
    });
  }
</script>
</head>

<body onload="init()">
  <h1>Simple Map Example</h1>
  <div id="map"></div>
</body>
</html>

1.2 代码解释

现在我们有了一个例子，看看每个部分。

<script type="text/javascript" src="http://static.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/ros2djs/current/ros2d.min.js"></script>

我们首先需要导入所有需要的 JavaScript 文件。注意 Collada 加载器添加的内容。这里，我们使用 Robot Web Tools 的 CDN 。

    var ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

接着，我们需要创建一个 ROS 节点来与 rosbridge v2.0 服务器通信。在这个例子中，这个脚步将连接本地主机的默认端口9090。

    var viewer = new ROS2D.Viewer({
      divID : 'map',
      width : 600,
      height : 500
    });

我们接下来需要创建一个 2D 观察器。我们提供了这个观察器的尺寸以及放置观察器的 HTML div 。

    var gridClient = new ROS2D.OccupancyGridClient({
      ros : ros,
      rootObject : viewer.scene
    });

这段代码创建实际的 OccupancyGridClient 对象。这里我们提供 Ros 节点对象和观察器要渲染的场景。默认的，地图将从 /map 话题加载。

    gridClient.on('change', function(){
      viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
    });

默认地，观察器用一个像素表示一米。使用ros2djs中的各种功能，可以轻松地在整个应用程序中扩展它。这里我们使用 scaleToDimensions 函数来缩放场景以适应给定的尺寸。这将产生用地图填充画布的效果（例如放大）。

<body onload="init()">

当这个页被载入时要记住调用 init() 函数，这很重要。这会调用以上讨论的 JavaScript 代码。

<div id="map"></div>

在 HTML 内部，我们为观察器创建一个带匹配的ID 的 div 。互动式标记将被显示在这里。

1.3 运行这个例子

到这里，我们已经准备好运行这个例子了。我们需要安装 map_server、rail_maps 和 rosbridge_server 。请参阅各自的Wiki页面以获取安装说明，或者只是从Ubuntu存储库中安装其最新版本。

只需使用以下命令启动必要的节点（请注意，地图文件的位置可能有所不同）：

$ roscore
$ rosrun map_server map_server /path/to/your/rail_maps/maps/ilab.pgm 0.05
$ roslaunch rosbridge_server rosbridge_websocket.launch

最后，您现在可以在网络浏览器中打开HTML页面了。结果应该是一个类似于以下内容的页面：
在这里插入图片描述

补充说明

安装 map_server

$ sudo apt install ros-melodic-map-server

下载 rail_maps

$ git clone https://github.com/GT-RAIL/rail_maps.git

Ciansong

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
8
评论
基于 ros2djs 的地图可视化

目录基于 ros2djs 的地图可视化原文译文1. 互动式标记例子1.1 HTML 代码1.2 代码解释1.3 运行这个例子补充说明安装 map_server下载 rail_maps基于 ros2djs 的地图可视化原文https://wiki.ros.org/ros2djs/Tutorials/VisualizingAMap译文描述：这篇教程向您展示了如何使用 ros2djs 可视化一幅地图关键词： ros2djs, web interface, javascript, Robot Web
复制链接

扫一扫