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

Question

我正在尝试使用 Mapbox GL JS 执行一项功能，它将首先检测用户是否在某个位置内，以及他是否显示 HTML 消息以说明他在该位置。

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

标签： geolocationmapbox-gl-jsbounding-box

Answer 1

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

编辑：mapbox-gl-js 实际上在类上提供了一个contains(lngLat)功能： https ://docs.mapbox.com/mapbox-gl-js/api/#lnglatbounds#containsLngLatBounds

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

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