Openlayers polygon 면적 측정 예제

저번 포스팅에서 라인스트링을 활용해서 거리 측정을 간단하게 해 보았다.

 

이번 포스팅에서는 폴리곤 그리는 것과 면적을 측정해보도록 하겠다.

 

기본적으로 네이버, 다음, 구글 지도에 있는 면적 측정 그 기능이라고 보면 되겠다.

 

소스를 정리하다 보니 라인 스트링과 소스가 같다고 보면 된다. 단지 draw객체의 타입이 linestring인지 polygon인지 명시해주고

 

면적 측정하는 함수를 추가해주면 된다.

 

따로 소스를 나눠서 설명하지 않고 전체 소스만 참조하면 아래와 같다.

var sketch;
var measureTooltipElement;
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 polySource = new ol.source.Vector();
var polyVector = new ol.layer.Vector({
    source: polySource
})

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

var pointerMoveHandler = function(evt) {
    if (evt.dragging) {
        return;
    }

    if (sketch) {
        var geom = sketch.getGeometry();
    }
};
mapView.on('pointermove', pointerMoveHandler);
var draw;

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: polySource,
        type: 'Polygon',
        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) {
        sketch = evt.feature;
        //var tooltipCoord = evt.coordinate;

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

            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)
    })
}

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 formatArea(polygon) {
    var area = ol.sphere.getArea(polygon);
    var output;
    if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
    } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
    }
    return output;
};

// Add your code here

위의 소스를 참조해서 해운대 동백섬 면적을 측정해보았다.

폴리곤으로 면적 측정하는 소스를 구성해봤다. 오픈 레이어스 document, api, example 소스를 잘 활용해서 원하는 기능 구현에 도움이 되었으면 한다.

 

다음 포스팅에서는 geoJson을 활용해서 포인트, 라인스트링, 폴리곤을 그려보는 예제를 진행해보도록 하겠다.

 

전체 소스와 테스트해볼 수 있도록 아래 링크를 참조하면 된다

https://plnkr.co/edit/MZnv4d2gPzSmO8Tr

Plunker - openlayers Polygon 면적 측정 예제