polygon startEdit时能控制只沿x,y方向拖拽方向吗

Open Beats0 opened this issue 3 months ago • 0 comments

最开始在做rectangle编辑的时候，发现rectangle会有显示偏移问题 #1118 ，于是换成了用polygon显示rectangle，但是polygon做出来的rectangle可以沿多个方向拖拽，polygon能控制只沿x，y方向拖拽吗

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>交互 - 编辑多边形</title>
<style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
    .pane{background:#34495e;line-height:28px;color:#fff;z-index:10;position:absolute;top:20px;right:20px}
    .pane a{display:block;color:#fff;text-align:left;padding:0 10px;min-width:28px;min-height:28px;float:left}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>

<body>

<div id="map" class="container"></div>
<div class="pane"><a href="javascript:startEdit();">Start edit</a><a href="javascript:endEdit();">End edit</a></div>

<script>
  var map = new maptalks.Map('map', {
    center: [100.588195, 35.652116],
    zoom: 6.7,
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdomains: ['a','b','c','d'],
      attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
    })
  });
  var layer = new maptalks.VectorLayer('vector')
  layer.addTo(map);

  const points = [
    [
      [100.588195, 35.652116],
      [104.946203, 35.652116],
      [104.946203, 32.29422],
      [100.588195, 32.29422]
    ]
  ]
  for (let i = 0; i < points[0].length; i++) {
    const p = points[0][i]
    var point = new maptalks.Marker(
      p,
      {
        visible : true,
        editable : true,
        cursor : 'pointer',
        draggable : false,
        dragShadow : false,
        drawOnAxis : null,
        symbol : {
          'textFaceName' : 'sans-serif',
          'textName' : `${i+1}`,
          'textFill' : '#34495e',
          'textHorizontalAlignment' : 'right',
          'textSize' : 40
        }
      }
    );
    point.addTo(layer)
  }

  var polygon = new maptalks.Polygon(points, {
    visible : true,
    editable : true,
    cursor : 'pointer',
    draggable : false,
    interactive: false,
    symbol: {
      'lineColor' : '#34495e',
      'lineWidth' : 2,
      'polygonFill' : 'rgb(135,196,240)',
      'polygonOpacity' : 0.6
    }
  });

  const rect = polygonToRectangle(points[0]);
  console.log('rect', rect)
  var rectangle = new maptalks.Rectangle(rect.corner,373381, 373381, {
    visible : true,
    editable : true,
    cursor : 'pointer',
    draggable : false,
    interactive: false,
    symbol: {
      'lineColor' : '#34495e',
      'lineWidth' : 2,
      'polygonFill' : 'rgb(251,76,71)',
      'polygonOpacity' : 0.6
    }
  });

  function polygonToRectangle(polygonCoords) {
    var leftTop = turf.point( polygonCoords[0]);
    var rightTop = turf.point(polygonCoords[1]);
    var rightBottom = turf.point(polygonCoords[2]);
    var leftBottom = turf.point(polygonCoords[3]);
    var options = { units: "meters" };

    var width = turf.distance(leftTop, rightTop, options);
    var height = turf.distance(leftTop, leftBottom, options);

    return {
      corner:polygonCoords[0], // 左上角
      width,
      height
    };
  }

  polygon.addTo(layer);
  rectangle.addTo(layer);
  console.log('rectangle', rectangle)

  startEdit();

  function startEdit() {
    polygon.startEdit();
  }

  function endEdit() {
    polygon.endEdit();
  }

</script>
</body>
</html>

Nov 07 '25 02:11 Beats0