[OpenLayers] Geolocation을 이용한 내 위치 추적하기

HTML5에서도 Geolocation를 제공하지만, 이를 좀더 쉽게 사용할 수 있도록 랩핑 클래스로써 Geolocation를 제공합니다. ol의 Geolocation에 대한 API를 정리합니다. 먼저 html 코드는 아래와 같습니다.



    
        
        OpenLayers

Javascript 코드는 Geolocation 관련 코드가 들어가는데, 하나씩 살펴보겠습니다. 먼저 필요한 모듈을 import 합니다.

import 'ol/ol.css';

import Feature from 'ol/Feature.js';
import Geolocation from 'ol/Geolocation.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';

그리고 View와 Map 객체를 생성하는데 레이어로는 OpenStreetMap을 사용합니다.

var view = new View({
    center: [0, 0],
    zoom: 2
});

var map = new Map({
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: view
});

이제 이 글의 주인공인 Geolocation 객체를 생성합니다.

var geolocation = new Geolocation({
    trackingOptions: {
        enableHighAccuracy: true
    },
    projection: view.getProjection()
});

Geolocation은 좌표 단위는 WGS84 경위도 좌표인데, 이를 지도의 좌표계와 일치시켜주고 위해 projection 속성을 지도의 View 객체에 대한 projection 객체로 설정하고 있습니다. 그리고 바로 위치를 추적합니다.

geolocation.setTracking(true);

Geolocation은 위치의 변동, 추척 그리고 어떤 문제 발생을 이벤트 처리합니다. 아래와 같이 3개의 이벤트를 추가합니다.

geolocation.on('change', function() {
    console.log('accuracy = ' + geolocation.getAccuracy() + 'm ' +
        'altitude = ' + geolocation.getAltitude() + 'm ' +
        'altitudeAccuracy = ' +  geolocation.getAltitudeAccuracy() + 'm ' +
        'heading = ' + geolocation.getHeading() + 'rad ' +
        'speed = ' + geolocation.getSpeed() + 'm/s');
});

geolocation.on('error', function(error) {
    console.log('geolocation error: ' + error.message);
});

geolocation.on('change:position', function() {
    var coordinates = geolocation.getPosition();

    positionFeature.setGeometry(coordinates ? new Point(coordinates) : null);
});

위치에 대한 정확도, 고도, 고도에 대한 정확도, 방향각, 속도에 대한 변경이 발생할 경우 change 이벤트가 발생하고, 어떤 문제가 발생할 경우 error 이벤트가 발생합니다. 그리고 change:position를 통해 위치 변경시 이벤트가 발생됩니다. change:position 이벤트에서 지도 상에 현재의 위치를 표시하기 위해 positionFeature라는 이름의 객체에 위치를 지정하고 있는데, 이 positionFeature는 아래와 같습니다.

var positionFeature = new Feature();

positionFeature.setStyle(new Style({
    image: new CircleStyle({
        radius: 6,
        fill: new Fill({
            color: '#3399CC'
        }),
        stroke: new Stroke({
            color: '#fff',
            width: 2
        })
    })
}));

네, Feature입니다. Feature이므로 어떠한 모양으로 표시될지를 setStyle로 지정하고 있습니다. 또 Feature이므로 이를 지도와 함께 표시하기 위해 레이어가 필요합니다. 아래처럼요.

new VectorLayer({
    map: map,
    source: new VectorSource({
        features: [positionFeature]
    })
});

이제 실행하면, 위치 확인에 따른 사용자 확인을 묻고 사용자가 허락하면 사용자의 위치를 지도에 표시해 줍니다.

답글 남기기 응답 취소