GIS Developer

FingerEyes-Xr의 공간 데이터 편집시 발생하는 이벤트는 1개입니다. Xr.Events.EditingCompleted로 사용자가 선택한 도형을 편집한 뒤에 발생하는 이벤트입니다. 등록은 다음과 같습니다.

map.addEventListener(Xr.Events.EditingCompleted, onMapEditingCompleted);

그리고 이벤트에 대한 콜백 함수인 onMapEditingCompleted 함수는 아래와 같이 작성할 수 있습니다.

function onMapEditingCompleted (e) 
{
    let map = e.map;
    let type = e.editCommandType;
    let rowId = e.rowId;

    if(type === Xr.edit.AddPartCommand.TYPE) {
        // 여러 개의 요소를 갖는 도형에 대해 1개의 새로운 요소가 추가될 때 ...
    } else if(type === Xr.edit.AddVertexCommand.TYPE) {
        // 도형에 대해 정점이 하나 추가될 때 ...
    } else if(type === Xr.edit.MoveCommand.TYPE) {
        // 도형 전체가 이동될 때 ...
    } else if(type === Xr.edit.MoveControlPointCommand.TYPE) {
        // 도형의 제어점이 이동되었을 때 ...
    } else if(type === Xr.edit.NewCommand.TYPE) {
        // 새로운 도형이 생성되었을 때 ...
    } else if(type === Xr.edit.RemoveCommand.TYPE) {
        // 기존의 도형을 제거했을 때 ...
    } else if(type === Xr.edit.RemovePartCommand.TYPE) {
        // 도형을 구성하는 하나의 요소를 제거했을 때 ...
    } else if(type === Xr.edit.RemoveVertexCommand.TYPE) {
        // 도형을 구성하는 정점을 제거했을 때 ...
    }
}

이벤트 함수로 넘겨지는 이벤트 객체인 e의 map은 편집이 이루어진 지도 객체를 의미하며, rowId는 편집 대상이 되는 Row의 ID 값입니다. 그리고 editCommandType은 위의 코드의 if 문에서 언급한 주석의 내용일 때를 파악하기 위해 사용됩니다.

추가로, 위의 편집 이벤트를 위해 선행되어야할 것은 도형에 대한 편집 행위의 시발을 발생해줘야 한다는 것입니다. 아래는 그래픽 레이어에 사각형을 새롭게 생성하는 것에 대한 편집의 시작 코드입니다.

let gl = new Xr.layers.GraphicLayer("gl_community");

map.layers().add(gl);
map.edit().targetGraphicLayer(gl);

map.userMode(Xr.UserModeEnum.EDIT);
map.edit().newRectangle(0);

마지막 코드에서 newRectangle 함수의 인자값인 0은 새롭게 생성할 도형이 가질 id 값입니다.

만약 새로운 도형이 추가되면 onMapEditingCompleted 이벤트의 Xr.edit.NewCommand.TYPE 조건에 걸리게 되는데, 이 조건에서 추가된 도형의 상세 정보를 얻기 위한 코드 예시는 다음과 같습니다.

function onMapEditingCompleted(e) {
    let map = e.map;
    let type = e.editCommandType;
    let rowId = e.rowId;
            
    if ( ... ) {
        ...
    } else if (type === Xr.edit.NewCommand.TYPE) {
        let row = map.edit().targetGraphicLayer().row(rowId);
        let data = row.graphicData().data();

        if (data instanceof Xr.data.RectangleShapeData) {
            console.log("RECTANGLE:", data.minX, data.minY, data.maxX, data.maxY);
        } else if (data instanceof Xr.data.EllipseShapeData) {
            console.log("ELLIPSE:", data.cx, data.cy, data.rx, data.ry);
        } else if (data instanceof Xr.data.PointShapeData) {
            console.log("POINT:", data.x, data.y);
        } else if (data instanceof Xr.data.PolylineShapeData) {
            let cntParts = data.length;
            console.log("POLYLINE:");
            for (let iPart = 0; iPart < cntParts; iPart++) {
                let part = data[iPart];
                let cntVtx = part.length;
                for (let iVtx = 0; iVtx < cntVtx; iVtx++) {
                    console.log(part[iVtx].x + ", " + part[iVtx].y);
                }
            }
        } else if (data instanceof Xr.data.PolygonShapeData) {
            console.log("POLYGON:");
            let cntParts = data.length;
            for (let iPart = 0; iPart < cntParts; iPart++) {
                let part = data[iPart];
                let cntVtx = part.length;
                for (let iVtx = 0; iVtx < cntVtx; iVtx++) {
                    console.log(part[iVtx].x + ", " + part[iVtx].y);
                }
            }
        }
    } else if ( ... ) {
        ...
    }
}

마지막으로 위의 편집 이벤트가 적용된 실제 편집 기능에 대한 동영상은 아래와 같습니다.