Mapbox矩形线从两点的边界

Question

我使用 Mapbox，我的目标是从我的 bounds 创建一个矩形。我还将我的地图置于bounds 的中心。

虽然 Mapbox 可以计算出 fitBounds 的所有四个坐标，但它对线的作用不同。相反，它将线绘制为两点之间的线。

我该如何...

1. ...改为画一个矩形？
2. ...计算所需的其他两个坐标？

部分代码

const bounds = [
  [17.76069212, 59.22761885],
  [18.20001876, 59.44007814],
];

var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
});

map.fitBounds(bounds, {
  padding: 16,
});

map.on("load", () => {
  map.addSource("route", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: bounds,
      },
    },
  });
  map.addLayer({
    id: "route",
    type: "line",
    source: "route",
    layout: {
      "line-join": "round",
      "line-cap": "round",
    },
    paint: {
      "line-color": "#888",
      "line-width": 8,
    },
  });
});

• 我看到了 turf.js，似乎可以使用它，但它是一个大型库，仅用于绘制矩形。
• 如果图书馆很小，我会接受它作为答案。
• 如果解决方案是数学公式，我需要一个代码示例来掌握它。

Answer 1

使用您的一对边界坐标，您始终可以在没有任何库的情况下在 mapbox 中创建一个矩形...只需使用左下/右上的数据创建 4 个角。

Mapbox 需要创建与初始点相同的第五个点。

使用你的，你可以创建一个特征来添加到你的线层，它会画一个矩形......它会是这样的：

{
  "geometry": {
    "coordinates": [
      [
        [
          17.76069212, 
          59.22761885
        ],
        [
          17.76069212,
          59.44007814
        ],
        [
          18.20001876,
          59.44007814
        ],
        [
          18.20001876,
          59.22761885
        ],
        [
          17.76069212, 
          59.22761885
        ]
      ]
    ],
    "type": "Polygon"
  },
  "type": "Feature",
  "properties": {}
}