[ Openlayers ] geojson으로 레이어 표출하기( ol6 기준 )

geojson 파일을 읽어들여 벡터레이어로 생성하고 표출하는 코드 입니다.

테스트용 서울시 행정구역 geojson 데이터도 함께 올려두었습니다.

  var vectorSource = new ol.source.Vector({
    url:"./geojson/seoulHD.geojson", //geojson 파일
    format: new ol.format.GeoJSON()
  });

  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,
    }),
  });

 

 

seoulHD.geojson

1.24MB

 

---

 

좌표계 3857 이 외의 geojson을 사용 할 경우 dataProjection 옵션을 추가 해주세요.

  var vectorSource = new ol.source.Vector({
    url:"./geojson/seoulHD.geojson", //geojson 파일(5179 일 경우)
    format: new ol.format.GeoJSON({
      dataProjection: 'EPSG:5179'
    })
  });