来自两点边界的 Mapbox 矩形线

Question

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

中心

虽然 Mapbox 可以为 fitBounds 算出我所有的四个坐标，但它不会为直线做同样的事情。相反，它将线绘制为两点之间的线。

我怎样才能...

...改为绘制一个矩形？
...计算需要的其他两个坐标？

部分代码

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 中创建一个矩形，而无需任何库...这只是使用 bottom-left/top-right 的数据创建 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": {}
}

来自两点边界的 Mapbox 矩形线

Mapbox rectangle line from bounds from two points

gps

rectangles

geo

coordinates

mapbox

部分代码