[카테고리:] FingerEyes-Xr

밀도도란 공간 상의 어느 지점에 어떤 특징이 밀집되어 나타나는지를 효과적으로 표현한 지도로 생각할 수 있습니다. 예를 들어… 인구가 가장 많이 밀집되어 있는 곳이 어디인가를 쉽게 한눈에 파악해 볼 수 있습니다. 이 글에서도 이 인구를 주제로 하여 핑거아이즈에서 밀도도를 나타내는 방법에 대해 살펴보겠습니다. 먼저 아래 링크를 통해 최종 결과를 실행해 밀도도가 어떤 것인지 확인해 보시기 바랍니다.

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

핑거아이즈에서 밀도도 계산은 정확도를 높이기 위해 Kernel Density 알고리즘을 통해 계산됩니다. 밀도 분석에 필요한 인자는 공간상의 데이터와 속성값 그리고 반경과 셀의 해상도입니다. 반경과 셀의 해상도에 따라 밀도 분석의 결과가 다르게 나타납니다. 결과에 대해 간단히 설명드리면 반경이 클수록 좀더 넓은 양상을 파악할 수 있고 반경이 작으면 좀더 디테일한 양상을 파악할 수 있습니다. 그리고 셀의 해상도의 값은 작을 수록 밀도 분석의 결과가 미려해 집니다. 반경이 클수록 그리고 셀의 크기 값이 작을 수록 밀도 분석의 속도가 느려집니다. 이 값을 어떻게 정해야 한다라는 정확한 방법은 없으며 분석하고자 하는 대상이나 목적에 따라 가변적입니다. 밀도 분석이라는 주제를 보다 더 자세히 논의하려면 이 글의 주제를 벗어나므로 이쯤에서 정리를 하고 이제 핑거아이즈에서 밀도도를 만드는 API 사용에 대해 살펴보겠습니다.

먼저 플래시 빌더에서 새로운 MXML Application을 추가하고 기본적인 UI를 만들어 보겠습니다. UI 단은 MXML로 다음처럼 구성합니다.

이 코드에 대한 UI는 다음 화면과 같습니다.

밀도계산 버튼은 실제 밀도를 계산해 화면에 표시하며 검색반경 옆의 TextInput는 밀도 계산에 사용되는 반경값을 지정하는 UI입니다. 그리고 바로 그 옆의 ProgressBar는 밀도계산의 진행진척율을 나타냅니다. 끝으로 범례 표시 버튼은 범례에 표시에 사용된 색상의 의미를 범례로 화면상에 표시합니다.

다음으로 기본적으로 필요한 기본도와 밀도 계산에 사용될 인구 분포도(포인트)에 대한 레이어를 추가합니다. 이러한 레이어 추가는 Application의 initialize 이벤트가 적당하며 여기서는 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 = 9;
    
    var lyr2:XrShapeMapLayer = new XrShapeMapLayer("population", 
        "http://www.geoservice.co.kr:8080/Xr?layerName=population");
    lyr2.theme.properties = {
        fillColor:0xff0000, fillAlpha:1.0, 
        lineThickness:1.0, lineAlpha:1.0, lineColor:0xffffff, markerWidth:3, 
        markerHeight:3
    };
    map.layers.addLayer(lyr2);
}

3~5코드는 배경도로써 타일맵 레이어를 추가하는 코드이고 7~13번 코드는 지도 화면의 초기값 상태를 지정해 주는 코드입니다. 처음 시작시 축척 레벨과 화면 중심좌표를 지정합니다. 15~22번 코드는 인구분포에 대한 레이어를 추가하는 코드로 포인트 (X,Y) 좌표와 각 좌표에 인구수에 대한 정보가 담긴 Shape 레이어입니다. 참고로 이 데이터는 통계청에서 제공받은 2005년도 전국에 대한 인구 데이터입니다.

이제 밀도계산 버튼의 클릭 이벤트인 onDensityClick 함수의 코드를 살펴보겠습니다.

protected function onDensityClick(event:MouseEvent):void
{
    if(map.layers.getLayer("grid") != null)
    {
        map.layers.removeLayer("grid");
    }
    
    var mbr:XrExtent = map.currentMBR;
    var resolution:Number = (mbr.max.x - mbr.min.x) / map.width * 1.3;
    var lyr:XrGridMapLayer = new XrGridMapLayer("grid", mbr, resolution);
    if(!map.layers.addLayer(lyr))
    {
        trace("그리드 레이어 추가 실패"); 
    }
    
    var inLyr:XrShapeMapLayer = map.layers.getLayer("population") 
        as XrShapeMapLayer;
    var data:Array = XrGridMapLayer.fromShapeMapLayer(inLyr, "I05_01");
    var radius:Number = Number(tiRadius.text);
    
    lyr.kernelDensity(data, radius, callbackFunc);
}

밀도 계산은 그리드 데이터 구조를 사용하는데 이 그리드 데이터를 담고 있는 레이어가 XrGridMapLayer 클래스에 해당합니다. 10번 코드가 바로 이 그리드 레이어를 생성하고 11번 코드에서 추맵 컨트롤에 추가해 주고 있습니다. 그리드 레이어를 생성할때 사용되는 생성자는 그리드 레이어가 공간상에 차지할 영역(MBR)과 그리드 레이어를 구성하는 셀의 해상도값입니다. 밀도 계산시에 매번 그리드 레이어를 추가해 주고 있으므로 이전에 추가했던 그리드 레이어를 제거해주는 코드가 필요하므로 추가하기 이전에 제거해 주는 3~6번 코드가 필요합니다. 밀도 계산에 사용되는 데이터로써 앞서 추가한 인구분포도 레이어를 얻어오고(16번 코드) 이 레이어로부터 밀도 계산시 사용할 수 있는 데이터 구조로 구성하기 위해 XrGridMapLayer의 정적 함수인 fromShapeMapLayer를 사용합니다. 이 함수의 인자는 앞서 구한 인구분포도 레이어과 인구수를 나타내는 필드명입니다. 그리고 18번 코드에서 밀도 계산에서 사용되는 반경값을 UI를 통해 입력받은 값으로 하고.. 최종적으로 그리드 레이어의 kernelDensity 함수를 통해 밀도 계산을 수행합니다. 이 함수의 세번째 인자는 콜백함수로써 밀도 계산이 수행되는 단계 마다 호출되어 밀도 계산의 진행 상황을 표시할 수 있습니다. callbackFunc는 다음과 같습니다.

private function callbackFunc(percent:Number):void
{
    progressbar.setProgress(percent, 100);
}

앞서 추가한 ProgressBar 컨트롤에 진행률을 표시해주는 코드가 전부입니다. 이제 끝으로 밀도도 분석을 통해 표시된 결과에 대한 범례를 표시하는 범례표시 버튼의 클릭 이벤트에 대한 코드는 다음과 같습니다.

protected function onLegendClick(event:MouseEvent):void
{
    var legend:XrLegend = new XrLegend("l3");
    
    var vbox:XrVAlignLegendItemGroup = new XrVAlignLegendItemGroup();
    legend.content = vbox;
    
    var fontSym_0:XrFontSymbol = 
        new XrFontSymbol({fontName:"HY견고딕", fontSize:12});
    var text_0:XrTextLegendItem = 
        new XrTextLegendItem("범례", fontSym_0);
    text_0.centerAlign = true;
    text_0.fillParentWidth = true;
    
    vbox.addItem(text_0);
    
    var lineSym_1:XrLineSymbol = 
        new XrLineSymbol({lineColor:0x000000, lineThickness:1});
    var bar_1:XrBarLegendItem = 
        new XrBarLegendItem(true, lineSym_1);
    vbox.addItem(bar_1);
    
    var fontSym_F:XrFontSymbol = 
        new XrFontSymbol({fontName:"HY견고딕"});
    var gridLayer:XrGridMapLayer = 
        map.layers.getLayer("grid") as XrGridMapLayer;
    var chartLgd:XrDensityLegendItem = 
        new XrDensityLegendItem(gridLayer, 50, 150);
    vbox.addItem(chartLgd);
    
    legend.position.horizontalAlignment = XrRelativePosition.HORIZONTAL_ALIGN_LEFT;
    legend.position.verticalAlignment = XrRelativePosition.VERITCAL_ALIGN_TOP;
    
    map.legends.addLegend(legend);
}

레이아웃 방식으로 범례를 구성하는 코드로 듀라맵의 범례 구성 방식과 매우 유사합니다. 자세한 설명은 듀라맵의 범례 구성에 대한 글(http://www.gisdeveloper.co.kr/586)을 참고 하시기 바랍니다.

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

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

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

이제 주제도를 표현하기 위해 핑거아이즈에서 어떤 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, 통계 데이터를 이용한 주제도 작성)을 참고하시면 위의 코드를 쉽게 이해하실 수 있습니다.