openlayers lineString으로 거리 측정 예제

저번 포스팅에서 openlayers에서 클릭 이벤트로 라인스트링을 그리는 예제를 살펴보았다.

 

이번에는 라인스트링으로 거리 측정을 해보는 예제를 해보겠다.

 

라인스트링에 대한 스타일은 openlayers 예제 소스를 참조했다.

 

var sketch; //라인스트링 이벤트 시 geometry객체를 담을 변수
var measureTooltipElement;//draw 이벤트가 진행 중일 때 담을 거리 값 element
var measureTooltip; //툴팁 위치

 

기존 브이월드 타일 레이어 불러오는 소스를 그대로 쓰겠다.

//브이월드 타일레이어 url 설정s
var source =new ol.source.XYZ({
        url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
});
		
//타일레이어 생성하기
var viewLayer = new ol.layer.Tile({
        source:source
});
		
//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
        center:[14248656.389982047, 4331624.063626864],
        zoom:7,
});

//빈객체생성
var lineSource = new ol.source.Vector();
var lineVector = new ol.layer.Vector({
        source:lineSource
})

var mapView = new ol.Map({
        target:"map", // 지도를 생성할 element 객체의 id 값,
        layers:[viewLayer,lineVector], //생성한 레이어 추가,
        view:view,	//view 설정
});

addinteraction 함수를 생성해서 draw 이벤트 설정을 해보자

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: lineSource,
        type: 'LineString',
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 0, 0.5)',
                lineDash: [10, 10],
                width: 2,
            }),
            image: new ol.style.Circle({
                radius: 5
            }),
        }),
    })
    mapView.addInteraction(draw);
    createMeasureTooltip();

    var listener;
    draw.on('drawstart', function(evt) {
        console.log(evt)
        sketch = evt.feature;
        //var tooltipCoord = evt.coordinate;

        listener = sketch.getGeometry().on('change', function(evt) {
            var geom = evt.target;
            var output = formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();

            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);
        })
    })

    draw.on('drawend', function() {
        measureTooltipElement.className = 'ol-tooptip ol-tooltip-static';
        measureTooltip.setOffset([0, -7]);

        //unset sketch
        sketch = null;
        measureTooltipElement = null;
        createMeasureTooltip();
        new ol.Observable(listener)
    })
}

그 외 툴팁 생성에 필요한 함수와 거리 측정을 m, km로 변환해보는 함수를 구현하면 아래 소스와 같다.

function createMeasureTooltip() {
    if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
    }
    measureTooltipElement = document.createElement('div');
    measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
    measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
    });
    mapView.addOverlay(measureTooltip);
}

function formatLength(line) {
    var length = ol.sphere.getLength(line);
    var output;
    if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
    } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm';
    }

    return output;
};

 

소스를 컴파일 하고 서울에서 부산까지 직선거리를 측정해보았다.

이번 글까지만 라인스트링에서 다뤄 보고 다음 포스팅에서는 폴리곤에 대해 알아보고자 한다.

 

폴리곤도 마찬가지로 폴리곤 interaction과 면적 측정에 대해 다뤄보고자 한다.