DuraMap-Xr의 SpatialOperator를 이용한 공간연산 응용예

DuraMap-Xr은 Windows 기반의 Desktop GIS Application 개발을 위한 맵 엔진입니다. DuraMap-Xr의 기능 중 SpatialOperator 기능은 벡터 데이터 간의 Intersects나 Intersection과 같은 API와 단일 벡테 데이터의 Buffer 연산자와 같은 API를 제공합니다. 이러한 연산자를 이용하여 다음과 같은 기능에 DuraMap-Xr이 활용되었는데요. 간단히 소개해 봅니다.

위의 그림은 건물 레이어와 홍수범람에 대한 하천 레이어 그리고 행정구역도 레이어로 구성된 간단한 지도입니다. 건물 레이어의 건물 도형 데이터에는 인구수에 대한 속성 데이터가 조인되어 있습니다. 건물 중 홍수범람에 대한 하천 레이어의 도형과 교차(Intersects)되는 건물을 추출하고 추출된 건물에 거주하는 인구수의 총합을 계산해야 합니다. 바로 이 인구수가 홍수에 의한 피해 인구수라고 생각할 수 있습니다.

위의 UI는 위에서 설명한 기능에 대해 실제 구현한 UI입니다. 홍수피해의 결과로 4006명이 산출되었고, 피해를 받은 건물은 result.shp 파일로 저장되도록 하였습니다.

위의 이미지에서 빨간색 도형이 기능에 대한 결과로 생성된 홍수 피해를 받은 건물에 대한 레이어어 입니다. 이미지를 살펴보면, 건물이 하천 경계 도형으로 클리핑(Intersection) 처리 되어 저장된 것을 볼 수 있습니다.

DuraMap-Xr은 우리가 흔히 알고 있는 지도 위에 도형 매쉬업이라는 단순한 기능에서 한발 더 나아가 각 도형들간의 관계와 연산을 통해 더욱 의미 있는 결과를 생성해 내는 GIS 엔진입니다.

Node.js 정리

자바스크립트로 서버 어플리케이션을 개발할 수 있는 Node.js는 다음과 같은 특징을 갖습니다.

  • 단일 스레드 기반으로 동작함으로써 직관적이고 단순해 안정적이라고 할 수 있음. 특히 스레드간 데이터 동기화등에 대한 골치 아픈 문제가 근본적으로 없다는 점이 큰 장점이지만, 스레드에 숙련된 개발자에게는 한계가 될 수 있음
  • 단일 스레드 기반이므로 클라이언트 측의 요청에 대한 빠른 응답에 대한 처리는 비동기 IO 방식을 활용함
  • 위의 2가지의 특징과 자바스크립트라는 한계로 인해 서비스 내용을 생성하는데 아주 짧은 시간을 필요로 하는 경우에 대한 서버 개발에 알맞음. 즉, CPU에 너무 많은 부하를 주는 연산이 아닌 간단하고 명료한 서비스에 적합함. 간단하고 명료하다는 기준은 서버의 사양 등에 따라 매우 상대적임.
  • 흔히 Node Application이라고 하는 것은 Node.js로 개발한 서버 프로그램을 언급하는 것임
  • npm이라는 기능을 통해 Node.js의 확장기능을 추가로 설치할 수 있는데, 확장 기능의 개발과 npm과 같은 손쉬운 추가 방식은 Node.js의 장점 중 특장점이라고 할 수 있음

뭐 일단, 이제는 내 스스로에게 상당히 친숙하고 호감도가 높아진 자바스크립트라는 언어를 통해 서버를 개발할 수 있다는 점에서 Node.js는 충분히 매력적이라고 할 수 있는데요. 특히 스크립트이기 때문에 소스코드를 변경하면 바로 해당 변경 내용을 쉽게 배포할 수 있다는 점이 가장 매력적이라고 할 수 있습니다. 게다가 퍼포먼스 적인 측면에서 V8이라는 자바스크립트 엔진을 사용함으로써 생각 이상으로 상당히 뛰어나다라는 평가 역시 매우 큰 장점입니다. 몇가지 Node.js에 대한 간단한 샘플 코드를 통해 웹상에서 수집한 Node.js에 대한 내용을 정리해 보겠습니다.

먼저 가장 간단한 Node.js의 샘플 코드입니다.

var http = require('http');

http.createServer(
  function(request, response) {
    response.writeHead(200, { 'Content-Type' : 'text/plain' });
    response.write("Hello, I am a Korea! GIS Developer.");
    response.end();
  }
).listen(8888);

위의 코드는 8888 포트를 통해 HTTP 서버(웹서버) 기능을 가진 프로그램 코드로 클라이언트에게 고정된 문서를 서비스하는 코드입니다.

다음은 URL을 통한 QueryString을 받아 해석하는 코드입니다.

var http = require('http');
var url = require('url');

var server = http.createServer();

server.addListener('request', function(request, response) {
  console.log('requested ...');

  response.writeHead(200, {'Content-Type' : 'text/plain'} );
  var parseUrl = url.parse(request.url, true);
  //var pathname = parseUrl.pathname;
  var query = parseUrl.query;
 
  response.write("a for QueryString : " + query.a);
  response.end();
});

server.listen(8888);

QueryString으로 a=123으로 주었을 경우, a for QueryString : 123 과 같은 문서를 서비스할 것입니다. 주석으로 처리된 pathname은, 예를 들어 http://www.gisdeveloper.co.kr:8888/Hello?a=133과 같은 URL 호출일 경우 Hello가 됩니다.

다음은 POST 방식을 통한 호출에 대한 코드 예입니다.

http = require('http') ,qs = require('querystring');

http.createServer(function (req, res) {
  if( req.url == '/' && req.method == 'POST'){
    var postBody = '';

    req.on('data', function (data) {
      postBody += data;
    });

    req.on('end', function () {
      var post = qs.parse(postBody);
      //post데이터확인
      console.log(post['postname']);
    });

    res.end('true');
  } else {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end('404 ERROR');
}
}).listen(8888);

끝으로 Node.js와 DBMS 연동에 대한 코드인데요. DBMS는 MongoDB로써 Node.js는 MongoDB와의 연동을 위해 Mongoose 모듈을 사용합니다. 이 Mongoose는 npm을 통해 설치할 수 있습니다. 참고로 버전 2.7대의 파이션이 필요합니다.

var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/myDB');

var db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback() {
  console.log('open');
});

var userSchema = mongoose.Schema({
  username: 'string',
  age: 'number'
});

var User = mongoose.model('User', userSchema);

var user1 = new User({ username: 'gchoi', age: 30 });
var user2 = new User({ username: 'jmpark', 'age': 29 });

user1.save(function (err, user1) {
  if(err) 
    console.log('error');
});

user2.save(function (err, user2) {
  if(err)
    console.log('error');
});

이상으로 예제 코드를 중심으로한 Node.js에 대한 내용을 정리해 보았습니다.

제대로 ‘잘’ 만들기

사용자 삽입 이미지

기본적으로는 매우 당연한 사실인데.. 오랜 기다림과 과정 속에서 이러한 기본적인 것이 왜곡되어 잊어지는 경우가 있는 것 같다. 다른 새로운 도전과 기회의 탐닉도 필요할테지만(과연, 그럴까?).. 최소한 이러한 기본적인 생각을 기반으로 무엇이든 해야 하지 않겠는가. 다 필요없다. 오직 ‘제대로’ 만들어 보자. 사실 ‘제대로’ 만들기 보다 더 어려운 것이 있을까? ‘제대로’ 만들지 못하다보니.. 이런 저런 잡념과 샛길이 생기지 않나 싶다. 그래, 제대로 ‘잘’ 만들어 보자 ㅡ !

웹 애니메이션 3/3 ㅡ requestAnimationFrame 활용 방식

웹에서 애니메이션을 구현하는 세번째 방식은 javascript 코드를 사용해 애니메이션될 객체의 속성의 변경하는 것으로써 requestAnimationFrame API를 이용해 속도를 향상시키는 방식입니다. requestAnimationFrame API가 제공되기 이전에는 타이머를 사용하였으나, 이 타이머는 불확실하고 느리다는 단점이 있어 현재는 사용하지 않습니다. (아.. 한게임 하고 왔더니 머리가 띵… 하네.. @_@;) 아래는 이 requestAnimationFrame 함수를 이용한 애니메이션에 대한 예입니다.

[xyz-ihs snippet=”requestAnimation”]

SVG를 사용했고 path를 이용해 도형을 구성하였습니다. 도형의 선형 대쉬 스타일인 strokeDashOffset 속성을 주기적으로 변경함으로써 매치 행군하는 벌레 애니메이션을 구현할 수 있습니다. 이 예에 대한 코드를 살펴 보겠습니다.

먼저 svg와 도형에 대한 path 정의입니다.


    

path에 chain_st라는 클래스가 지정되어 있습니다. chain_st 클래스는 다음과 같습니다.

.chain_st {
    stroke-width: 1;
    stroke: #f00;
fill: transparent;
}     

svg {
    width:100%;
} 

단순히 path의 선굵기과 색상, 그리고 채움색은 투명으로 지정하고 있습니다. 덧붙여 svg의 폭을 현제 부모 너비를 꽉 채우도록 7~9번 코드에서 지정하고 있습니다.

이제 애니메이션 코드인데, 아래와 같습니다.

var p = document.querySelector('.chain_st'),
offset = 5;

var offsetMe = function () {
    if (offset < 0) offset = 5;
    p.style.strokeDashoffset = offset;
    offset--;

    requestAnimationFrame(offsetMe);
}

offsetMe();

offsetMe 함수를 호출할때마다 strokeDashOffset의 값을 변경하고 있는 6번 코드를 주목하기 바랍니다. 이 offsetMe 함수는 requestAnimationFrame API를 통해 주기적으로 호출됩니다.

웹 애니메이션 2/3 ㅡ keyframe animation 방식

웹에서 애니메이션을 제공하는 방식 중 두번째는 Keyframe 개념으로 접근하는 것입니다. 이는 전체 애니메이션을 100%라고 할때 각 단계마다 애니메이션될 속성값을 지정해 주는 방식으로써 그 중간 화면은 자동으로 계산해 줍니다. 아래의 화면은 Key frame Animation 방식을 사용한 애니메이션에 대한 화면입니다.

[xyz-ihs snippet=”keyframe-Animation”]

위의 화면에 대한 예를 통해 키프레임 애니메이션을 정리해 보겠습니다.

가장 먼저 움직이는 노란 사각형에 대한 div에 대한 코드입니다.

이 div의 클래스는 box인데, 아직 크기와 색상과 같은 스타일이 지정되지 않은 상태이므로 이 box 클래스에 해당 스타일을 아래처럼 지정합니다.

    .box {
        width: 100px;
        height: 100px;
        background: #ffd800;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);

        animation-name: movingBox;
        animation-duration: 2300ms;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

2~5번가지의 코드가 div의 크기와 색상 그리고 그림자에 대한 스타일 지정입니다. 7~10번 코드는 키프레임 애니메이션에 대한 스타일입니다. 7번 코드는 구체적인 키프레임에 대한 아이디값이고, 8번은 애니메이션이 진행되는 시간을 2.3초로 지정했으며, 9번은 무한반복, 10번은 무한반복시 반복방향을 지정하는 코드입니다. 이제 7번에서 지정한 키프레임에 대한 아이디인 movingBox에 대한 정의는 다음과 같습니다.

@keyframes movingBox {
    0% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    25% {
        opacity: 0.9;
    }

    50% {
        transform: translate(400px, 0);
        opacity: 0.2;
    }

    100% {
        transform: translate(100px, 0);
        opacity: 0.8;
    }
}

코드를 살펴보면, 초기단계(0%)와 1/4지점(25%) 그리고 중간지점(50%) 및 끝지점(100%)의 상태에서의 위치와 투명도를 지정함으로써, 각 단계의 중간결과를 자동으로 계산하여 애니메이션이 이루어지도록 하고 있습니다.