Mapbox GL - 如何检查一个点是否在旋转的边界框内？

Question

我使用Mapbox GL来展示地图，可以旋转和缩放。

我需要添加标记，但为了提高速度，我只想添加当前视图范围内的标记，并在视图更改时重新绘制。 （范围框不是轴对齐的，但可以是旋转矩形！）

我可以通过map.getBounds()获得当前视图的范围框。 这返回NE角和SW角的2个LngLat坐标。

如何检查标记的LngLat坐标是否在此框内？

- Dylan

---

可能是Determine if point is within bounding box的重复问题。 - xmojmr

不是重复的问题，那个答案只适用于轴对齐的边界框。 - Dylan

Answer 1

安装依赖项@turf/boolean-point-in-polygon，然后根据边界框点创建一个多边形。

import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
const bounds = map.getBounds();
const boundsGeometry = polygon([
  [
    [bounds.getNorthWest().lng, bounds.getNorthWest().lat],
    [bounds.getNorthEast().lng, bounds.getNorthEast().lat],
    [bounds.getSouthEast().lng, bounds.getSouthEast().lat],
    [bounds.getSouthWest().lng, bounds.getSouthWest().lat],
    [bounds.getNorthWest().lng, bounds.getNorthWest().lat]
  ]
]);
booleanPointInPolygon(yourPoint, boundsGeometry);

- Clay

Answer 2

也许可以通过边界创建一个多边形，然后使用turf.js中的inside function检查关系。

- Sebastian Schulz

---

你的 inside 链接无法使用。目前为止，似乎 turfjs 没有 inside 函数。 - Chintan Pathak

Answer 3

一旦您将您的盒子转换为一个多边形，请使用booleanPointInPolygon测试您的点：

const inside = turf.booleanPointInPolygon(point, polygon);

重要提示：为了获得最佳性能，请确保设置您的多边形的bbox属性，booleanPointInPolygon内部使用它进行快速排除：

let polygon = turf.polygon(coordinates, properties);
if (polygon) {
    // booleanPointInPolygon quickly eliminates if point is not inside bbox
    polygon.bbox = turf.bbox(polygon);
}

- Ken Lin