Mapbox矩形线从两点的边界

Posted 2023-03-23

【中文标题】Mapbox矩形线从两点的边界

【英文标题】：Mapbox rectangle line from bounds from two points

【发布时间】：2021-02-22 05:03:42

【问题描述】：

我使用 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，似乎可以使用它，但它是一个大型库，仅用于绘制矩形。 如果图书馆很小，我会接受它作为答案。 如果解决方案是数学公式，我需要一个代码示例来掌握它。

【参考方案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": 

【讨论】：

天哪！我觉得自己好傻。我从一开始就拥有所需的所有 GPS 坐标。我只是没有看到如何将它们放在一起。谢谢！

朋友不傻，我也遇到过很多次了，确实，mapbox需要的第五个坐标的警告不是很明显