[OpenLayers] features to GeoJSON export (피처정보 추출하기)

- 도형으로 그린 피처 정보 GeoJSON으로 추출하기 -

직접 그린 도형들을 geojson 형태로 추출하여 저장해야 하는 경우가 생길수 있다.

geojson은 간단하게 json 에서 위치정보를 가진것을 geojson이라 생각하고 넘어가자

다행히 json형태로 정보를 추출하는건

openlayers - extension 에

예제가 존재하기 때문에 보고 가져다 사용하면 된다.

https://viglino.github.io/ol-ext/examples/bar/map.control.editionbar.html

<!doctype html>
<html lang="ko">
  <head>
    <!-- OpenLayers -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
      #map {height: 800px;width: 100%;}
    </style>
    <title>OpenLayers-vworld</title>
  </head>
  <body>
    <h2>OpenLayers_MAP</h2>
    <div id="map" ></div>
    <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="None" selected>None</option>
    </select>
   <button type="button" class="exportBtn" ><span>getGeoJSON</span></button>
  </body>
   <script type="text/javascript">

        //기본지도
        var vwBaseLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
            url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
            })
        });

        var map = new ol.Map({
            target : 'map',
            layers: [vwBaseLayer],
            view: new ol.View({
                center: [14126669.41589247, 4493404.190498611],
                zoom: 7,
                minZoom: 7,
                maxZoom: 19
            })
         });

        var typeSelect = document.getElementById('type');
        var draw;
        typeSelect.onchange = function () {
            map.removeInteraction(draw);
            addInteraction();
        };

        // Add over interaction that draw hull in a layer
        var source = new ol.source.Vector({ wrapX: false });
        var vector = new ol.layer.Vector({
                title : 'vector',
                source: source,    });

        map.addLayer(vector); //vector layer add

        function addInteraction() {
            var value = typeSelect.value;
            if (value !== 'None') {
                draw = new ol.interaction.Draw({
                        source: source,
                        type: value
               });
                map.addInteraction(draw);
            }
        }

        //GeoJson export
        $(".exportBtn").click(function(){
            var json = new ol.format.GeoJSON().writeFeatures(vector.getSource().getFeatures());
            console.log(json);
        });
    </script>
</html>

이 앞에서 그리기 관련 게시글을 작성했던 소스와 별반 차이는 없지만

마지막에 new ol.format.GeoJson()... 이 한줄이

GeoJSON으로 vector 레이어에 그려진 피쳐들을 추출하는 코드이다.

아래 그림을 통해 결과를 보도록 하자.

콘솔에 찍히도록 해놨는데 찍힌것을 보니 폴리곤 1개, 라인스트링 1개, 포인트4개

이렇게 전부 좌표정보와 함께 추출된것을 확인이 가능하다.

여기서 하나 의문이 생길수 있는게 왜 circle은 없는가? 이다.

전 게시글에서 언급했지만 circle을 일반적으로 그리면 반경으로 그리기 때문에

geoJson이나 kml을 통해 추출이 불가능하다.

그래서 polygon 형태로 최대한 원에 가깝게 그려줘야 추출이 가능하다.

(이부분은 속성정보 추출과 함께 추후 정리할 예정이다.)

이제 저 결과를 보면 좌표계가 우리가 원하는 좌표계로 바꿔줘야하는데

그럴경우 소스코드를 조금 손봐야한다.

//GeoJson export
$(".exportBtn").click(function(){
    var newfeatures = [];
    var projection = ol.proj.get('EPSG:3857'); // from 3857
    vector.getSource().forEachFeature(function(feature) {
        var clone = feature.clone();
        clone.setId(feature.getId());  // clone does not set the id
        clone.getGeometry().transform(projection, 'EPSG:4326'); // to EPSG:4326 
        newfeatures.push(clone);
    });
    var json = new ol.format.GeoJSON().writeFeatures(newfeatures);
    console.log(json);
});