FingerEyes-Xr의 DeferableShapeDrawTheme 추상 클래스

FingerEyes-Xr for HTML5는 DeferableShapeDrawTheme 추상 클래스를 제공합니다. Deferable은 “미룰 수 있는”이라는 의미인데요. 수치지도 레이어를 그리기 위한 심벌의 지정을 미룬다는 의미입니다. 이 추상 클래스는 상속 받아 구현해야 하는 매서드는 /* void */ requestCondition: function (/* int */fid)입니다. 이 클래스의 목적에 대한 설명은 잠시 미루고 이 클래스를 상속받아 만든 예로써 MyDeferableShapeDrawTheme 클래스는 아래와 같습니다.

위의 코드는 순수한 Javascript 코드이며, FingerEyes-Xr 방식의 클래스 정의입니다. 위의 코드에서 보이는 것처럼 3번 코드에서 Xr.theme.DeferableShapeDrawTheme 클래스는 확장한다고 명시되어 있고, 18번 코드에서 requestCondition 매서드를 구현하고 있습니다. 5번 코드가 생성자 함수인데요. 이 생성자에서는 2개의 이미지 심벌을 정의하고 있습니다. 이 2개의 이미지 심벌은 설비 따위에 대한 상태값으로 ON 상태의 이미지와 OFF 상태의 이미지를 나타냅니다. 이렇게 정의된 심벌은 18번 코드의 매서드인 requestCondition에서 사용되는데요. 이 requestCondition은 이름 그대로 “조건을 요청한다”라는 매서드로 그 구현 코드를 보면 어떤 SQL문을 서버측에 요청하고 있습니다. 그 요청 결과는 JSON으로 받게 되는데요. 34~38번 코드에서처럼 JSON 결과 중 swstatcd 필드의 값이 ON일때와 그 외의 값일때에 대해 setSymbol 매서드를 호출해 표현할 심벌을 지정해 줍니다.

이렇게 정의된 MyDeferableShapeDrawTheme 클래스는 수치지도 레이어를 생성하고 추가할때 사용되는데요. 아래의 예와 같습니다.

이해를 돕고자 위의 코드가 적용된 실행 결과에 대한 지도 화면은 다음과 같습니다.

위의 지도 화면에서 파랑색의 ON 아이콘과 빨간색의 OFF 아이콘 심벌이 위의 코드를 통해 반영된 심벌 결과입니다.

그렇다면 이 클래스의 제공하는 이유는 무엇일까요? 일반적으로 GIS의 DB 구조를 살펴보면 공간 데이터와 속성 데이터가 동일한 DBMS의 동일한 Database 내에 존재하게 됩니다. 그러나 전체 시스템이 커지거나, 타 시스템와의 연계가 필요할 경우 도형 데이터와 속성 데이터가 전혀 다른 DBMS로 분리 구분되어 저장됩니다. 바로 이러한 환경에서도 공간 데이터와 다른 DBMS의 속성 데이터가 접목되어 유연하게 조합되어 활용될 수 있도록 하기 위해 제공되는 클래스가 바로 DeferableShapeDrawTheme입니다.

끝으로, ShapeDrawSymbol 클래스를 통한 심벌 정의 시에 Brush와 Pen에 대한 심벌의 정의 예는 아래와 같습니다.

FingerEyes-Xr for HTML5와 GeoService-Xr를 활용한 설비 공간정보시스템

특화된 GIS 시스템 개발을 견고하고 빠르게 개발할 수 있는 GIS 엔진으로써, FingerEyes-Xr과 GeoService-Xr을 활용해 설비를 관리하는 GIS 시스템을 개발하고 있습니다.

다양한 기능 중 웹에서 공간 데이터를 SHP 파일로 바로 내보내기하여 저장할 수 있는 기능에 대해 소개합니다.

공간서버인 GeoService-Xr이 접근(Access)하는 공간 데이터가 저장된 DBMS로부터 SHP 파일을 다운로드할 수 있는 방법은 단지 URL의 호출만으로 이루어집니다. 즉, 공간 데이터에 대한 레이어의 고유 식별자가 ecl_alts_main이라고 하고, SHP 파일로 저장할 영역의 범위를 MBR로써, 각각 MinX, MinY, MaxX, Max라고 한다면 아래의 URL을 호출하면 SHP 파일을 압축 파일로 바로 다운로드 받을 수 있습니다.

http://localhost/Xr?gdownload|ecl_alts_main|MinX|MinY|MaxX|MaxY

아래의 화면은 SHP 파일을 저장하는 기능에 대한 실제 화면입니다. 레이어를 관리하는 UI에서 바로 원하는 레이어를 SHP 파일이나 KML로 저장할 수 있도록 하였습니다.

위의 UI 중 SHP 파일로 저장하기 원하는 레이어 명 옆의 SHP 버튼을 클릭하면 아래와 같이 웹브라우저에서 흔히 볼 수 있는 다운로드가 시작됩니다.

다운로드를 위한 URL 호출을 통해 클라이언트 측에 다운로드를 받기 위해 JavaScript 코드를 간단히 설명하겠습니다. 먼저 주요 줄기를 언급하면 iframe의 src 속성에 url을 지정하면 되는데요. 이를 위해서 해당 웹 페이지에 다음과 같이 숨겨진 iframe을 추가합니다.

그리고 SHP 파일을 저장하는 버튼에 대한 클릭 이벤트에 다음과 같은 코드가 필요합니다.

위의 코드 중 실제 의미 있는 부분은 5~8번 코드입니다.

이상으로 FingerEyes-Xr과 GeoService-Xr을 이용하여 GIS 시스템에서 공간 데이터를 바로 SHP 파일로 저장할 수 있는 기능과 JavaScript 코드에 대해 살펴 보았습니다.