javascript - Mapbox GL - 如何检查点是否位于旋转边界框内？

Question

我使用 Mapbox GL 显示 map ，可以旋转和缩放。

我需要添加标记，但为了速度，我只想添加当前 View 边界框中的标记，并在 View 发生变化时重绘。(边界框不是轴对齐的，但可以是旋转的矩形!)

我可以使用map.getBounds()获取当前 View 的边界框。这将返回 NE Angular 和西南 Angular 的 2 个 LngLat 坐标。

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

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);