Problem

• Cesium의 유료 기능인 작도 기능을 직접 개발합니다.

• JS의 클래스 문법을 활용하여 객체 지향 설계를 적용합니다.

• 네이버 지도와 브이월드 등 여러 지도 웹 앱에서 면적을 그릴 때 발생하는 꼬인 다각형 문제를 해결합니다.

  

  네이버 지도의 꼬인 다각형

  

  브이월드의 꼬인 다각형

Problem Solving

• 클래스 문법을 사용한 작도 기능 구현
  • 많은 변수와 메서드를 관리해야 하는 문제 해결을 위해 클래스 문법 사용
  • Shape 부모 클래스로 구조 설정
  • 거리, 반경, 면적 기능을 각각 Line, Circle, Area 클래스로 구현
• 꼬인 다각형 문제

  1. 교차점을 기준으로 다각형을 세분화

  2. 홀수 번 그려지는 부분은 표시되어야 하는 영역, 짝수 번 그려지는 영역은 표시되지 않아야 하는 영역이라는 규칙성 적용

     

     규칙성을 찾는 과정

     

     레퍼런스와 비교

Output

• 많은 변수와 메서드로 인해 300줄이었던 컴포넌트 코드를 60줄로 축약

• 예외 사항을 고려한 면적 그리기 기능 구현

  

• 상속, public, private, static 등의 클래스 문법 이해