[OpenLayers] 지오메트리(Geometry)에 대한 공간 연산(JSTS.js 사용)

ol에서 지오메트리에 대해 buffer나 union 등과 같은 공간 연산 기능에 대한 API를 정리합니다. 공간 연산 기능은 JSTS.js라는 별도의 라이브러리를 통해 수행합니다. JSTS.js는 Java의 JTS 라이브러리를 Javascript 언어로 포팅한 라이브러리입니다. 이글은 공간 연산을 위한 지오메트리를 생성하기 위해 “마우스로 Vector 생성하기(그리기)”라는 글의 코드를 약간 변형하여 사용합니다. ol에서 마우스로 도형을 그리는 API의 설명은 이 글을 참고 하기 바랍니다.

먼저 실행 결과를 아래의 동영상을 통해 살펴볼 수 있습니다.

사용자가 Buffer 연산을 적용할 지오메트리를 그리면 바로 200m 만큼 Buffer 연산이 적용되어 화면에 표시됩니다. 이를 위해 먼저 index.html 파일을 아래처럼 구성합니다.

20번 라인에 jsts.js 라이브러리 스크립트를 추가하고 있습니다. index.js 파일에 대해 설명하면 다음과 같습니다.

먼저 필요한 모듈을 추가합니다.

그리고 레이어와 지도를 구성합니다.

다음으로 그리고자 하는 도형의 종류를 선택하는 UI의 이벤트 처리와 도형을 그리는 Draw 클래스 타입을 위한 draw 변수를 정의합니다.

지금까지는 “마우스로 Vector 생성하기(그리기)”의 내용과 큰 차이가 없습니다. 이제 변경된 가장 중요한 부분인 addInteraction 함수는 아래와 같습니다.

마우스를 통한 도형 그리기가 완료되면 11번 코드에 등록된 drawend 이벤트 함수가 호출됩니다. 이 이벤트 함수에서 그려진 도형을 WKT로 변환하고 JSTS.js에서 해석할 수 있는 지오메트로로 변환한 후 Buffer 연산을 수행합니다. 그리고 이를 다시 WKT로 변환하고 ol의 지오메트리로 변환하는 과정을 거치게 됩니다. 실행하면 앞서 살펴본 영상과 동일한 결과를 볼 수 있습니다.

GeoServer의 Cross Domain 허용 (CORS)

GeoServer에서 Cross Domain을 허용하기 위한 설정 방법을 기록해 둡니다. 먼저 아래처럼 GeoServer의 환경설정 파일을 편집하기 위해 vi를 실행합니다. 환경 설정 파일은 설치되는 GeoServer의 디렉토리에 따라 달라집니다.

내용 중 CORS에 해당되는 2곳에 대한 주석을 아래 그림처럼 해제합니다.

만약 이미 GeoServer가 실행 중이라면 종료하고 재기동해야 합니다.