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

Answer 3

将您的盒子制成 polygon 后，使用 point 测试您的 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);
}

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

3 个答案: