오픈레이어스는 브라우저에서 지도를 활용한 정보를 표출하는 라이브러리 입니다.
네이버지도, 구글지도 및 다음지도 처럼 GIS(geographic information system) 라는 명칭으로 불리우며 지형정보 서버를 따로 구축 할 수 있어서 외부 인터넷이 안되는 곳에서 종종 사용 되기도 합니다.
오픈레이어스가 기존 3.0.X버전에서 4.0.X버전으로 올라감에 따라 문법이 ES6 이상 스타일로 바뀌었으며 일반 개발도구나 환경에서 개발하기에는 기본 세팅이 쉽지가 않습니다. * 2019년도 8월 기준 입니다.
이에 Node.js에서 npm을 활용하여 개발을 하기 쉽게 구성하는 방법을 나열해 보고자 합니다.
먼저 Node.js를 설치하고, 개발도구는 비쥬얼 스튜디오 코드를 설치 합니다.
Node.js는 필수로 설치해야되며 개발도구는 사실 아무거나 사용해도 상관 없습니다.
* 기본적으로 cmd를 통한 개발환경이나 node.js에대한 지식이 전무하면 이해하기 어렵습니다.
다음으로 작업 순서 입니다.
1. 프로젝트 폴더를 생성 합니다.. * 여기서는 E 드라이브에 Open_test 디렉토리로 만들었습니다.
2. 콘솔 창을 열어서 프로젝트 폴더로 이동한 다음에 npm init 명령을 입력 합니다.
3. 해당 폴더에서 npm install ol 명령어를 입력 합니다.
4. npm install --save-dev parcel-bundler 명령어를 입력 합니다. 해당 라이브러리는 자동으로 테스트 서버를 올려주고 결과파일을 만들어주는 파셀(parcel)이라는 번들러(bundler) 입니다.
5. 작업폴더에 있는 package.json 파일에서 script 항목을 아래 사진처럼 수정 합니다.
start는 개발 내용을 화면에 띄울 때 사용할 명령이며 build는 개발이 완료된 내용을 정리해서 빌드하여 실제 서버에서 사용하기 쉽도록 코드를 묶어줄 명령어 입니다.
index.html은 나중에 우리가 화면을 구성할 html 파일 이름 입니다. 나중에는 해당 부분을 원하는 데로 바꾸면 됩니다.
해당 json 파일 입니다.
{
"name": "open_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"ol": "^5.3.3"
},
"devDependencies": {
"parcel-bundler": "^1.12.3"
}
}
6. index.js 파일을 생성 합니다.. 해당 파일은 es6 문법으로 이루어진 오픈레이어스에 관련된 내용 입니다.
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM() //기본 레이어, 오픈레이어스에서 제공하는 지형정보를 가져 옵니다
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
7. 해당 파일을 보여 줄 index.html 파일을 작성 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>오픈 레이어스</title>
<style>
#map {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
8. 위 2개의 파일이 만들어 졌다면 해당 디렉토리에서 npm start 라고 명령어를 입력합니다. start는 package.json에서 입력한 parcel index.html 명령어를 수행 합니다.
9. 1234 포트 번호로 웹 페이지가 동작을 하게 되며 해당 포트로 접속하면 아래 사진처럼 기본화면을 만날 수 있습니다.
10. 만약 해당 파일을 다른 곳에서도 사용하고 싶다면 npm run build 명령어를 입력하여 빌드 하도록 합니다.
build 하는 순간 package.json에 입력한 내용이 동작 합니다.
재미있는 것은 파셀(parcel)이라는 번들러가 아래 사진처럼 Openlayers에서 임포트한 내용을 알아서 정리해서 일반 웹 서버에서 사용 가능하도록 압축하여 주는 것을 볼 수 있습니다.
11. dist 폴더가 생성이 되면서 index.html과 index.js 파일 및 기타등등(?)파일이 생긴 것을 볼 수 있습니다. 해당 파일 그대로 사용하면 방금전 내용을 다시 볼 수 있습니다.
12 실제 build한 파일을 http-server로 동작시킨 모습 입니다. 오류나 문제없이 잘 작동하는 것을 볼 수 있습니다.
이상으로 npm을 활용한 오픈레이어스 개발환경에 대해 살펴 보았습니다.
궁금한점 틀린점은 댓글 또는 메일로 연락주세요. : )
'OpenLayers(오픈레이어스)' 카테고리의 다른 글
| Openlayers view Animation (오픈레이어스 애니메이션, Openlayers 애니메이션) (0) | 2019.09.20 |
|---|---|
| Openlayers heatMap (오픈레이어스 히트맵, Openlayers 히트맵) (4) | 2019.09.20 |
| Openlayers draw circle (오픈레이어스 원 그리기, Openlayers 원 그리기) (0) | 2019.09.19 |
| Openlayers 위경도 변환 및 이벤트 리스너 (Openlayers 위도 경도 변환) (0) | 2019.09.11 |
| Openlayers 사용법, 소개 (6) | 2019.04.27 |
댓글