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에 대한 심벌의 정의 예는 아래와 같습니다.

DuraMap-Xr에서 특정 도형 하일라이팅(Hilighting) 시키기

DuraMap-Xr에서 SHP 파일로 구성된 레이어의 특정 번호의 도형을 아래의 화면처럼 하일라이팅(깜빡거림) 시키는 코드에 대한 설명 입니다.

듀라맵에서는 특정 도형을 직접적으로 하일라이틍 시키는 API를 제공하지는 않지만, 기본적으로 제공하는 API와 Event를 이용하면 가능합니다. 이와 같은 기능은 GIS 어플리케이션에서 많이 사용되므로, 이 기능 하나에 대해 쉽게 재사용할 수 있도록 클래스화하여 제공합니다. 클래스의 이름은 DuraMapUtility_HilightingShape인데요. 이 글은 DuraMapUtility_HilightingShape 클래스를 사용하는 내용에 대한 정리입니다.

먼저 DuraMapUtility_HilightingShape 클래스에 대한 객체 변수를 원하는 곳에 선언합니다. 필자의 경우 듀라맵의 지도 컴포넌트가 놓여진 폼(Form)의 private 변수로 선언하였습니다.

위의 DuraMapUtility_HilightingShape 클래스에 대한 객체 변수를 폼의 생성자에서 다음처럼 생성 하는데요. 생성자의 인자로 받는 것은 듀라맵의 지도뷰 객체입니다.

그리고 듀라맵의 지도뷰 객체이 제공하는 이벤트 중 OnCustomDraw에 대해 다음처럼 입력합니다.

여기까지가 원하는 도형을 하일라이팅하기 위한 모든 준비 과정입니다.

이제 다음처럼 언제든지 어떤 레이어를 구성하는 도형을 하일라이팅할 수 있는데요. Hilighting 함수의 첫번째 인자는 하일라이팅하고자 하는 레이어이고 877이라는 숫자값은 하일라이팅되는 도형에 대한 FID 값입니다.

참고로 아래의 코드는 사용자가 지도 상에서 마우스를 클릭했을 때 클릭되어진 도형의 FID를 얻는 함수로, DuraMap-Xr의 지도뷰가 제공하는 OnLButtonUp 이벤트에서 실행되는 코드입니다.

DuraMapUtility_HilightingShape 클래스와 이 클래스를 사용하는 예제 코드는 다음의 URL에서 다운로드할 수 있습니다.