Mapbox GL JS - 如何检查一个人是否在某个区域内，然后显示一条消息

Question

我正在尝试使用 Mapbox GL JS 做一个功能，它会首先检测用户是否在某个位置，如果他显示 HTML 消息说他在位置。

我相信我必须利用 geolocatecontol 功能来检查用户的位置，然后使用边界框功能来确定用户是否在该位置内。问题是，我不知道该怎么做。任何帮助将不胜感激！

Answer 1

mapbox-gl-js 不会为您提供检查坐标是否位于边界框内的能力。我推荐使用 turf.js，它提供了很多地理辅助函数，例如booleanWithin(geometryA, geometryB)

编辑：mapbox-gl-js 实际上在LngLatBounds class 上提供了一个contains(lngLat) 函数：https://docs.mapbox.com/mapbox-gl-js/api/#lnglatbounds#contains

如果你有一个简单的矩形边界框，你可以自己实现检查：

https://math.stackexchange.com/questions/190111/how-to-check-if-a-point-is-inside-a-rectangle

使用Geolocation.watchPosition()api浏览器的例子：

const southWest = new mapboxgl.LngLat(-2.488133, 53.747698);
const northEast = new mapboxgl.LngLat(-2.488156, 53.748530);

const bounds = new mapboxgl.LngLatBounds(southWest, northEast);

// called every time a new user position is determined
function checkUserPostion(position) {
  const {latitude, longitude} = position.coords;

  const isUserInBbx = bounds.contains([longitude, latitude]);

  if (isUserInBbx) {
    // update HTML
  }
}

navigator.geolocation.watchPosition(checkUserPostion);