JavaScript – GIS Developer

모던한(?).. 즉 현대적인 Javascript에서는 클래스를 정의하기 위한 class 키워드를 제공하기는 하지만, 현재의 IE에서 아직도 지원하지 않아 나름대로의 class 정의 방식을 사용하고 있습니다. 웹 기반의 GIS 엔진인 FingerEyes-Xr도 이러한 class 정의 방식으로 개발 되었습니다. 수백여개의 클래스를 이 방식으로 정의해 왔음에도 새로운 클래스를 정의할라치면 기존에 만들어진 소스를 Copy 해서 Paste 해 고치는 것이 세련미 떨어져.. 직접 키보드로 한땀 한땀 입력하고자 정리해 봅니다.

먼저 클래스 정의하는 최소한의 구문입니다.

MyClass = Xr.Class({
    /* name: "MyClass", */ // optional

    construct: function () { /* 생성자 */ }
});

MyClass = Xr.Class({

/* name: "MyClass", */ // optional

construct: function () { /* 생성자 */ }

});

private 변수를 추가하는 구문입니다. 반드시 생성자 안에서 밑줄(_)로 시작해서 정의합니다.

MyClass = Xr.Class({
    construct: function () {
        this._privateVariable = 0;
    }
});

MyClass = Xr.Class({

construct: function () {

this._privateVariable = 0;

}

});

맴버 함수를 추가하는 구문입니다. private는 밑줄로 시작하고, public은 밑줄이 아닌 영문 소문자로 시작합니다.

MyClass = Xr.Class({
    construct: function () {},

    methods: {
        _privateFunction: function() { },
        publicFunction: function() { },
    }
});

MyClass = Xr.Class({

construct: function () {},

methods: {

_privateFunction: function() { },

publicFunction: function() { },

}

});

클래스 차원에서 접근할 수 있는 static 변수 정의입니다. 아래와 같다면, MyClass.STATIC_VARIABLE의 값은 0이 됩니다.

MyClass = Xr.Class({
    statics: {
        STATIC_VARIABLE: 0
    },

    construct: function () {}
});

MyClass = Xr.Class({

statics: {

STATIC_VARIABLE: 0

construct: function () {}

});

[ToDo] 상속, 인터페이스에 대한 내용은 추후 필요하면 그때 정리할 것

JavaScript 언어를 이용해 SVG에 PieChart를 위한 도형을 생성하기 위한 코드를 함수로 정리해 둡니다. 최종 결과는 아래처럼 4개의 항목으로 구성된 가운데 구멍이 뚫린 모양입니다.

먼저 아래처럼 svg와 PieChart를 구성하는 4개의 항목을 path로 지정해 둡니다. (실제 활용시에는 이 부분을 모두 JavaScript 코드로 동적 생성하도록 해야 합니다)

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <path id="arc1" fill="#90caf9"></path>
    <path id="arc2" fill="#a5d6a7"></path>
    <path id="arc3" fill="#ffe082"></path>
    <path id="arc4" fill="#a1887f"></path>
</svg>

</svg>

위의 4개의 path에 대해 각각 파이차트의 구성 요소로 만들어 주는 함수는 아래와 같습니다.

function toPieChartItemPath(x, y, radiusIn, radiusOut, startAngle, endAngle) {
    function _toXY(cX, cY, r, degrees) {
        var rad = (degrees) * Math.PI / 180.0;

        return {
            x: cX + (r * Math.cos(rad)),
            y: cY + (r * Math.sin(rad))
        };
    }

    var startIn = _toXY(x, y, radiusIn, endAngle);
    var endIn = _toXY(x, y, radiusIn, startAngle);

    var startOut = _toXY(x, y, radiusOut, endAngle);
    var endOut = _toXY(x, y, radiusOut, startAngle);

    var arcSweep = (endAngle - startAngle) <= 180 ? "0" : "1";

    var d = [
        "M", startIn.x, startIn.y,
        "L", startOut.x, startOut.y,
        "A", radiusOut, radiusOut, 0, arcSweep, 0, endOut.x, endOut.y,
        "L", endIn.x, endIn.y,
        "A", radiusIn, radiusIn, 0, arcSweep, 1, startIn.x, startIn.y,
        "z"
    ].join(" ");

    return d;
}

function toPieChartItemPath(x, y, radiusIn, radiusOut, startAngle, endAngle) {

function _toXY(cX, cY, r, degrees) {

var rad = (degrees) * Math.PI / 180.0;

return {

x: cX + (r * Math.cos(rad)),

y: cY + (r * Math.sin(rad))

};

}

var startIn = _toXY(x, y, radiusIn, endAngle);

var endIn = _toXY(x, y, radiusIn, startAngle);

var startOut = _toXY(x, y, radiusOut, endAngle);

var endOut = _toXY(x, y, radiusOut, startAngle);

var arcSweep = (endAngle - startAngle) <= 180 ? "0" : "1";

var d = [

"M", startIn.x, startIn.y,

"L", startOut.x, startOut.y,

"A", radiusOut, radiusOut, 0, arcSweep, 0, endOut.x, endOut.y,

"L", endIn.x, endIn.y,

"A", radiusIn, radiusIn, 0, arcSweep, 1, startIn.x, startIn.y,

"z"

].join(" ");

return d;

}

이 함수의 인자를 설명하면, x와 y는 파이 차트의 중심점이고 radiusIn과 radiusOut은 파이차트의 내부 반지름과 외부 반지름 값입니다. 그리고 startAngle와 endAngle는 시작각도(3시 방향이 0도)와 종료각도(시계방향)입니다. 이 함수를 통해 앞서 구성한 svg와 path 요소를 파이차트로 구성하는 코드는 아래와 같습니다.

document.getElementById("arc1").setAttribute("d", 
    toPieChartItemPath(250, 250, 100, 240, 0, 45));

document.getElementById("arc2").setAttribute("d", 
    toPieChartItemPath(250, 250, 100, 240, 45, 90));

document.getElementById("arc3").setAttribute("d", 
    toPieChartItemPath(250, 250, 100, 240, 90, 180));

document.getElementById("arc4").setAttribute("d", 
    toPieChartItemPath(250, 250, 100, 240, 180, 360));

document.getElementById("arc1").setAttribute("d",

toPieChartItemPath(250, 250, 100, 240, 0, 45));

document.getElementById("arc2").setAttribute("d",

toPieChartItemPath(250, 250, 100, 240, 45, 90));

document.getElementById("arc3").setAttribute("d",

toPieChartItemPath(250, 250, 100, 240, 90, 180));

document.getElementById("arc4").setAttribute("d",

toPieChartItemPath(250, 250, 100, 240, 180, 360));

카테고리: JavaScript

JavaScript의 Class 정의 정리

[JavaScript] SVG로 PieChart를 위한 도형 그리기