[ Openlayers ] geojson 데이터 좌표변환 해서 레이어 표출하기 ( ol6 기준 )

오픈레이어스로 개발시 배경지도와 맞지 않는 좌표계의 데이터를 표출해야할 경우 각 feature의 coordinates를 변환해줘야한다. 그 방법에 대한 소스는 아래와 같다.

 

배경지도 - EPSG:3857

데이터 - EPSG:5179

  // EPSG:5179 좌표계 등록
  proj4.defs("EPSG:5179", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs");
  ol.proj.proj4.register(proj4);

  var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    loader: function (extent) {
      const url = "./geojson/code_sgg_polygon.geojson"; // geojson 파일 로드
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          const features = vectorSource.getFormat().readFeatures(data);
          
          // feature 좌표계 변환
          features.forEach((feature) => feature.getGeometry().transform('EPSG:5179', 'EPSG:3857'));
          
          // features 업데이트
          vectorSource.addFeatures(features)
        });
    },
  });

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
      fill: new ol.style.Fill({
        color: "rgba(255,255,0,0.3)",
      }),
      stroke: new ol.style.Stroke({
        color: "rgba(0,255,255,0.8)",
        width: 2,
      }),
    }),
  });

  var map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: "http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png",
        }),
      }),
      vectorLayer,
    ],
    view: new ol.View({
      center: [14135490.777017945, 4518386.883679577],
      projection:"EPSG:3857", // 배경지도 좌표계 설정
      zoom: 11,
      minZoom: 7,
      maxZoom: 19,
    }),
  });