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

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

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

以下是一键抽奖的预期结果。 Expected outcome 目前我可以画一个矩形,但只有 4 个点,矩形的每个 Angular 。

最佳答案

您应该只获取输出,然后以编程方式添加中点,而不是尝试搞乱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;

关于javascript - 如何使用 mapbox-gl-Draw 创建 8 个点的矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54183631/

相关文章:

javascript - 我的下拉菜单无法正常工作

javascript - 如何在 JavaScript 中 stub 库函数

javascript - 无法访问对象数据成员,尽管它在 console.log 中显示存在。尝试访问返回未定义

html - 如何将按钮与 ionic 中的图标对齐

javascript - 有没有一种方法可以计算从一点到另一点的方位 Angular ?

javascript - MAPBOX - 如何在数据驱动样式中使用 GeoJSON 的最小和最大值特征

javascript - js调整图片大小

javascript - 使用 localstorage 为同一域下的另一个页面存储用户的电子邮件地址是一种好习惯吗?

html - 即使行高设置为 1,文本间距很大

javascript - 如何限制我的 map Mapbox 的缩放级别