ROS2D缩放、拖动平移ROS地图

Echo7711

已于 2023-11-10 09:54:51 修改

阅读量292

点赞数

分类专栏： Ros Web 文章标签： web 前端

于 2023-09-28 10:39:59 首次发布

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

版权

Ros Web 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了如何在HTML页面中使用ZoomView和PanView组件对基于ROS的地图进行缩放和平移操作，通过JavaScript实现地图视图的动态调整功能。

摘要由CSDN通过智能技术生成

使用ZoomView、PanView对地图进行缩放平移操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ROS地图</title>
  <script type="text/javascript" src="./js/ros/eventemitter2.min.js"></script>
  <script type="text/javascript" src="./js/ros/roslib.js"></script>
  <script type="text/javascript" src="./js/ros/easeljs.min.js"></script>
  <script type="text/javascript" src="./js/ros/ros2d.js"></script>
</head>

<body>
  <div class="zoom">
    <button onclick="zoomIn()">+ 放大</button>
    <button onclick="zoomOut()">- 缩小</button>
    <button onclick="recovery()">复原</button>
  </div><br>
  <div id="map"></div>

  <script>
    var ros = new ROSLIB.Ros({
      url: 'ws://192.168.66.20:9090'
    });

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

    var zoomView = new ROS2D.ZoomView({
      rootObject: viewer.scene,
      minScale: 0.01
    });

    var panView = new ROS2D.PanView({
      rootObject: viewer.scene
    });

    var gridClient = new ROS2D.OccupancyGridClient({
      ros: ros,
      rootObject: viewer.scene,
      continuous: true,
      // topic: '/move_base_node/global_costmap/costmap' // 代价地图 topic； 默认值：'/map'
    });

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

    // zoom
    var zoomSize = 1

    function zoomIn() {
      zoomSize += 0.1
      zoomView.zoom(zoomSize)
    };

    function zoomOut() {
      zoomSize -= 0.1
      zoomView.zoom(zoomSize)
    };

    function recovery() {
      zoomSize = 1
      zoomView.zoom(zoomSize)
    };

    // pan
    function dragMap() {
      var panKey = false
      viewer.scene.addEventListener('stagemousedown', function (event) {
        panKey = true
        panView.startPan(event.stageX, event.stageY);
      });
      viewer.scene.addEventListener('stagemousemove', function (event) {
        if (panKey === true) {
          panView.pan(event.stageX, event.stageY);
        };
      });
      viewer.scene.addEventListener('stagemouseup', function (event) {
        if (panKey === true) {
          panKey = false;
        };
      });
    };
  </script>
</body>

</html>