[태그:] Xr

속성값에 따라 다양한 심벌(색상 등)을 달리하여 맵을 표현한 것을 주제도라고 할 수 있습니다. 이 글은 핑거아이즈에서 주제도를 표현하는 방법에 대해 설명합니다.

실행결과 보기 및 소스코드 다운로드

위의 화면은 이 글에서 만들 최종적인 실행 결과에 대한 것으로써 강남구의 주택수에 따라 색상을 달리해 표현한 결과입니다.

이제 주제도를 표현하기 위해 핑거아이즈에서 어떤 API를 활용하는지 살펴보겠습니다. 먼저 플래시 빌더를 실행하고 새로운 MXML Application을 추가한 뒤 XrMap 컴포넌트를 추가합니다.

     ....
    

위의 코드는 MXML Application을 추가하면 자동으로 생성되는 코드에서 3번 코드만을 새롭게 추가한 상태입니다. 기본적으로 주제도가 올라갈 기본도에 대한 레이어를 추가를 위해 Application의 initialize 이벤트에 onInit 함수를 지정하고 onInit 함수를 다음과 같이 코딩합니다.

protected function onInit(event:FlexEvent):void
{
    var lyr:XrTileMapLayer = new XrTileMapLayer("basemap",  
        "http://www.geoservice.co.kr/tilemap1");
    map.layers.addLayer(lyr);
    
    map.viewControls.scaleLevels = 
    [
        3000000, 1800000, 800000, 460000, 250000, 110000, 
        50000, 25000, 14000, 7500, 3500, 2000
    ];

    map.moveMap(new XrCoordinate(317782, 544590));
    map.viewControls.scaleLevel = 6;
    
    setThemeMap();
    setLegendForThemeMap();
}

1~3번 코드는 배경맵으로써 타일맵을 추가하는 코드이며, 5~12번 코드는 맵 화면을 설정하는 코드입니다. 아직 만들어 놓은 함수는 아니지만 setThemeMap과 setLegendForThemeMap 함수는 각각 주제도를 설정하고 주제도에 대한 범례를 설정하는 함수들입니다. 위의 코드가 옳바르려면 다음과 같은 import 문이 필요합니다.

import flash.filters.DropShadowFilter;
import geoservice.base.XrCoordinate;
import geoservice.controls.*;
import geoservice.view.layers.XrShapeMapLayer;
import geoservice.view.layers.XrTileMapLayer;
import geoservice.view.legend.*;
import geoservice.view.symbols.*;
import geoservice.view.themes.*;

자.. 이제 먼저 setThemeMap 함수를 살펴보겠습니다.

private function setThemeMap():void
{
    var shapeLyr:XrShapeMapLayer = new XrShapeMapLayer("thememap", 
        "http://www.geoservice.co.kr:8080/Xr?layerName=gangnam");
    map.layers.addLayer(shapeLyr);
    
    var rangeTheme:XrRangeValueTheme = new XrRangeValueTheme();
    rangeTheme.fieldName = "G05_01";
    shapeLyr.theme = rangeTheme;
    shapeLyr.theme.properties = [
        {
            range:{from:-1, to:62}, 
            symbol:{fillColor:0xffff80, fillAlpha:1.0, lineColor:0}
        },
        {
            range:{from:62, to:182}, 
            symbol:{fillColor:0xfad155, fillAlpha:1.0, lineColor:0}
        },
        {
            range:{from:182, to:281}, 
            symbol:{fillColor:0xf2a72e, fillAlpha:1.0, lineColor:0}
        },
        {
            range:{from:281, to:402}, 
            symbol:{fillColor:0xad5313, fillAlpha:1.0, lineColor:0}
        },
        {
            range:{from:402, to:923}, 
            symbol:{fillColor:0xd6b0000, fillAlpha:1.0, lineColor:0}
        }
    ];
    
    shapeLyr.filters = [ new DropShadowFilter(5, 45, 0, 0.6, 6, 6) ]; 
}

가장 먼저 3~5번 코드를 통해 주제도로 사용될 ShapeMapLayer를 추가합니다. 이 주제도가 가지는 속성과 도형을 통해 주제도를 표현하게 됩니다.  속성값에 따라 주제도를 표현하는 방법에는 속성값의 범위에 따라 심벌을 지정하는 방식, 속성값이 정확히 일치할때 심벌을 지정하는 방식, 끝으로 비슷한 값에 대해 심벌을 지정하는 방식으로 나뉩니다. 이 경우 값의 범위에 따라 심벌을 지정하므로 7번 코드에서 XrRangeValueTheme를 이용해 주제도를 준비합니다. 사용할 속성값에 대한 필드명을 지정하기 위해 8번 코드가 사용되었습니다. 그리고 9번 코드는 앞서 추가한 ShapeMapLayer에 주제도를 지정하는 코드입니다. 10~30번 코드가 속성값의 범위에 따라 원하는 심벌을 지정하게 하는 코드입니다. 총 5개로 분류했으며 range의 from과 to 값의 의미는 from값보다 크며(같은값은 제외) to보다 같거나 작은 값에 대한 조건을 지정합니다. 그리고 symbol은 이 조건에 대해 사용할 심벌입니다. 이제 주제도는 완성되었습니다. 이제 좀더 완성도 높은 주제도 표현을 위해 주제도의 범례를 표현해 보겠습니다. 이에 대한 코드는 setLegendForThemeMap 함수이며 다음과 같습니다.

private function setLegendForThemeMap():void
{
    var legend:XrLegend = new XrLegend("legend");
    
    var vbox:XrVAlignLegendItemGroup = new XrVAlignLegendItemGroup();
    legend.content = vbox;
    // 범례 제목
    var fontSym_Title:XrFontSymbol = new XrFontSymbol(
        {fontName:"HY견고딕", fontSize:15, fontColor:0x555555});
    var title:XrTextLegendItem = new XrTextLegendItem("강남구 주택수", fontSym_Title);
    title.centerAlign = true;
    title.fillParentWidth = true;
    vbox.addItem(title);
    
    // 범례 제목과 항목 리스트 사이의 수평선
    var bar_lineSym:XrLineSymbol = new XrLineSymbol(
        {lineColor:0x000000, lineThickness:1});
    var bar:XrBarLegendItem = new XrBarLegendItem(true, bar_lineSym);
    vbox.addItem(bar);
    
    // 범례 항목 구성
    var vbox_Bottom:XrVAlignLegendItemGroup = new XrVAlignLegendItemGroup();
    vbox.addItem(vbox_Bottom);

    var fontSym_Item:XrFontSymbol = new XrFontSymbol(
        {fontName:"HY견고딕", fontSize:14, fontColor:0x888888});
    var lineSym_Item:XrLineSymbol = 
        new XrLineSymbol({lineColor:0, lineThickness:1});
    
    var itemString:Array = 
        [ "0 ㅡ 62", "63 ㅡ 182", "183 ㅡ 281", "282 ㅡ 402", "403 ㅡ 923"];
    var itemColor:Array = [ 0xffff80, 0xfad155, 0xf2a72e, 0xad5313, 0xd6b0000];

    for(var iItem:int=0; iItem    {
        var hbox:XrHAlignLegendItemGroup = new XrHAlignLegendItemGroup();
        var fillSym:XrFillSymbol = new XrFillSymbol({fillColor:itemColor[iItem] });
        var colorBox:XrSolidColorBoxLegendItem = 
            new XrSolidColorBoxLegendItem(46, 24, fillSym, lineSym_Item);
        var text:XrTextLegendItem = 
            new XrTextLegendItem(itemString[iItem], fontSym_Item);
     
        hbox.addItem(colorBox);
        hbox.addItem(text);
        vbox_Bottom.addItem(hbox);     
    }
    
    map.legends.addLegend(legend);
}

주제도를 구성하면 자동으로 범례가 연계되어 생성되지 않고 이와는 독립적으로 사용자가 하나 하나 구성해주는 방식입니다. 다소 사용하기 어려운 면은 있지만.. 범례에 대한 요구사항이 다양하고 다양한 요구사항을 맞추기 위한 방식입니다. 핑거아이즈의 범례 구성은 듀라맵에서의 범례 구성 방식과 동일한 레이아웃 기법입니다. 코드에 대한 자세한 설명은 생략하고 듀라맵의 레이아웃 기법(http://DuraMap-Xr, 통계 데이터를 이용한 주제도 작성)을 참고하시면 위의 코드를 쉽게 이해하실 수 있습니다.

실행 결과 보기 및 소스 코드 다운로드

이 글은 사용자가 마우스를 이용해 매쉬업할 항목을 직접 그리는 핑거아이즈의 API 사용에 대해 설명합니다. 먼저 플래시빌더에서 새로운 어플리케이션(File-New-MXML Application)을 생성합니다. 그리고 위의 화면 구성을 위해 아래와 같은 UI 코드를 추가합니다.

네, 총 12개의 버튼과 1개의 맵 컨트롤로 구성된 어플리케이션입니다. 각 버튼에 대한 클릭 이벤트에 대한 코드를 작성하기 전에 각 버튼이 하는 역활을 간단히 설명하면 다음과 같습니다.

• 지도 이동 : 마우스 드래그를 통해 지도의 이동(Panning)
• 매쉬업 편집 : 마우스를 통해 매쉬업을 시작할 수 있도록 준비함. 이 버튼을 누르고 추가하고 싶은 매쉬업에 해당하는 버튼을 눌르게 되면 마우스를 통해 매쉬업이 됨. 또는 기존의 매쉬업을 마우스로 선택할 수 있는 모드로 전환.
• 사각형 : 마우스를 이용한 사각형 매쉬업
• 타원 : 마우스를 이용한 타원 매쉬업
• 원 : 마우스를 이용한 원 매쉬업
• 폴리곤 : 마우스를 이용한 폴리곤 매쉬업
• 폴리라인 : 마우스를 이용한 폴리라인 매쉬업
• 마커 : 마우스를 이용한 포인트 매쉬업
• 텍스트 : 마우스를 이용한 텍스트 매쉬업
• 선택한 매쉬업 삭제 : 선택된 매쉬업을 삭제함
• Redo : 마우스를 이용한 매쉬업의 재실행
• Undo : 마우스를 이용한 매쉬업에 대한 되돌리기

이제 실제 코드를 작성해보도록 하겠습니다. 먼저 매쉬업을 마우스로 추가해야 하므로 먼저 매쉬업 레이어를 하나 추가하고 배경이 되는 타일맵도 하나 추가하는 코드를 먼저 작성해야 합니다. 초기화에 해당하는 코드이므로 Application의 initialize 이벤트에 코드를 추가합니다.

protected function onInit(event:FlexEvent):void
{
    var lyr:XrTileMapLayer = new XrTileMapLayer("basemap", 
        "http://www.geoservice.co.kr/tilemap1");
    map.layers.addLayer(lyr);
    
    map.viewControls.scaleLevels = 
        [
            3000000, 1800000, 800000, 460000, 250000, 
            110000, 50000, 25000, 14000, 7500, 3500, 2000
        ];
    map.moveMap(new XrCoordinate(305849, 547877));
    map.viewControls.scaleLevel = 0;
    
    var ml:XrMashupLayer = new XrMashupLayer("mashup");
    map.layers.addLayer(ml);
    map.edit.targetLayer = ml;
    
    map.filters = [ new DropShadowFilter(6, 45, 0, 0.5) ];
}

이제 각 버튼에 대한 이벤트의 코드를 살펴보겠습니다. 먼저 지도 이동 버튼에 대한 코드입니다.

private function onMoveMap(event:MouseEvent):void
{
    map.edit.editMode = false;    
}

단순하게 editMode를 false로 지정해 주는 코드입니다. 즉, 마우스에 대한 기능은 편집인가 편집이 아닌가로 나뉘게 됩니다.  다음으로 매쉬업 편집 버튼의 이벤트입니다.

private function onEdit(event:MouseEvent):void
{
    map.edit.editMode = true;

    map.edit.snapVertexEnable = true;
    map.edit.snapEdgeEnable = true;
    map.edit.snapTargetLayer = 
        map.layers.getLayer("mashup") as IXrSnapableLayer;    
}

editMode를 true로 지정했으며, 소개를 위해 스냅핑 기능과 편집 대상 레이어를 지정하고 있습니다. 5,6번 코드는 각각 정점 스냅핑과 선분 스냅핑 기능을 활성화 시키고 있으며 7번 코드는 편집하고자 하는… 즉 매쉬업을 올릴 레이어를 지정합니다. 이 버튼이 눌려지게 되면 기존의 매쉬업 항목을 마우스 클릭을 통해 선택하거나 항목 추가 버튼의 클릭과 마우스를 통해 새로운 매쉬업이 수행됩니다. 사각형 매쉬업 버튼에 대한 클릭 이벤트입니다.

private function onAddRectangle(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addRectangle(id);
    if(!bOK)
    {
        trace("사각형 매쉬업 실패");
    }
}

1번 코드는 매쉬업 편집 이벤트인 onEdit를 먼저 호출해서 항상 편집 모드 상태로 전환시켜 놓습니다. 매쉬업 항목은 각각 고유한 id값을 가지고 있습니다. 고유한 id값을 생성하기 위해 전역적으로 선언된 uint 타입의 fid 변수를 1씩 자동 증가하여 사용합니다.

private var fid:uint = 0;

사각형 매쉬업의 추가는 id를 인자로 하는 addRectangle 매서드입니다. 현재 편집 모드 상태에서 이 매서드가 호출되면 마우스를 통해 사각형을 그릴 수 있습니다. 다음은 타원 버튼에 대한 이벤트 코드입니다.

private function onAddEllipse(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addEllipse(id);
    if(!bOK)
    {
        trace("타원 매쉬업 실패");
    }
}

앞서 설명한 사각형 매쉬업에 대한 코드와 동일하며 단지 매쉬업 대상에 대한 addEllipse 매서만이 다릅니다. 이제 원에 대한 이벤트 코드입니다.

private function onAddCircle(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addCircle(id);
    if(!bOK)
    {
        trace("원 매쉬업 실패");
    }
}

다음은 폴리곤에 대한 매쉬업 코드입니다.

private function onAddPolygon(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addPolygon(id);
    if(!bOK)
    {
        trace("폴리곤 매쉬업 실패");
    }
}

다음은 폴리라인에 대한 매쉬업 코드입니다.

private function onAddPolyline(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addPolyline(id);
    if(!bOK)
    {
        trace("폴리라인 매쉬업 실패");
    }
}

다음은 마커에 대한 클릭 이벤트 코드입니다.

private function onAddMarker(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addPoint(id);
    if(!bOK)
    {
        trace("마커 매쉬업 실패");
    }
}

이제 끝으로 텍스트 매쉬업 버튼에 대한 코드입니다.

private function onAddText(event:MouseEvent):void
{
    onEdit(event);

    var id:uint = fid++;
    var bOK:Boolean = map.edit.addText(id);
    if(!bOK)
    {
        trace("텍스트 매쉬업 추가 실패");
    }
}

핑거아이즈는 새로운 매쉬업 요소가 생성되면 editFeatureAddedNew라는 이벤트가 발생하게 됩니다. 이미 이 글의 가장 앞에서 버튼과 맵 컨트롤을 구성하는 MXML 코드에서 XrMap의 editFeatureAddedNew 이벤트에 대한 핸들러를 할당해 놓았는데 이 핸들러의 코드는 다음과 같습니다.

private function onMashupAdded(event:XrEditFeatureAddedNewEvent):void
{
    var ml:XrMashupLayer = map.layers.getLayer("mashup") as XrMashupLayer; 
    var mu:IXrMashup = ml.getMashup(fid-1);
    var tm:XrTextMashup = mu as XrTextMashup;
    if(tm != null)
    {
        tm.text = "텍스트 매쉬업! 문자 변경했습니다!";
        map.edit.selectNone();
    }
}

매쉬업 레이어의 getMashup 매서드를 통해 특정 id를 갖는 매쉬업 항목을 얻어오게 되는데 위의 4번 코드에서 보면 fid-1이 id값으로 사용되었습니다. 즉, 가장 최근에 추가된 매쉬업 항목을 얻어 오는 것으로써 얻어온 매쉬업이 텍스트 매쉬업일 경우 텍스트 문자값을 변경해줍니다.

이제 선택한 매쉬업 삭제 버튼에 대한 클릭 이벤트 코드를 살펴보면 다음과 같습니다.

private function onRemoveSelected(event:MouseEvent):void
{
    map.edit.deleteSelectedItem();
}

그리고 Redo와 Undo에 대한 코드는 다음과 같습니다.

private function onRedo(event:MouseEvent):void
{
    map.edit.redo();
}
   
private function onUndo(event:MouseEvent):void
{
    map.edit.undo();
}

이상으로 마우스를 통한 기본적인 매쉬업에 대한 핑거아이즈의 코드를 설명드렸습니다.

수치지도 레이어는  이미지로 만들어진 지도가 아닌 좌표값으로 구성된 지도 레이어를 의미하며 핑거아이즈에서는 Shape Map Layer라고 불립니다. 이 글은 ShapeMapLayer를 추가하는 API에 대해 설명합니다.

먼저 실습을 위해 FingerEyes, 타일맵 레이어 추가을 통해 만들어진 소스 코드를 토대로 하겠습니다. 토대가 되는 소스 코드는 FingerEyes, 타일맵 레이어 추가를 통해 다운로드 받으실 수도 있습니다.

여타 다른 레이어와 마찬가지로 ShapeMapLayer 역시 어플리케이션이 초기화 되는 시점에서 추가하는 것이 적당합니다. 해서 Application의 initialize 이벤트에 대해 이미 지정된 onInit 함수에서 ShapeMapLayer를 추가하는 코드를 작성하면 다음과 같습니다.

protected function onInit(event:FlexEvent):void
{
    ....

    var shapeLyr:XrShapeMapLayer = new XrShapeMapLayer("road", 
        "http://www.geoservice.co.kr:8080/Xr?layerName=road_line");
    shapeLyr.theme.properties = 
        {lineThickness:4.0, lineAlpha:1.0, lineColor:0xff2222};
    map.layers.addLayer(shapeLyr);
}

수치지도맵 레이어에 대한 클래스 타입은 XrShapeMapLayer로써 레이어 이름과 지도 데이터에 연결하기 위한 연결 문자열(Connection String)을 갖습니다. 레이어의 이름은 road라고 이해하기 쉬운 단어로써 원하는 값으로 지정했으며 연결 문자열은 지도 데이터 서버와 지도 데이터 서버(http://www.geoservice.co.kr:8080/Xr)에서 제공하는 데이어명(road_line)으로 구성됩니다.

ShapeMapLayer는 타일맵 레이어처럼 이미지로써 이미 만들어진 레이어가 아니므로 원하는 색상등과 같은 심벌로 그릴 수 있으며 이런 심벌을 지정하기 위해 XrShapeMapLayer의 theme 속성을 사용합니다. 7번 코드가 여기에 해당하는데 추가하고자 하는 수치지도가 폴리라인 형태이므로 선의 굵기를 4로 지정했으며 선의 투명알파값을 1.0로 지정하여 불투명하게 했으며 선의 색상값을 빨간색계열로 지정했습니다. 이렇게 생성된 레이어를 8번 코드에서처럼 추가하면 기본적인 수치지도 레이어가 화면상에 표시됩니다.

여기까지가 기본적인 수치지도 레이어를 추가하는 방법이고 이제 이렇게 추가한 수치지도를 원하는 축척 단계에서 표시하는 API 사용에 대해 설명하도록 하겠습니다.

먼저 핑거아이즈에서 축척 단계에 대한 이해가 필요합니다. onInit 함수 안에는 다음과 같은 코드가 있습니다.

map.viewControls.scaleLevels = [120000, 60000, 25000, 15000, 7000, 2500, 1200];
map.viewControls.scaleLevel = 5;

1:120000, 1:60000, 1:25000, 1:15000, 1:7000, 1:2500, 1:1200에 대한 축척 레벨을 지정했으며 현재의 축척 레벨을 5번인 1:2500으로 지정하고 있습니다. 즉 축척 레벨의 번호는 0부터 시작하여 구성되며 지정할 수 있습니다.

여기서 앞서 추가한 수치지도 레이어를 축척 레벨이 4~6번일때문 화면상에 표시되도록 하기 위해 다음 코드를 레이어를 생성하는 코드 바로 아래에 추가합니다.

shapeLyr.visibleByLevel = true;
shapeLyr.fromVisibleLevel = 4;
shapeLyr.toVisibleLevel = 6;

이제 다음으로 수치지도에 라벨을 달아 보도록 하겠습니다. 수치지도는 지도를 구성하는 좌표뿐만 아니라 속성값에 대한 데이터도 가지고 있으며 이 속성 데이터를 지도 위에 표시할 수 있습니다. 우리가 추가한 수치지도는 도로에 대한 중심선으로써 도로명을 표시해 보도록 하겠습니다. 수치지도에 대해 라벨을 지정하는 코드는 다음과 같으며 레이어를 생성하는 코드 바로 아래에 추가하면 됩니다.

shapeLyr.label.enable = true;
shapeLyr.label.fieldName = "RD_NM";    
shapeLyr.label.visibleByLevel = true;
shapeLyr.label.fromVisibleLevel = 4;
shapeLyr.label.toVisibleLevel = 6;

1번 코드는 라벨을 사용하겠다는 의미이며 2번 코드는 도로명에 대한 필드명입니다. 그리고 3번 코드는 축척 레벨에 따라 라벨을 보이겠다는 의미이며 4번과 5번 코드에 축척 레벨의 범위를 지정해 줍니다. 이제 실행해 보면 다음 처럼 라벨이 표시됩니다.

이상으로 핑거아이즈에서 수치지도맵 레이어인 ShapeMapLayer를 추가하는 방법에 대한 대략적인 설명을 마무리 하면서…. 수치지도맵 레이어는 범용 GIS 엔진이라면 반드시 갖춰야 하는 레이어입니다. 이 수치지도레이어를 잘 활용하면 방대한 데이터를 처리할 수 있는 GIS 시스템을 쉽게 구현할 수 있습니다.

예를 들어서 새로운 도로나 건물 등을 새롭게 추가하거나 편집할 수 있으며 도로나 건물에 대한 속성값을 마우스로 클릭하여 사용자에게 제공할 수 있습니다. ShapeMapLayer는 TileMapLayer와 달리 자주 변경되는 공간데이터를 표현하는데 매우 효율적인 레이어입니다.

실행 결과 및 소스 코드 보기