Mapbox GL JS - Как проверить, находится ли человек внутри определенной области, а затем отобразить сообщение, если он

Question

Я пытаюсь сделать функцию с Mapbox GL JS, где он сначала обнаружит, находится ли пользователь внутри определенного местоположения, и отображает ли он сообщение HTML, чтобы сказать, что он находится в этом месте.

Полагаю, мне нужно будет использовать функцию geolocatecontol, чтобы проверить, где находится пользователь, а затем функцию ограничивающего прямоугольника, чтобы определить, находится ли пользователь в этом месте или нет. Проблема в том, что я понятия не имею, как бы я это сделал. Любая помощь будет принята с благодарностью!

Answer 1

mapbox-gl- js не даст вам возможности проверить, находится ли координата внутри ограничительной рамки. Я бы порекомендовал использовать turf. js, он предоставляет множество гео-вспомогательных функций, например, booleanWithin(geometryA, geometryB)

EDIT : mapbox-gl- js фактически обеспечивает функция contains(lngLat) в классе LngLatBounds: https://docs.mapbox.com/mapbox-gl-js/api/#lnglatbounds # содержит

Если у вас есть простой прямоугольник angular, вы можете выполнить проверку самостоятельно:

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