OpenLayer, 데이터 저장하기와 불러오기

OpenLayer, 데이터 저장하기와 불러오기

 

 

 

  데이터 저장하기

기존의 글을 이어서 데이터 저장하기 기능부터 만들었다.

저장는 방법

저장하는 방법은 다음과 같다.

 

var vectorLayer1 = new ol.layer.Vector({
    source: new ol.source.Vector()
});

$('#map_value').on('click', function(e) {
    var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures());
    console.log(json);
});

2021.10.08 - [Web/JavaScript] - OpenLayer, 좌표 등록하기

OpenLayer, 좌표 등록하기

 

생성된 Vector에 Data가 쌓였다면, id가 map_value를 가진 button을 누르면 vector의 내용이 console창에 출력되도록 설정하였다. 이전의 좌표 등록하기에서 수정된 코드로 button만 추가해서 만들었다.

 

콘솔창에 데이터가 쌓인 것을 확인 할 수 있다.

버튼을 누르자 성공적으로 console창에 원하는 데이터가 저장되는 것을 확인 할 수 있었다.

하지만 이는 이전글, 내가 원하는 좌표계가 아니었다.

 

그래서 좌표계 변환 또한 작업을 실행하였다.

 

$('#map_value').on('click', function(e) {
    //기존 호출 방법
    //var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures());

    //console.log(vectorLayer1);
    //소스 불러오기
    //var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures());
    var newfeatures = [];
    var projection = ol.proj.get('EPSG:3857'); // from 3857
    vectorLayer1.getSource().forEachFeature(function(feature) {
        var clone = feature.clone();
        clone.setId(feature.getId());  // clone does not set the id
        clone.getGeometry().transform(projection, 'EPSG:4326'); //  EPSG:4326 좌표계로 재정의
        newfeatures.push(clone);    //newfeatures의 배열에 위에 저장한 clone을 저장
    });
    //var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures());
    var json = new ol.format.GeoJSON().writeFeatures(newfeatures);
    console.log(json);

})

https://mine-it-record.tistory.com/326

해당 방법은 위의 링크(티스토리)에서 참고해서 사용한 코드이다.

내가 원하는 좌표계로 변환하기 위해 필요한 과정이었고 이를 console창에 출력되는 것을 확인할 수 있었다.

 

위의 사진과 다르게 좌표가 변경되어서 출력된 것을 확인 할 수 있다.

이제 이 데이터를 저장하는 방식을 구축을 하면 이 글은 마무리가 된다.

원하는 좌표가 출력되는 것을 확인했으니, 반대로 이 좌표를 토대로 데이터가 출력될 수 있는지를 체크해야 한다.

 

 

  데이터 불러오기, 첫 번째 방법

데이터 저장 확장명은 txt, json 등 다양하다.

 데이터는 불러온다는 가정해서, console창의 내용 그대로 복사하여 메모장에 저장하였다.

 

아래의 코드로는 아직 저장은 되지 않는다. 그러나 글 작성을 위해 console창에 출력되는 text 값으로 저장하여 저장된 파일 처럼 만들어 보았다.

 

//데이터 가져오기
function setJSON() {

    var vector_load;
    var vectorSource = new ol.source.Vector({
        url : 'test.txt',   //json 파일 위치
        projection : 'EPSG:4326', //불러올 데이터의 좌표계 지정.
        format : new ol.format.GeoJSON()
    });

    vector_load = new ol.layer.Vector({
        source : vectorSource
    })

    map.addLayer(vector_load);
}

데이터를 불러오기 위해서는, Vector의 Source가 필요하다.

Source의 속성 중 , url은 데이터가 저장된 파일의 경로를 읽어 데이터를 가져오는 방식을 택하고 있다.

여기서, 만약 제공되고 있는 map의 좌표계와 저장된 좌표계가 서로 다를 경우, projection을 적용하여 변형하는 방법을 사용한다.

 

나머지는 위와 같다.

Source를 Layer로 감싼 뒤에,  지도가 저장된 오브젝트에 addLayer를 적용하면 끝난다.

 

이 방법은 외부에 json, txt 확장명을 가진 저장파일을 불러올 때 사용하는 방법이다.

그리고 projection을 사용시, 주의점은 클론 전, 후로 띄어쓰기 해서는 안된다.

불러오기 클릭

불러오기를 눌렀을 때, 임의로 그린 모양이 정상적으로 불러온 것을 확인 할 수 있었다.

 

 

 

  데이터 불러오기, 2번째 방법

 두 번째 방법은 json, txt가 아닌, DB에서 불러오는 방법을 사용하였다.

여기서 포인트는, json의 확장명처럼 별도로 저장된 것이 아닌, javascript 내에서 알아낸 Source로 작업하는 차이가 있다.

function getNoParkJSON(data) {
    
    //test를 위해 만들어진 code이다.
	data = '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"LineString","coordinates":[[126.97350561618805,37.580976504832506],[126.97374165058136,37.57942082360387],[126.97151005268097,37.579538840800524],[126.97147786617279,37.58009674027562],[126.97122037410736,37.58081557229161]]},"properties":{"AERA_TITLE":"N"}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[126.97143495082855,37.57863761857152],[126.97174608707428,37.57791878655553]]},"properties":{"AERA_TITLE":"N"}}, {"type":"Feature","geometry":{"type":"LineString","coordinates":[[126.97201430797577,37.58067609742284],[126.97220742702484,37.57961394265294],[126.97381889541391,37.57980241848792],[126.97404205799103,37.57982851937413]]},"properties":{"AERA_TITLE":"test"}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[126.97636485099794,37.57938863709569],[126.97507739067079,37.57937790825963],[126.97384357452394,37.57836939767003]]},"properties":{"AERA_TITLE":"test"}}, {"type":"Feature","geometry":{"type":"LineString","coordinates":[[126.97404205799103,37.57991435006261],[126.97414934635162,37.57869126275182],[126.97555482387543,37.57839085534215]]},"properties":{"AERA_TITLE":"1234"}}]}';
	
	console.log('noPark_js / getNoParkJSON()');
	console.log(data);
    
    //가져온 data를 Source로 변환하는 과정
    var vectorSource = new ol.source.Vector({
		features : (new ol.format.GeoJSON().readFeatures(data)),
    });
    
    var vector_load;
    vector_load = new ol.layer.Vector({
        source : vectorSource
    });
    
    map.addLayer(vector_load);
}

여기서 알기 쉽도록, data는 서울 종로구 경복궁 주변의 좌표로 지정된 상태로 불러왔다.

또한 해당 값의 좌표계는 projection : 'EPSG:4326' 이므로 사용시, map에 적용해야 하는 부분이다.

 

방법 1과 방법2의 차이가 있다면, Source이다.

이미 data가 JavaScript가 가져있느냐, 폴더의 데이터를 해석했느냐의 차이는 불러오는 방법에 차이를 나타낸다.

 

여기서 선 보인 data의 Value는 Features 부분임을 알 수 있었다. 그러나 이를 바로 Source에 담기에는 OpenLayer가 인식 못하기 때문에, GeoJSON의 도움을 받아야 한다.

 

이 방법을 사용할 때 주의점이 있다면, 불러오는 데이터와 map의 좌표계가 일치해야한다는 점이다.

만약, 일치 하지 않는다면 값을 불러오더라도 원하는 위치가 아닌 지도 바깥이나 다른 곳에 좌표를 불러오고 있다는 것이다.

당연히 실패는 아니므로 Error처리는 나지 않고, 삽질을 할 수 있으니 조심해야 한다.

 

필자는 아직 OpenLayer에 대해 잘 모르므로, 좌표계 변환을 실패하였다.

 

따라서, map의 좌표계를 변환하여 값을 불러오는 방식을 사용하였다.

 

 

 

  마무리

makeString.zip

1.19MB

 원하는대로 데이터의 저장과 불러오기가 되는 것을 확인 할 수 있었다.

이제 데이터의 저장을 Spring의 도움을 받아 진행할 예정이다.