[카테고리:] FingerEyes-Xr

(주의) 이 글은 현재 핑거아이즈의 Bridge Edit 방식을 설명한 글입니다. 코드 작성을 위한 효율성을 목적으로 이 글의 내용이 실제 API와 달라질 수 있습니다. 이 글은 FingerEyes-Xr 버전 2.7을 기준으로 합니다.

핑거아이즈(FingerEyes-Xr)는 웹에서 공간 데이터를 편집할 수 있는 강력한 기능을 지원합니다. 편집에 대한 Undo/Redo는 물론 Vertex와 Segment에 대한 스냅핑(Snapping) 기능을 지원함으로써 편집에 대한 편리성을 사용자에게 제공합니다.

핑거아이즈는 공간 데이터 편집에 대해서 Direct Edit 방식과 Bridge Edit 방식을 제공합니다. Direct Edit은 공간 데이터를 편집하면 곧바로 DBMS에 반영되는 방식이고 Bridge Edit 방식은 편집된 공간 데이터를 곧바로 DBMS에 저장하지 않고 저장하기 중간 단계에 사용자의 확인을 통해 저장하는 방식입니다. Direct Edit 방식은 Bridge Edit 방식에 비해 개발이 쉽다는 장점이 있으나 편집을 위해 사용자의 계정 정보가 필요하다는 번거로움이 있습니다.

편집 대상이 되는 공간 데이터는 DBMS에 저장되어 있으며 실제 공간 데이터를 사용자에게 보여주기 위해 레이어(Layer)라는 개념을 통해 표현됩니다. DBMS에 연계된 공간 데이터에 대한 레이어가 XrShapeMapLayer입니다. Direct Edit 방식은 이 XrShapeMapLayer에 대해 바로 편집하며 DBMS에 반영시키는 것입니다. 이 글에서 설명할 Bridge Edit 방식은 XrShapeMapLayer를 바로 편집하는 것이 아니라 XrMashupLayer를 브리지(Bridge) 개념으로 하여 원하는 형태의 정보로 편집이 끝나면 DBMS에 반영하는 방식입니다.

이 포스트는 Bridge Edit 방식을 통해 공간 데이터를 편집하기 위한 내용을 정리한 글입니다.

먼저 편집할 공간 데이터에 대한 XrShapeMapLayer와 브리지(Bridge) 역활을 XrMashupLayer가 필요합니다. XrShapeMapLayer에 해당하는 객체를 _shapeLyr이라고 하고 XrMashupLayer에 해당하는 객체를 _mashupLyr이라고 하면 편집을 위한 초기화 코드는 다음과 같습니다.

_map.edit.targetLayer = _mashupLyr;
_map.addEventListener(XrMapMouseEvent.XRMAP_MOUSE_CLICK_EVENT, onMapClick);
_map.addEventListener(
    XrEditFeatureAddedNewEvent.XR_EDIT_FEATURE_ADDED_NEW_EVENT, onAddNewEvent);
_map.edit.editMode = false;

이러한 초기화 이후에 편집 기능을 구현할 수 있으며, 편집은 다음과 같은 기능으로 분류할 수 있습니다.

1. 새로운 도형 추가
2. 기존 도형의 편집
3. 기존 도형의 삭제

1. 새로운 도형 추가

새롭게 편집할 도형이 포인트라고 할때, 새로운 도형포인트을 추가하기 위한 시작 코드는 다음과 같습니다.

_map.edit.editMode = true;
_mashupLyr.removeAllMashups();
_map.edit.addPoint(0);

위의 코드를 통해 사용자는 지도 위에 도형을 새롭게 그릴 수 있고 도형 그리기가 완료되면 편집을 위한 초기화 코드에서 추가한 이벤트인 XR_EDIT_FEATURE_ADDED_NEW_EVENT에 대한 실행 함수인 onAddNewEvent가 실행됩니다. 기본적인 편집에서는 이 이벤트에 코드를 추가할 필요가 없으나 만약 필요하다면 코드를 추가할 수 있으며 이 글에서는 사용하지 않습니다. 이렇게 새롭게 추가된 도형을 DBMS에 저장하는 코드는 다음과 같습니다.

var svc:XrService;
var params:Object;
svc = new XrQueryTableService(
    Global.GIS_SERVER, "mssqlserver", onFIDQueryCompleted, onFIDQueryError);
if(!svc.run({cache: false, sql: "SELECT (MAX(FID)+1) FID FROM SpatialDBTBL"}))
{
    mx.controls.Alert.show("FID Query invoke error");
}

위의 코드는 새롭게 추가된 공간데이터를 저장하기 전에 Feature ID를 얻기 이한 코드입니다. 새로운 Feature ID를 계산하는 방법은 다양하지만 여기서는 기존 ID 값중 최대값에 대해 +1 인 값을 사용하는 방법을 활용했습니다. Feature ID 값을 제대로 얻어오게 되면 onFIDQueryCompleted 함수가 호출하며 다음과 같습니다.

private function onFIDQueryCompleted(result:String):void
{
    XML.ignoreWhitespace = true;
    var xml:XML = new XML(result);
    var rows:XMLListCollection = new XMLListCollection(xml.row);
    var cntRows:int = rows.length;
    var fid:int;
 
    if(cntRows == 1) 
    {
        fid = parseInt(rows[0].FID);
    }
    else 
    {
        mx.controls.Alert.show("FID is Nothing, Error"); 
        return;
    }

    var svc:XrService = new XrUpdateShapeMapFromMashupService(
        _map.edit, _shapeLyr, _mashupLyr, onNewUpdateCompleted, onUpdateFail);
    var params:Object = { targetId:fid, sourceId:0 /*, attributes:attrs*/ };
   
    if(!svc.run(params)) 
    {
        mx.controls.Alert.show(
            "XrUpdateShapeMapFromMashupService params are invalid.");
    }     
}
   
private function onFIDQueryError():void
{
    trace("ERROR : FID Query");
}

실제 DBMS에 반영하기 위해서 XrUpdateShapeMapFromMashupServer를 사용합니다. 성공적으로 DBMS에 반영이 되면 onUpateCompleted가 실행되며 실패하면 onUpdateFail이 실행됩니다. 이 두 함수는 다음과 같습니다.

protected function onNewUpdateCompleted():void
{
    _map.edit.selectNone();
    _map.edit.editMode = false;
    _map.edit.editHistoryReset();
    _mashupLyr.removeAllMashups();

    _map.update();
}
   
protected function onUpdateFail(msg:String):void
{
    mx.controls.Alert.show("EDIT ERROR: " + msg);
}

2. 기존 도형의 편집

다음은 기존 도형을 편집하는 기능에 대한 내용을 살펴보겠습니다. 먼저 기존 도형을 편집하겠다는 시작 코드(CODE-A)는 다음과 같습니다.

_mashupLyr.removeAllMashups();
_map.edit.editMode = false;
_map.edit.editHistoryReset();

위의 코드는 편집하고자 하는 기존 도형을 마우스로 선택하기 위해 편집 모드를 false로 지정한 것입니다. 앞서 편집을 위한 초기화 코드 중에서 XRMAP_MOUSE_CLICK_EVENT 이벤트에 대한 호출 함수인 onMapClick를 등록하였습니다. 이 onMapClick 함수에서 마우스로 클릭한 지점에 존재하는 도형의 Feature ID를 얻습니다.

protected function onMapClick(event:XrMapMouseEvent):void
{
    var clickX:Number = event.mouseEvent.localX;
    var clickY:Number = event.mouseEvent.localY;
    var fid:int = _shapeLyr.getFIDByMousePoint(x, y);
    
    if(fid != -1)
    {
        var shp:IXrShape = _shapeLyr.shapeSet.rows[fid];
        var point:XrPointShape = shp as XrPointShape;
        if(point != null)
        {
            _map.edit.selectNone();
            _map.edit.editHistoryReset();

            if(_mashupLyr.getMashup(0) != null) _mashupLyr.removeAllMashups();

            var coord:XrCoordinate = 
                new XrCoordinate(point.points[0].x, point.points[0].y);
            var mashup:IXrMashup = new XrMarkerMashup(0, coord, false);
    
            mashup.lineSymbol = new XrLineSymbol();
            mashup.fillSymbol = new XrFillSymbol();
            mashup.markerSymbol = new XrRectangleMarkerSymbol();

            _mashupLyr.addMashup(mashup);
            _mashupLyr.updateItem(0, false);

            var attr:XrAttribute = _shapeLyr.attributeSet.rows[fid];
      
            _map.edit.setSketch(0);
        }
    }
}

위의 코드를 통해 마우스로 편집하고자 하는 도형을 선택할 수 있으며 편집할 수 있습니다. 단, 다른 도형을 선택하기 위해서는 다시 기존 도형을 편집하겠다는 시작 코드(CODE-A)를 다시 실행해 줘야 합니다. 이 부분이 Birdge Edit 방식의 단점 중 하나입니다. 이렇게 편집된 내용을 실제 DBMS에 저장하기 위해 다음 코드의 실행이 필요합니다.

svc = new XrUpdateShapeMapFromMashupService(
    _map.edit, _shapeLyr, _mashupLyr, onModifyUpdateCompleted, onUpdateFail);

params = { targetId:_targetFid, sourceId:0/*, attributes:_attrs*/ };

if(!svc.run(params)) 
{
    mx.controls.Alert.show(
        "XrUpdateShapeMapFromMashupService's params are invalid.");
}

성공적으로 편집한 내용이 DBMS에 반영되 onModifyUpdateCompleted가 호출됩니다.

protected function onModifyUpdateCompleted():void
{
    _shapeLyr.shapeSet.removeRow(_targetFid);
    _shapeLyr.attributeSet.removeRow(_targetFid);
 
    _map.edit.selectNone();
    _map.edit.editMode = false;
    _map.edit.editHistoryReset();
    _mashupLyr.removeAllMashups(); 
    _map.update();
}

3. 기존 도형의 삭제

이제 끝으로, 선택된 도형을 삭제하는 방법에 대해 살펴보겠습니다.

삭제할 도형을 선택하는 방법은 편집하고자 하는 도형을 선택하는 것과 동일하며, 일단 선택된 상태에서 다음 코드를 실행하면 삭제됩니다.

var svc:XrUpdateShapeMapFromMashupService = new XrUpdateShapeMapFromMashupService(
    _map.edit, _shapeLyr, _mashupLyr, onModifyUpdateCompleted, onUpdateFail);
     
var params:Object = {targetId:_targetFid, removal:true };
     
if(!svc.run(params)) 
{
    mx.controls.Alert.show("params are invalid.");
}

Direct Edit는 DBMS에 편집한 내용을 반영하기 전까지 여러개의 공간도형을 편집할 수 있습니다. 그러나 Bridge Edit는 Direct Edit와 다르게 오직 하나의 공간도형에 대해서 편집을 할 수 있고 다른 공간 도형을 편집하기 전에 DBMS에 반영을 시켜야 합니다. 편집 이력에 대해서는 DBMS에 반영되기 전까지만 Undo/Redo가 가능하므로 Direct Edit이 Bridge Edit에 비해 더 많은 공간 데이터에 대해서 반영이 가능합니다.

수치지도 데이터를 서비스 받아 화면에 표시하는 레이어인 XrShapeMapLayer는 도형 데이터를 표현하는 다양한 방법을 제공합니다. 단순히는 일괄적인 색상 심벌에서부터, 속성값에 따라 달라지는 다양한 심벌에까지.. 이 포스트는 포인트 타입의 수치지도 데이터에 대해서 이미지 심벌을 지정하는 코드 예입니다.

layer = new XrShapeMapLayer("LAYER_NAME", "http://www.gisdeveloper.co.kr/Xr?layerName=SPTBL");
shpTheme = layer.theme as XrSingleColorTheme;
 
var ImgSym:XrImageMarkerSymbol = new XrImageMarkerSymbol(   
    {borderEnable:false, markerUrl:"http://www.gisdeveloper.co.kr/images/0.png"});

shpTheme.markerSymbol = ImgSym;

map.layers.addLayer(layer);

포인트 타입의 수치지도의 경우 원, 사각형 등과 같은 단순 도형에서부터 위의 글에서처럼 이미지 뿐만 아니라 특수 기호 표시를 위한 텍스트 심벌을 지원합니다.

핑거아이즈는 공간서버인 지오서비스(GeoService-Xr)의 지오프로세싱(Geoprocessing) 서비스를 통해 지오메트리의 버퍼 연산을 수행할 수 있습니다. 아래의 코드는 레이어의 구성 항목 중 하나의 도형에 대해 버퍼 반경값 10으로 하여 버퍼 연산을 수행하는 코드입니다.

var ml:XrMashupLayer = _map.layers.getLayer("myLyr") as XrMashupLayer;
var mashup:IXrMashup = ml.getMashup(0);
if(mashup != null)
{
    var wkt:IXrWKT = mashup as IXrWKT;
    var strKwt:String = wkt.toWKT();
    var loader:URLLoader = new URLLoader();
    var url:String = "http://www.gisdeveloper.co.kr/Gp?command=buffer;geometry=" 
        + strKwt + ";distance=10";
    var request:URLRequest = new URLRequest(url);

    loader.addEventListener(Event.COMPLETE, onBufferRequestCompleted);
    loader.load(request);			
}

1번과 2번 코드를 통해 버퍼 연산 대상이 되는 도형을 가져옵니다. 그리고 이 도형에 대한 지오메트리 정보를 WKT 형식으로 변환하는 코드가 5~6번 코드입니다. 마지막으로 7~13번 코드를 통해 공간서버로 요청을 날립니다. 아래의 이미지는 버퍼 연산의 대상이 되는 도형입니다.

버퍼 연산 서비스를 요청하고 그 결과는 onBufferRequestCompleted 함수를 통해 전달되며 다음과 같은 예로 구성될 수 있습니다.

private function onBufferRequestCompleted(event:Event):void
{
    var loader:URLLoader = event.target as URLLoader;
    var result:String = loader.data;				
    var ml:XrMashupLayer = 
        _map.layers.getLayer("myLyr") as XrMashupLayer;
    var mashup:IXrMashup = ml.getMashup(0);
    if(mashup != null)
    {
        var wkt:IXrWKT = mashup as IXrWKT;
        wkt.fromWKT(result);
        ml.updateItem(0, false);
    }

    loader.removeEventListener(Event.COMPLETE, onBufferRequestCompleted);
}

버퍼 연산 결과에 대한 지오메트리 역시 WKT 형식입니다. 연산 결과를 다시 대상이 되는 도형에 반영하고 있습니다. 그 결과는 다음과 같습니다.

Geometry로 Feature를 가져온다는 의미는 임의의 지오메트리와 공간상에서 교차하는 Feature를 가져온다는 의미입니다. 임의의 지오메트리이므로 폴리곤, 폴리라인, 포인트 등 제약이 없습니다. 기준 지오메트리는 WKT 형식으로 쉽게 지정할 수 있습니다. 다음은 지정한 폴리라인과 교차하는 Feature를 서버측으로부터 가져오라는 코드 예입니다.

var pnuLyr:XrShapeMapLayer = map.layers.getLayer("JIBUN") as XrShapeMapLayer;
if(pnuLyr != null)
{
    var bOK:Boolean = pnuLyr.queryByGeometry(
        "LINESTRING(250661 54225, 250343 53233)",
        true,
        callback);

    if(!bOK)
    {
        // Error !
    }
}

대상이 되는 레이어를 1번 코드를 통해 가져옵니다. 속성과 도형에 대한 기능이므로 XrShapeMapLayer만이 가능합니다. 그리고 4번에서 queryByGeometry 매서드를 통해 쿼리 합니다. 첫번째 인자는 기준 지오메트리로써 WKT 형식으로 지정합니다. 그리고 두번째 인자는 도형 데이터 뿐만 아니라 속성 데이터까지 가져오라는 의미입니다. 그리고 세번째 인자는 공간 데이터 쿼리가 완료되었을때 발생하는 콜백함수이며 아래는 그 예입니다.

private function callback(arg:XrSpatialQueryResult):void  
{   
    if(arg != null)   
    {   
        var shp:IXrShape = null;   
        var shapes:Object = arg.shapeSet.rows;   
        for each(shp in shapes)   
        {   
            var attribute:XrAttributes =    
                arg.attributeSet.rows[shp.fid] as XrAttribute;   
            if(attribute != null)   
            {   
                trace(shp.centroid.x + " " + shp.centroid.y    
                    + " " + attribute.getValueAsString(1));   
            }   
        }   
    }   
    else  
    {   
        // 아무것도 오질 않았음..   
    }   
}  

서버 측으로 받은 결과에서 도형의 중심점과 2번째 속성값만을 확인하는 예입니다.