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() 함수입니다.
다음은 지금까지 작성된 전체 코드에 대한 다운로드입니다.
