[Openlayers] GeoJSON 파일 읽어서 지도위에 Layer 올리기

 

OpenLayers란?

 

자바스크립트 오픈 소스 라이브러리

웹 브라우저에서 대화형 지도 애플리케이션 개발을 도와줌

다양한 지리공간 데이터 소스를 통합하여 사용자에게 지리 정보를 시각적으로 제공

 

https://openlayers.org/en/latest/apidoc/

OpenLayers v10.1.0 API - Index

 

공식 Document에 웬만한게 다 있고, 예제 코드까지 볼 수 있기 때문에 꼼꼼하게 확인해보자.

 

 

OpenLayers로 GeoJSON 파일 읽어서 지도 위에 VectorLayer 올리기

 

• map.html

OpenLayers를 사용하기 위해서 script를 로드해야 한다.

 

<!-- openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

 

 

body 부분에 map을 띄울 div를 하나 만들어준다.

 

 

• geoMap.js

스크립트 코드를 작성하기에 앞서, 내가 받은 데이터는 SHP 파일이였고 이는 QGIS를 통해서 GeoJSON 형식으로 바꿔서 저장할 수 있다. 

 

스크립트의 ready 함수 안에 아래와 같이 map 객체 생성

---

• target : html에서 만든 지도를 띄울 div
• layers : 지도에 추가할 수 있는 다양한 레이어들, 나는 GeoJSON을 읽어서 레이어를 올릴 것이기 때문에 배경지도만 추가해줬다. OpenLayers에서 기본으로 제공하는 OSM 배경지도를 사용했다.
• view : 지도를 로드했을 때 사용자가 보게 되는 지도상의 구간을 의미한다.
  • center : 중심이 되는 좌표
  • zoom : 지도 확대 레벨

---

 

 

처음에는 javaScript에서 제공하는 fetch API를 이용해서 GeoJSON 파일을 읽어오려고 했으나 CORS 에러 문제로 잠시 보류하고 다른 방법을 찾았다.

 

VectorSource안에 GeoJSON().readFeatures()를 사용하여 GeoJSON 객체를 읽어왔다.

GeoJSON 객체를 읽기 위해 해당 json 데이터를 객체로 선언해서 저장해주었다.

---

• Feature : 좌표 데이터를 담은 객체
• Source : Feature의 집합객체

---

 

GeoJSON 파일을 읽어서 지도를 올릴 때 가장 주의해야할 점은 좌표계이다.

좌표계를 통일해줘야 지도가 정상적으로 표출된다.

GIS 담당자한테 받은 SHP 파일은 좌표계가 5186이였고, 내가 js에서 구현하려고 한 좌표계는 3857이였다...

 

지도를 처음 구현해보는데다가 이런 좌표계에 대한 정보가 전혀 없었기 때문에 이 부분에서 조금 헤맸다.

좌표계에 대한 정보를 잘 확인하고 맞춰서 개발을 해야한다.

QGIS에서 GeoJSON으로 변환할 때 옵션으로 좌표계 선택하는 부분이 있기에 이를 통해 원하는 좌표계로 변환해주었다.

 

---

• featureProjection : Vector 소스 처리할 때 사용하는 옵션. GeoJSON의 Projection과 맞춰준다.

---

 

feature를 읽어서 Geometry 타입에 따라 style을 지정한 후 VectorLayer를 return하도록 했다.

style 객체 생성에 대한 것들은 OpenLayers 공식 Document에 상세히 설명이 돼 있다.

 

GeoJSON 파일을 여러개 읽어서 각각 스타일을 지정하여 레이어를 올리고 싶었기 때문에 코드의 중복을 줄이고자 아래와같이 공통함수를 만들었다.

 

 

 

위에서 만든 공통함수에 parameter를 같이 보내서 VectorLayer를 만든다.

 

vectorLayer_node = createVectorLayer(nodeObject, styleFunction);
vectorLayer_link = createVectorLayer(linkObject, styleFunction);

 

 

map 객체에 addLayer()를 이용해 Layer를 추가하면 된다.

 

// 맵에 Layer 추가
map.addLayer(vectorLayer_node);
map.addLayer(vectorLayer_link);

 

 

결과

 

 

node, link 2개의 GeoJSON 파일을 읽어서 지도 위에 올린 결과이다.

 

 

 

 

 

 

* 위의 포스팅은 개인적인 공부, 정리를 위한 것입니다.

* 따라서 정확하지 않은 부분이 있을수도 있음.

* 내용의 잘못된 부분, 오류 지적, 더 나은 방법은 감사히 받겠습니다.