ROS2D在Web端显示地图及定位

Echo7711

已于 2024-01-17 14:25:43 修改

阅读量1.8k

点赞数 4

分类专栏： Ros Web 文章标签：前端 javascript 开发语言

于 2023-02-09 09:58:09 首次发布

本文链接：https://blog.csdn.net/VaeEcho/article/details/128946797

版权

Ros Web 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

参考：How to display the robot location on top of the Viewer? · Issue #39 · RobotWebTools/ros2djs (github.com)

2023.9.28 机器人标志的角度，需要四元素转换为欧拉角计算；

注：1.js需要采用static方式引入，否则存在this指向问题，暂时未有其他解决方法；


<!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 ROS2D Map Example</title>
  <script src="http://static.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
  <script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
  <script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
  <script src="http://static.robotwebtools.org/ros2djs/current/ros2d.js"></script>
  <script type="text/javascript"
  src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
</head>

<body onload="init()" style="text-align: center;">
  <h3>Simple ROS2D Map Example</h3>
  <div id="map"></div>
  <script>
    function init() {
      var ros = new ROSLIB.Ros({
        url: 'ws://localhost:9090'
      });

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

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

      gridClient.on('change', function () {
        viewer.scaleToDimensions(gridClient.currentGrid.width, gridClient.currentGrid.height);
        viewer.shift(gridClient.currentGrid.pose.position.x, gridClient.currentGrid.pose.position.y);
      });

      var robotMarker = new ROS2D.NavigationArrow({
        size: 0.5,
        strokeSize: 0.05,
        pulse: true,
        fillColor: createjs.Graphics.getRGB(255, 0, 0, 0.65)
      });

      var poseTopic = new ROSLIB.Topic({
        ros: ros,
        name: '/pose',
        messageType: 'geometry_msgs/PoseStamped'
      });
      poseTopic.subscribe(function (message) {
        robotMarker.x = message.pose.position.x;
        robotMarker.y = -message.pose.position.y;
        // 四元素转换欧拉角
        robotMarker.rotation = new THREE.Euler().setFromQuaternion(new THREE.Quaternion(
          message.pose.orientation.x,
          messge.pose.orientation.y,
          message.pose.orientation.z,
          message.pose.orientation.w,
        )).z * (-180) / Math.PI
      });
      gridClient.rootObject.addChild(robotMarker);
    }
  </script>
</body>

</html>

结果：红色三角表示定位点