[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을 반환하면 라벨이 표시되지 않음.
        }
    }
}

[GIS] FingerEyes-Xr, 선형에 대해 자동으로 회전하는 라벨링

핑거아이즈 최신 버전에서는 선형 레이어에 대한 라벨이 선의 기울기에 따라 회전하도록 개선되었습니다. 아래는 도로명 주소에 대한 라벨이 도로의 방향에 따라 회전하는 핑거아이즈 실행화면입니다.

사용자 삽입 이미지

라벨의 텍스트에 기본적으로 외곽선을 표시함으로써 다른 그래픽 요소와 분명히 구별되어 깔끔하게 표시가 되는 것을 볼 수 있습니다.

핑거아이즈에서 이러한 라벨의 회전을 위해서는 폰트를 내장(embed)해야 합니다. 이는 핑거아이즈의 기반 기술인 Flex SDK에서 텍스트를 회전하기 위해서는 폰트를 내장해야 하기 때문입니다.

사용할 폰트는 제가 요즘 그 매력에 푹 빠져 있는 네이버 나눔명조입니다. 보시는 것처럼 플래시빌더에서 assets 폴더에 해당 폰트를 Copy & Paste 합니다.

사용자 삽입 이미지

이처럼 내장한 폰트를 코드에서 사용하기 위해서는 타입화를 해야 하며 다음의 코드를 통해 가능합니다.

[Embed(source="assets/NANUMMYEONGJOEXTRABOLD.OTF", 
    fontFamily="NANUMMYEONGJO", 
    mimeType="application/x-font-opentype", 
    fontWeight="bold", 
    embedAsCFF="false")]
private var NANUMMYEONGJO:Class;

이제 마지막으로 다음 코드를 통해 핑거아이즈에서 기본적으로 사용할 폰트를 지정해 줌으로써 폴리라인에 대한 라벨을 회전할 수 있습니다.

XrMap.optionEmbedFontName = "NANUMMYEONGJO";

참~ 쉽습니다. ^^ 끝으로 핑거아이즈는 웹 기반의 GIS 엔진입니다. Flex 버전과 JavaScript 버전이 있습니다. Flex 버전은 빠른 퍼포먼스를 자랑하는 반면 JavaScript는 순수한 웹표준을 지원합니다. 그 활용 목적에 맞는 버전을 선택할 수 있는 유연함을 자랑합니다.

[FingerEyes-Xr] 멀티 정보창 표시 기능

Flex SDK 기반의 FingerEyes-Xr에서 멀티 정보창을 표시하는 API가 추가되었습니다. 참고로 FingerEyes-Xr은 오픈소스 GIS 엔진으로써 Flex SDK 버전과 HTML5 버전이 있습니다. 아울러 Flex SDK는 Adobe에서 Apache.org를 통해 오픈소스로 개발되고 있으며, PC(Windows, Linux, Mac), 웹, 모바일(Android, iOS)에서 실행되는 앱을 개발할 수 있는 매우 안정적이며 퍼포먼스가 매우 뛰어난 개발 환경입니다.

사실 오래전부터  지도 위에 피쳐(Feature)에 대한 속성 정보를 표시할때 정보창을 사용했습니다. 그러나 여러가지 이유로 이러한 정보창으로 하나가 아닌 여러개를 표시해 달라는 요구사항에 대해 검토만을 하다가 이제서야 해당 기능에 대한 API를 추가하였습니다. 아래의 화면은 멀티 정보창에 대한 실행 화면입니다.

사용자 삽입 이미지
멀티 정보창의 내용은 HTML 테그를 사용할 수 있어 다양한 폰트 스타일이나 이미지를 첨부할 수 있습니다. 또한 정보창의 배경색을 변경할 수 있음으로 속성값에 따라 알맞은 색상을 적용하여 표시할 수 있습니다. 관련 API는 간단합니다.

var html:String = " .... ";
var hotSpot:XrCoordinate = new XrCoordinate(event.mapX, event.mapY);
var id:String = "id:" + fid;
var backClr:uint = 0xfafafa;

map.infoWindows.addInfo(id, hotSpot, html, backClr);

1번 코드는 정보표시창에 나타낼 내용이며 HTML 구문입니다. 그리고 2번 코드는 표시창이 위치할 지도 좌표이고 3번은 표시창의 ID로 고유해야 하며 추후 이 ID 값을 통해 정보표시창을 참조할 수 있습니다. 4번 코드는 표시창의 배경색입니다. 끝으로 6번은 정보표시창을 생성하여 지도에 추가하는 코드입니다.

[GIS] 오픈소스, ‘FingerEyes-Xr’의 적용사례

오픈소스인 핑거아이즈(FingerEyes-Xr)의 적용사례 중 대표적인 것 3가지에 대해 소개해 보고자 합니다. 핑거아이즈는 웹기반의 GIS 엔진으로써 플래시(Flash) 기술로 개발되어 있습니다. GIS는 대용량의 데이터를 처리하고 화면에 표시합니다. 이러한 대용량의 데이터 처리와 화면에 빠르게 표시하고 서버로부터 제공받은 공간 데이터를 원활하고 빠르게 처리하기 위한 기술로 플래시가 가장 적합합니다. (ActiveX 방식은 보안적인 이슈와 특정 플랫폼에 종속적인 문제가 있으며 HTML은 속도에 대한 문제가 발생합니다)

핑거아이즈는 지도를 기본으로 다양한 시설물을 관리하고 조회할 수 있는 시스템을 개발할 수 있습니다. 아래의 시스템은 상수, 하수, 도로 시설물에 대한 GIS 시스템입니다. 25cm 급 항공영상과 지적도를 기반으로 수많은 시설물을 검색하고 그 내용을 쉽게 확인할 수 있습니다. 시설물들은 각기 하나 하나의 수치지도 레이어로 제공됨으로써 쉽게 관리될 수 있고 매우 빠르게 검색될 수 있습니다. 이외에도 지적기반의 주소검색, 도로명 기반의 새주소 검색, 건물명칭 검색등이 가능합니다.

사용자 삽입 이미지
또한 핑거아이즈는 웹에서 공간 데이터를 편집하는 시스템을 개발 할 수 있습니다. 아래의 시스템은 인허가에 대한 인허가에 해당하는 구역을 직접 지도 위에 편집하여 추가하고 변경할 수 있는 시스템입니다. 공간 데이터는 DBMS에 저장됨으로써 안정적으로 관리되며 속성값에 의한 조건 검색 및 버퍼링(Buffering)을 통한 중첩 여부를 조건으로 하는 공간 검색이 가능합니다. 공간 데이터에 대한 편집은 정점 및 선분에 대한 스냅핑 기능을 제공하고 편집에 대한 Undo/Redo가 가능합니다.
사용자 삽입 이미지
또한 핑거아이즈는 웹에서 지도를 기반으로 하는 관제시스템 개발이 가능합니다. 아래의 시스템은 실시간으로 각 운행 차량의 상황을 관제하는 시스템입니다. 해당 차량의 현재 위치, 운행한 경로, 위험행동이 발생한 지도 상의 위치를 실시간으로 제공하고 관제할 수 있는 시스템입니다. 또한 이러한 관제 데이터를 기반으로 다양한 통계정보를 차트, 주제도, 밀집도 등으로 사용자에게 효과적으로 제공할 수 있는 시스템입니다.

사용자 삽입 이미지
이처럼 핑거아이즈는 웹에서 빠르게 지도를 서비스하는 것을 기본으로 지도 위에 다양한 시설물을 관리하고 조회할 수 있으며 웹에서 공간 데이터를 안정적으로 편집할 수 있으면서 기본적인 편집 기능인 스냅핑, Undo/Redo를 제공하여 정확한 편집 및 언제든 편집한 내역을 되돌릴 수 있습니다. 또한 실시간 관제 시스템 개발은 물론 다양한 데이터를 기반으로 통계처리하여 지도 위에 차트, 주제도, 밀집도 등으로 정보를 사용자에게 제공할 수 있는 웹기반 GIS 엔진입니다.