ROS2D缩放、拖动平移ROS地图_ros ros2djs

作者：花生_TL007 | 2024-02-18 12:03:05

踩

ros ros2djs

使用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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/107769