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

时间:2019-01-14 14:43:09

标签: javascript html mapbox-gl-js mapbox-gl-draw

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

下面是一次抽奖的预期结果。 Expected outcome 目前,我可以绘制一个矩形,但是矩形的每个角只有4个点。

1 个答案:

答案 0 :(得分: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;