Openlayers csv 공공데이터 읽어서 포인트 레이어 생성하기

이번 포스팅에서는 공공데이터 포탈에서 받은 좌표가 포함되어 있는 csv 파일을 가지고 포인트 객체를 생성한 뒤 지도에 레이어를 추가하는

작업을 진행해보겠다.

 

공공데이터포털은 누구나 사용할 수 있으므로 필요한 데이터를 가져올 수 있다. 이번 예제에 사용한 데이터는 공공데이터 포탈에서 가져왔다

아래 링크를 참조하면 된다.

www.data.go.kr

공공데이터 포털

csv파일의 레코드 수가 많을 경우 서버단에서 처리해서 가져와도 된다. 그러나 지도에 가시화하기에는 데이터가 너무 많을 때는 타일링으로 작업하는 게 더 효율적이다 타일에 대해서는 계속해서 공부 중이기 때문에 기회가 된다면 타일링하는 작업도 실제 소스코드로 구현해서 포스팅할 예정이다.

 

먼저 기본 브이월드 배경지도를 불러와보자

//브이월드 타일레이어 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:12,
});

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

 

 

다음은 csv 파일을 읽어보도록 하겠다.

 

$.ajax({
     url:'./lib/csvTest.csv', //csv 파일 경로
     type:'get',
     dataType:'text',//response 데이터 타입
     success:function(data){
       var records = data.split("\n"); //구분자 '\n'으로 행구분

       var lonIndx=0;
       var latIndx=0;
       
       //경위도 인덱스 찾기
       for(var i=0;i<records.length;i++){
         var parse = records[i].split(",");

         for(var j=0;j<parse.length;j++){
            
            if(parse[j]=="경도"){
              lonIndx=j;
            }

            if(parse[j]=="위도"){
              latIndx=j;
            }
         }
         
       }
      
       var lonArr=[];
       var latArr=[];
       var pointFeatureArr = []; 
       //포인트 객체 생성하기
       for(var i=1;i<records.length;i++){
         
         var record = records[i].split(",");
        
         var lon= record[lonIndx];
         var lat = record[latIndx];
         
         //경위도 좌표를 EPSG:3857로 변경하기
         var point4326 = [lon,lat];
         var point3857 = ol.proj.transform(point4326,"EPSG:4326","EPSG:3857");

        var point = new ol.geom.Point(point3857);
        
        //point label 및 스타일 지정하기
        var pointFeature = new ol.Feature(point);
        pointFeature.setStyle(new ol.style.Style({
           image: new ol.style.Circle({
              radius: 8,
              fill: new ol.style.Fill({color: 'blue'}),
            }),  
          text:new ol.style.Text({
            text:record[0],//포인트 아래 추가할 텍스트는 도서관명으로 설정
            offsetY:12
          })
        }))
        pointFeatureArr.push(pointFeature);
       }

      var pointSourceLayer = new ol.source.Vector({
          features:pointFeatureArr
      });
      
      //벡터레이어 객체는 한번만 생성해준다
      var pointVectorLayer = new ol.layer.Vector({
        source:pointSourceLayer,  
      })
 
      mapView.addLayer(pointVectorLayer);
      mapView.getView().setCenter([14309209.0797486,4278704.08358673])
     }
   })

테스트한 예제파일은 경위도 좌표를 가지고 있었다. 경위도 좌표의 인덱스를 먼저 구하고 행을 하나씩 읽으면서 포인트 객체를 바로바로 생성해주었다.

 

포인트 색상과 텍스트정도 추가해주고 레이어를 생성했다. 아래 그림에서 결과를 확인할 수 있다.

포인트 레이어 생성 결과

csv를 파싱해주는 라이브러리도 있지만 이번에는 직접 파싱 해서 포인트 객체를 생성해봤다.

 

csv의 데이터의 경우 공백처리도 해야 할 경우도 있고, 데이터가 없을 때 어떻게 처리해야 할지, 인코딩은 어떻게 설정되어있는지도 체크해봐야 할 것이다.

 

아래 링크는 전체 소스이다.

plnkr.co/plunk/bJJAeCChmYaaQQig

Plunker