[GIS] FingerEyes-Xr for HTML5 ㅡ VWorld 연동, Identify, GraphicLayer

1. TMS 배경지도 연동

HTML5 기반의 FingerEyes-Xr는 TMS 스펙을 지원하고 있습니다. 구글맵, 네이버맵, 다음맵 그리고 VWorld는 TMS 형식으로 배경지도를 제공하고 있는데요. 이러한 배경지도를 핑거아이즈에서 쉽게 활용할 수 있습니다. 아래의 동영상은 VWorld 배경지도에 대한 활용예 입니다.

사용자 삽입 이미지

2. Feature 선택 및 속성 확인

다음은 수치지도 레이어에 대한 마우스 선택 및 속성 확인에 대한 동영상입니다. FingerEyes-Xr은 벡터 데이터에 대한 빠른 처리가 가능한데요. 이러한 빠른 처리가 가능한 이유는.. 서버에서 서비스 되는 벡터 데이터의 포맷을 좌표값 포맷으로 받아 클라이언트에서 처리하도록 한다는 점입니다. 물론 이는 선택 사항이고 OGC 표준인 WMS와 WFS 형태의 서비스 활용도 가능합니다.

사용자 삽입 이미지

3. 그래픽 레이어 편집(매쉬업)

FingerEyes-Xr은 그래픽 레이어를 지원함으로써 사용자가 가지고 있는 위치 데이터를 배경지도 위에 매쉬업할 수 있는 기능을 제공합니다. 자바스크립트 코드를 통해 매쉬업을 할 수 있고 마우스를 통한 편집을 통해 매쉬업할 도형을 작성할 수 있는데요. 아래의 동영상은 마우스를 통한 매쉬업 도형을 생성하고 편집하는 예입니다.

사용자 삽입 이미지

FingerEyes-Xr은 GPL 라이선스 기반의 오픈소스(OpenSource)입니다. 아래의 GitHub 링크를 통해 다운로드 받을 수 있습니다.

사용자 삽입 이미지

[GIS] FingerEyes-Xr, 속성값에 따라 라벨의 폰트 심벌 다르게 지정하기

웹 GIS 솔루션이자 엔진인 FingerEyes-Xr에서 라벨을 표시할때 속성값에 따라 다양한 모양으로 라벨을 표시하고자 하는 경우에 대한 내용입니다. 예를 들어서 지적도에 대한 필지값이 ‘전’, ‘구’, ‘임’, ‘도’, ‘답’으로 끝나는 경우에 대해 각기 다른 폰트 심벌로 표시하고자 할때 사용할 수 있는 방법입니다. 아래의 화면은 실제 이와 같은 경우에 대한 실행 화면입니다.

사용자 삽입 이미지

위의 화면에서 보는 것처럼 하나의 레이어에 대해서 속성값에 따라 다양한 폰트 색상으로 표시하고 있습니다. 색상 뿐만 아니라 폰트의 크기, 스타일 등도 지정할 수 있습니다.

이와 같은 처리를 위해서 먼저 다음과 같이 적용 대상이 되는 레이어의 라벨을 설정합니다.

var slyr:XrShapeMapLayer = map.layers.getLayer("JIBUN") as XrShapeMapLayer;
slyr.label.fieldName = "PAR_LBL";
slyr.label.enable = true;
slyr.label.labelSymbolTheme = new CustomLabelSymbolTheme();

1~3번 코드는 일반적인 레이어를 얻고 라벨을 설정하는 코드이고, 4번 코드가 바로 속성값에 따라 다양한 심벌을 제공해 주는 사용자 정의 클래스입니다. 사용자 정의 클래스인 CustomLabelSymbolTheme은 IXrProgrammableLabelSymbol 인터페이스를 구현합니다. 이 클래스에 대한 코드는 다음과 같습니다.

package
{
    import geoservice.data.XrAttribute;
    import geoservice.data.XrFieldSet;
    import geoservice.view.label.IXrProgrammableLabelSymbol;
    import geoservice.view.symbols.XrFontSymbol;
	
    public class CustomLabelSymbolTheme implements IXrProgrammableLabelSymbol
    {
        // 각각 전, 구, 임, 도, 답일 경우와 그외의 경우에 사용할 폰트 심벌을 정의
        private var sym_A:XrFontSymbol = null;
        private var sym_B:XrFontSymbol = null;
        private var sym_C:XrFontSymbol = null;
        private var sym_D:XrFontSymbol = null;
        private var sym_E:XrFontSymbol = null;
        private var sym_F:XrFontSymbol = null;
		
        public function CustomLabelSymbolTheme()
        {
            // 폰트 심벌을 매우 빈번하게 사용하므로 생성자에서 미리 만들어 놓아
            // 퍼포먼스를 향상 시킬 수 있다.
            sym_A = new XrFontSymbol();
            sym_A.fontSize = 12;
            sym_A.fontColor = 0xff0000;
            sym_A.textOutlineColor = 0x000000;
			
            sym_B = new XrFontSymbol();
            sym_B.fontSize = 12;
            sym_B.fontColor = 0xffff00;
            sym_B.textOutlineColor = 0x000000;
			
            sym_C = new XrFontSymbol();
            sym_C.fontSize = 12;
            sym_C.fontColor = 0x0000ff;
            sym_C.textOutlineColor = 0x000000;
			
            sym_D = new XrFontSymbol();
            sym_D.fontSize = 12;
            sym_D.fontColor = 0xff00ff;
            sym_D.textOutlineColor = 0x000000;
			
            sym_E = new XrFontSymbol();
            sym_E.fontSize = 12;
            sym_E.fontColor = 0xea3366;
            sym_E.textOutlineColor = 0x000000;
			
            sym_F = new XrFontSymbol();
            sym_F.fontSize = 12;
            sym_F.fontColor = 0xffffff;
            sym_F.textOutlineColor = 0x000000;
        }
		
        public function getSymbol(attr:XrAttribute, fieldIndex:int, 
            fieldSet:XrFieldSet):XrFontSymbol
        {
            // 라벨의 문자열로 사용할 값을 얻는 코드.
            // 기본적으로 라벨을 위한 필드로 지정한 필드 인덱스가 인자로 넘어옴.
            // 인자에 FieldSet이 제공되므로 이를 이용해 다른 필드값도 사용할 수 있음.
            var v:String = attr.getValueAsString(fieldIndex);
			
            // 필드값이 전을 포함하면 sym_A를 사용하는 식이다.
            if(v.indexOf("전") != -1) {
                return sym_A;
            }
			
            if(v.indexOf("구") != -1) {
                return sym_B;
            }
			
            if(v.indexOf("임") != -1) {
                return sym_C;
            }
			
            if(v.indexOf("도") != -1) {
                return sym_D;
            }
			
            if(v.indexOf("답") != -1) {
                return sym_E;
            }
			
            // 그외의 경우에 대한 심벌 반환
            return sym_E; // null을 반환하면 라벨이 표시되지 않음.
        }
    }
}