javascript - 如何使用 mapbox-gl-Draw 创建 8 个点的矩形？

Question

我对使用 Mapbox-gl-Draw 有一个独特的问题。Mapbox Draw 允许您轻松创建多点多边形，但是我需要它只使用 8 个点，因为我在其他地方使用的算法接受 8 个 lnglat 元素。我想知道是否有可能当单击绘图按钮时，它会在屏幕上显示一个由 8 个点组成的矩形，并且能够拖动每个点？

以下是一键绘制的预期结果。 目前我可以绘制一个矩形，但矩形的每个角只有 4 个点。

标签： javascripthtmlmapbox-gl-jsmapbox-gl-draw

Answer 1

而不是试图弄乱 mapbox-gl-draw，您应该只获取输出，然后以编程方式添加中点。您可以为此目的使用turf 的功能。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;