Как вы можете использовать mapbox-gl-Draw для создания прямоугольника из 8 точек?

Question

У меня есть уникальная проблема с использованием Mapbox-gl-Draw. Mapbox Draw позволяет легко создавать многоточечный многоугольник, однако мне нужно, чтобы он использовал только 8 точек в качестве алгоритма, который я использую в другом месте, и принимает 8 элементов lnglat. Мне интересно, возможно ли, чтобы при нажатии кнопки рисования на экране отображался прямоугольник из 8 точек с возможностью перетаскивания каждой из точек?

Ниже приведен ожидаемый результат одним щелчком мыши. В настоящее время я могу нарисовать прямоугольник, но только с 4 точками, каждый угол прямоугольника.

Answer 1

Вместо того, чтобы пытаться связываться с mapbox-gl-draw, вы должны просто взять вывод и затем программно добавить средние точки. Для этой цели вы можете использовать функцию turf's midpoint. Что-то вроде:

const coords = rectangle.geometry.coordinates[0];
const newcoords = [];
coords.forEach((point, i) => {
   newcoords.push(point);
   if (i < coords.length - 1) {
       newcoords.push(midpoint(point, coords[i+1]).geometry.coords);
   }
});
rectangle.geometry.coordinates = newcoords;