[GIS] FingerEyes, 마우스를 통한 매쉬업

사용자 삽입 이미지 실행 결과 보기 및 소스 코드 다운로드

이 글은 사용자가 마우스를 이용해 매쉬업할 항목을 직접 그리는 핑거아이즈의 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();
}

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

답글 남기기 응답 취소