SmileCat.

#map

10 posts

지구에서 거리재기

turf.js의 distance에서는 Haversine formula를 사용하고 있고 이를 이해하기 위해 이것저것 찾아보던 중 지구에서 두 점 사이의 거리 구하기라는 글과 이 글의 원문인 Calculate distance, bearing and more between Latitude/Longitude points을 보았습니다. 이 글에서 Haversine formula를 사용하는 방법 외에도 다양한 두 점 사이의 거리를 구하는 방법을 소개하고 있어서 한번 살펴보고자 합니다. Haversine formula 먼저 살펴볼 방법은 H

Bearing

주로 Line 위에 방향을 표시할 때 많이 사용했고 Along 내부에서 사용하는 Bearing에 대해 살펴보고자 합니다. Greatcircle distance Bearing도 Distance와 유사하게 Haversine formula와 Greatcircle distance와 관련이 있습니다. 다음과 같이 두 점사의 각도를 살펴보면 Greatcircle distance에 의해 다음과 같이 두 점 사이의 각도를 구할 수 있습니다. 이때 두 점에 대해서 $\varphi1$, $\varphi2$는 경도(latitude)를 $\lambda

Distance

개인적으로는 distance를 직접적으로 사용하는 경우는 많지 않았지만, 자주 사용하는 다른 함수 내부에서 사용하는 경우가 많아 먼저 살펴보고자 합니다. Haversine formula distance 함수의 주석을 보면 Haversine formula를 사용했다고 적혀있습니다. Haversine formula는 링크한 위키백과를 보시면 상세하게 설명되어 있습니다. 이 공식이 어떻게 도출되는지 찾아보고 이해해보려고 했지만 아직은 능력 밖의 일인지 여간 쉽지 않아서 주어진 공식으로 함수만 이해해 보려고 합니다. Greatcircle

radiansToLength & lengthToRadians

평소 자주 사용하는 turf.js를 분석해보는 것을 연초 목표로 잡아 여유가 있을 때 마다 진행하고자 합니다. 우선 자주 사용했던 기능 중에 다른 기능들에 사용되는 기능을 먼저 보고자 합니다. 가장 먼저 선택한 함수는 turfhelpers에 포함된 radiansToLength와 lengthToRadians입니다. Factors 언급된 두 기능을 살펴보기 전에 우선 두 요소에서 공통으로 사용하는 요소를 하나 보고자 합니다. 두 함수 모두 지구의 구형(타원체가 아닌) 반경을 사용하는 측정 요소를 단위에 맞춘 값을 사용합니다. 해당

시뮬레이터 구현

생각보다 남은 작업이 크지 않아서 세 번째 글에 이어 바로 네 번째 글을 작성하였습니다. 이번 글에서는 전체적인 차량 생성 및 설정, 삭제를 처리할 Simulator에 대해 작성하고 합니다. 작동 방식 Simulator의 작동 방식은 이전 글에서 보여드렸던 Task와 Vehicle과 크게 다르지 않습니다. 지도 컴포넌트가 생성될 때, 시뮬레이터도 생성하게 되며 초깃값으로 설정한 만큼의 차량을 생성하게 됩니다. 이후 설정한 값의 변경에 따라 차량을 늘리거나 줄이는 작업 혹은 차량의 설정을 변경하는 작업을 진행하게 됩니다. 최종적으로

차량 구현

길다면 길고, 짧다면 짧은 시간 동안에 세 번째 글을 작성하게 되었네요. 아마 다음 글을 끝으로 이번 작업은 마무리 지을 수 있을 것 같다는 생각이 듭니다. 이번 글에서는 시뮬레이터에서 돌아다닐 차량에 대한 구현에 관해 이야기해보고자 합니다. 작동 방식 지난 글에서 차량의 구현에서 사용할 Worker에 대한 설정을 진행해두었기 때문에 차량은 그저 동작을 수행하고 이걸 Main으로 알려주는 방향으로 구상을 하였습니다. 지난 글에서 작성한 Task와 Vehicle에서 Task는 거의 변경이 없었고, Vehicle은 차량이 일정 주기마

Next.js에 Worker 설정

지난 글에 이어 이번에는 Next.js에서 Worker를 설정하는 방법에 대해서 글을 작성하고자 합니다. 이전 글을 작성할 때에는 Simulator를 먼저 작성하고 Worker를 진행할 생각이었지만 개발 편의상 Worker를 먼저 진행하는 쪽이 낫다고 생각하여 순서를 조정하였습니다. withwebworker 우선 Next.js에서 Worker를 같이 빌드하게 하려면 어떻게할까 찾아보던 중에, Examples에서 withwebworker라는 예제를 찾을 수 있었습니다. 예제를 살펴보면 workerplugin라는 webpack plu

준비 작업

Task Manager를 옮기며 라는 글을 작성한 지 2달의 시간이 흘렀습니다. 여느 때처럼 마음 한구석에 담아 두었던 해야한다는 생각이 더는 미루면 안되라는 죄책감과 이를 시도해볼 수 있는 환경이 마련되고 나서야 등 떠밀리 듯 또 하나의 무언가를 해보려고 합니다. 동기 무엇을 하든지 저는 동기가 생기지 않으면 잘 시작하지 않는 편입니다만 대체로 여기저기서 씨앗을 받아 심어두었다가 시간이 지나 새싹이 필 때즘 하나씩 시작하게 됩니다. 1년 전쯤 경로를 따라 차량이 경로를 이동하는 것처럼 시뮬레이션을 해봐야 할 일이 있었습니다.

Map Server 구축해보기

작년에 GIS 공부 관련해서 "Map Server 환경 설정 및 사용"이라는 목표를 잡았었지만 달성하지 못했고 올해도 이어서 목표로 잡아두었습니다. 지도 관련 업무를 하면서 늘 클라이언트에서 타일 서버에서 호출은 하지만 늘 뒤단은 장막에 가려진 것처럼 보이지 않는 영역이었습니다. 그래서 이를 목표로 잡아 한번 DB에서 서버로, 서버에서 클라이언트로의 한 사이클을 직접 만들어보고 싶었습니다. 얼마 전 동료분께서 Vector Tile Server using PostGIS라는 글을 공유해 주셔서 이를 바탕으로 환경을 구성해보고 정리하는