Как перетащить многоугольник так же, как в примере перетаскивания точки mapbox-gl-js?

Question

У меня есть полигон geojson, который добавляется на карту одним нажатием кнопки. У меня также есть стиль изменения многоугольника в событии mousedown для geojson и пары координат x/y (геометрия geojson), выводящие на консоль доступ к ней через вызов queryRenderedFeatures API.

Теперь я хочу сделать многоугольник перетаскиваемым, как в примере с точкой (ссылки ниже) для события mousedown на многоугольнике, и иметь возможность перемещать его на карте, обновляя координаты x/y узлов многоугольника на протяжении всего события mousedown, но поддержание размера геойсона в такте на протяжении всего бремени.

Является ли прямой mapbox-gl-js способом сделать это, или я должен подавать предварительно сконфигурированный полигон geojson в mapbox-gl-draw - рисовать режим многоугольника на действия пользователя?

Есть предложения или примеры?

API Drag A Point Пример

Перетащите код GitHub

Answer 1

С помощью mapbox-gl-draw отлично работает для этого. Ниже приведен пример подачи геоджона в элемент многоугольника рисования, который готов к перемещению по вашей карте.

var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true
        }
      });
      map.addControl(draw, 'bottom-right');
      // ADD THE GEOJSON POLYGON AS A DRAW FEATURE
      var featureIds = draw.add(polygonFeature);
      console.log(featureIds);

Answer 2

Попробуй это

         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, а слой полигона и источник называются «полигон-слой» и «полигон-источник» соответственно. Вам нужно будет настроить эти имена, чтобы они соответствовали вашей настройке.