반응형


- 도형으로 그린 피처 정보 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);
});


clone을 이용하여 복제한 다음에 3857에서 4326으로 변경하여

배열에 담아둔뒤 담아둔 정보들을 GeoJSON으로 변경하는 과정이다.


그러면 다음과같이 우리가 잘 알고있는 좌표계로 변경된다.

(소스코드 변경때문에 도형을 다시 그렸기때문에 좌표가 다르다.)



geojson export 는 이런식으로 진행되며


추출은 했지만 실제로 파일로 만드는 부분은 해보지 않아서


나중에 하게 되면 정리할 예정이다.


반응형