如何以与拖动点 mapbox-gl-js 示例相同的方式拖动多边形？

Question

我通过单击按钮将 geojson 多边形添加到地图中。我还在mousedowngeojson 和 x/y 坐标对（geojson 几何体）打印到控制台，通过 API 上的 queryRenderedFeatures 调用访问它。

我现在想让多边形像多边形上的mousedown事件上的点示例（下面的链接）一样可拖动，并且能够在地图上移动它，在整个mousedown事件中更新多边形节点的 x/y 坐标，但保持geojson 大小在整个拖动过程中保持不变。

直接mapbox-gl-js是这样做的方法，还是我应该将预先配置的 geojson 多边形输入到mapbox-gl-draw -在用户的操作上绘制多边形模式？

有什么建议或例子吗？

API 拖动点示例

拖一个点GitHub代码

Answer 1

尝试这个

   var isDragging = false;
var startCoords;

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['polygon-layer'] });
  var polygon = features[0];
  if (!polygon) return;
  
  startCoords = polygon.geometry.coordinates[0];
});

map.on('mousedown', function(e) {
  isDragging = true;
});

map.on('mousemove', function(e) {
  if (!isDragging) return;
  
  var coords = map.unproject(e.point);
  var delta = {
    lng: coords.lng - startCoords[0],
    lat: coords.lat - startCoords[1]
  };
  
  polygon.geometry.coordinates[0] = polygon.geometry.coordinates[0].map(function(coord) {
    return [coord[0] + delta.lng, coord[1] + delta.lat];
  });
  
  map.getSource('polygon-source').setData(polygon);
});

map.on('mouseup', function(e) {
  isDragging = false;
});

多边形被存储为 GeoJSON 要素，多边形图层和源分别命名为“polygon-layer”和“polygon-source”。您将需要调整这些名称以匹配您的设置。