pile·
프론트엔드·theswing더스윙·

R-tree를 사용한 가까운 마커 찾기 기능 구현과 개선기

문제지도 위 마커 드래그 이벤트(60fps)마다 수백~수천 개 마커 전체와 거리 계산 → O(n) 반복으로 CPU 자원 급격히 소모
접근RBush(R-tree JS 구현)로 공간 인덱싱 도입해 500m 바운딩 박스 내 후보 먼저 추출 → O(log n)으로 탐색 범위 축소. 이후 rbush-knn으로 최근접 이웃 알고리즘 적용, 최소 거리 기반 우선순위 탐색으로 최솟값 발견 즉시 종료
결과100개 마커 기준 평균 CPU 45%·피크 CPU 51% 감소
theswing
더스윙 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·여기어때 (GC컴퍼니)여기어때 (GC컴퍼니)·

    항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다

    여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.

    요약 이어보기
    #react#typescript#webview+2