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

Question

我使用Mapbox GL来显示一个可以旋转和缩放的地图。

我需要添加标记，但是对于速度我只想添加当前视图边界框内的标记，并在视图更改时重绘。 （边界框不是轴对齐的，但可以是旋转的矩形！）

我可以使用map.getBounds()获取当前视图的边界框。这将返回NE角和SW角的2个LngLat坐标。

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

Answer 1

也许从边界做一个多边形并通过turf.js和inside function检查关系。

Answer 2

安装依赖项@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);