[OpenLayer3] postcompose 이벤트를 이용한 동적 지도 표현

ol3에서는 PostCompose라는 매서드를 제공하는데요. 이 매서드는 지도를 모두 그린(구성) 후에 발생하는 이벤트로, 이 이벤트를 활용하면 지도 상에서 다양한 동적인 그래픽 표현이 가능합니다. 이러한 지도 상의 동적인 그래픽 표현에 대한 맵 페이지를 살펴보면 아래와 같습니다.

위의 웹 페이지를 보면 Open Street Map을 기본 배경지도로 하고, 이 배경지도 위에 노란색 원이 움직이는 애니메이션을 볼 수 있습니다. 위의 지도 페이지를 어떻게 구현하였는지 코드를 살펴보면…

먼저 필요한 외부 css 및 js 라이브러리를 페이지에 포함합니다.

다음으로 UI를 살펴 보겠는데요. 다음처럼 지도를 표시하기 위한 div 하나가 필요합니다.

이제 필요한 라이브러리와 UI가 준비되었으므로, 스크립트 코드를 살펴 보겠습니다. 웹 페이지 로딩이 완료되면 호출되는 jQuery의 ready 이벤트를 아래처럼 만들어 둡니다.

$(function() {
    ....
});

위의 코드 중 ….에 앞으로 설명할 코드를 추가합니다. 먼저 아래의 코드를 추가하여 지도 표시를 위한 지도 객체를 생성하고, 이 지도를 구성하는 레이어로 ol.source.OSM 클래스를 통해 오픈스트리트맵을 추가합니다. 또한 초기 지도뷰 좌표를 (0,0)으로 하고 줌 레벨을 2로 설정합니다.

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

다음은 지도 상에 원들이 움직이고 있는데.. 이 원에 대한 그리기(draw) 스타일을 위한 스타일 객체를 생성해 둡니다.

var imageStyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({ color: 'yellow' }),
        stroke: new ol.style.Stroke({ color: 'red', width: 1 })
    })
});

지도를 그리는 렌더링(render)이 완료되면 postcompose라는 이벤트가 발생합니다. 이 이벤트는 벡터 데이터를 구성하여 표현할 수 있는 context를 이벤트 인자로 전달하는데요. 이 vectorContext 객체를 통해 다양한 지오메트리(Geometry)를 구성할 수 있습니다. 아래의 postcompose 이벤트 함수로 등록된 코드를 먼저 살펴보겠습니다.

map.on('postcompose', function (event) {
    var n = 178;
    var omegaTheta = 30000; // Rotation period in ms
    var R = 7e6;
    var r = 2e6;
    var p = 2e6;
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    var theta = 2 * Math.PI * frameState.time / omegaTheta;
    var coordinates = [];
                
    for (var i = 0; i < n; ++i) {
        var t = theta + 2 * Math.PI * i / n;
        var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
        var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
        coordinates.push([x, y]);
    }

    vectorContext.setStyle(imageStyle);
    vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));

    map.render();
});

먼저 7번 코드의 vectorContext 객체는 앞서 언급한 지오메트리를 그리기 위한 API를 제공합니다. 19번 코드에서 setStyle 함수에 앞서 정의해 둔 스타일 객체인 imageStyle을 인자로 전달해 스타일을 지정하고 20번 코드에서 지오메트리의 구성 좌표와 지오메트리의 타입에 대한 객체를 drawGeometry 함수에 전달하면 화면에 해당 지오메트리가 그려지게 됩니다. 애니메이션은 시간의 흐름에 따라 그 상태가 변경되어야 하는데, 시간의 흐름은 8번과 9번 코드의 frameState의 time으로 제어할 수 있습니다. 중요한 키 포인트는 시간의 흐름에 따라 지오메트리의 구성 좌표를 변경하여 다시 그려주기를 반복하면 애니메이션 효과가 나타나게 됩니다. 다시 그려주라는 명령은 22번 코드의 map.render() 함수입니다.

다음은 지금까지 작성된 전체 코드에 대한 다운로드입니다.

답글 남기기 응답 취소