티스토리 뷰
728x90
반응형
임의의 두 지점이 있다고 가정해보자.
각각의 두 지점은 고유의 위도/경도 값을 갖게 되는데
이 좌표값을 이용해 두 지점 사이의 거리를 km, m 단위로 변환하여 구해보는 예제를 다뤄보겠다.
거리를 구하는 로직을 간단히 설명하자면,
두 지점의 좌표값을 각각 라디안으로 변환한 후 삼각함수를 이용해 두 지점의 차를 구한다.
두 지점의 좌표값을 라디안으로 변환하기 위해 DEGREES_PER_RADIAN 상수를 먼저 선언해준다.
// 라디안 단위를 도 단위로 변환하는 상수
const DEGREES_PER_RADIAN = 180 / Math.PI;
지구의 반경(6371km) 또한 선언해준다.
// 지구 반경 (단위: km)
const EARTH_RADIUS_KM = 6371;
// 두 지점 사이의 거리를 계산하는 함수
const calculateDistanceInMeters = (
latitude1: number,
longitude1: number,
latitude2: number,
longitude2: number
) => {
// 라디안으로 변환
const lat1Radians = latitude1 / DEGREES_PER_RADIAN;
const lon1Radians = longitude1 / DEGREES_PER_RADIAN;
const lat2Radians = latitude2 / DEGREES_PER_RADIAN;
const lon2Radians = longitude2 / DEGREES_PER_RADIAN;
// haversine 공식 계산
const deltaLatRadians = lat2Radians - lat1Radians;
const deltaLonRadians = lon2Radians - lon1Radians;
const a =
Math.sin(deltaLatRadians / 2) ** 2 +
Math.cos(lat1Radians) * Math.cos(lat2Radians) * Math.sin(deltaLonRadians / 2) ** 2;
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distanceInKm = EARTH_RADIUS_KM * c;
// km를 m로 변환하여 반환
return distanceInKm * 1000;
};
위 함수의 return 문에서 * 1000을 제거해준다면 Km 단위로, 위 코드대로 사용한다면 m 단위로 출력될 것이다.
아래는 내가 현재 프로젝트에서 사용하고 있는 usage이다.
const distanceInMeters = calculateDistanceInMeters(
CENTER_LATITUDE,
CENTER_LONGITUDE,
currentLocation?.latitude,
currentLocation?.longitude
);
CENTER_LATITUDE , CENTER_LONGITUDE는 기준이 되는 지점의 위/경도값이고
currentLocation.latitude, currentLocation.longitude는 사용자의 현재 위치 값이다.
기준점과 사용자 현재 위치 간 거리의 차를 구해 특정 범위 안에 있는 사용자를 구분하기 위함이다.
728x90
반응형
'개발 세상 > JS&TS' 카테고리의 다른 글
[Typescript] some() 함수를 사용해서 Object의 특정 value값을 검색해보자! (0) | 2023.12.29 |
---|---|
[TypeScript] 회원가입 시 ID에 영문&숫자&일부 특수문자만 허용 가능하게 하는 정규식을 적용시켜보자! (0) | 2023.12.05 |
[JS/TS] 올바른 생년월일인지 확인하는 정규식을 알아보자! (YYYYMMDD 또는 YYYY-MM-DD) (0) | 2023.06.13 |
[JavaScript] Text Strings must be rendered within a <Text> component 관련 이슈 해결 (0) | 2022.03.03 |
[JavaScript 문법]ES6 템플릿 리터럴에 대해 알아보자 (0) | 2022.01.18 |
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- useEffect
- Xcode
- useState
- React Hooks
- FlatList
- Android
- ios
- REACT
- Mac
- React Native
- CSS
- Firebase
- 스파르타코딩클럽
- ReactNative
- Ai
- IMAGE
- It
- app
- gradle
- typeScript
- build
- 코린이
- vscode
- ChatGPT
- 앱개발
- JavaScript
- vsC
- TS
- 영종도데이트
- rn
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함