오픈 레이어스에서 위도 경도를 바꾸어 주는 녀석은 ol/geom/Point 패키지에 있는 Point 라는 클래스가 담당 합니다.
오픈 레이어스3 에서는 ol.proj.fromLonLat 라는 함수에게 파라미터로 위도, 경도 값을 입력하면 변환하여 주었는데, 오픈레이어스4에서는 Point라는 녀석이 그 역할을 대신 한다고 생각하면 됩니다.
사용법은 어렵지 않습니다.
import point from 'ol/geom/Point'; //임포트
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857'); //위경도를 변환
var changePoints = pnt.getCoordinates(); //1차원배열 크기 2개의 값 [x, y]
이렇게 변환된 대상을 view를 만드는 구간에서 center 값으로 넣어주면 됩니다.
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857'); //위경도를 오픈레이어스에서 사용중인 값으로 변환
var changePoints = pnt.getCoordinates();
var layer = new TileLayer({
source: new OSM() //지형정보가 존재하는 객체, Openlayers에서 제공하는 기본 레이어이다.
});
var source = new VectorSource(); //wrapX는 세계지도를 가로로 펼친다는 의미. true인경우 좌표계산 벡터가 실제 지형정보를 토대로 하므로 어긋난다고 한다. 즉, 걍 쓰면 된다..
var vector = new VectorLayer({ //벡터레이어, 가장 기본적인 오픈레이어스의 화면구성 레이어 값
source: source
});
var map = new Map({
layers: [layer, vector], //사용하는 레이어, 벡터레이어를 추가해야 이벤트에 따른 원그리기, 선그리기 객체를 지도에 넣을 수 있다.
target: 'map',
view: new View({
center: changePoints, //중앙잡기
zoom: 8 //줌
})
});
점, 선, 이미지 그리는 방법 입니다.
이벤트를 받아 맵에 그려주는 기능을 간단하게 아래 코드를 통해 살펴 볼 수 있습니다.
var selector = document.getElementById('type'); //셀렉트 테그에 이벤트를 걸기위해
var draw = null; //그릴 객체
function startEvent() { //이벤트 시작 함수
var value = selector.value;
if (value !== 'None') {
draw = new Draw({ //그리기
source: source,
type: selector.value
});
map.addInteraction(draw); //구현된 map 객체에 이벤트 위치를 스스로 추가하여 그리는 부분
}
}
selector.onchange = function() {
map.removeInteraction(draw);
startEvent();
};
위 작성된 클래스를 적용받는 html 파일의 내용 입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>하</title>
<style>
#map {
width: 600px;
height: 650px;
}
.left{
float: left;
margin: 2%;
}
</style>
</head>
<body>
<div id="map" class="left"></div>
<div class="left">
<label>타입 : </label>
<select id="type">
<option value="Point">점</option>
<option value="LineString">선</option>
<option value="Polygon">채우는 선</option>
<option value="Circle">원형</option>
<option value="None">없음</option>
</select>
</div>
<script src="./index.js"></script>
</body>
</html>
아래 사진은 최종 동작 모습 입니다.
완성된 스크립트 파일 입니다.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Draw from 'ol/interaction/Draw.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import point from 'ol/geom/Point';
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857'); //위경도를 오픈레이어스에서 사용중인 값으로 변환
var changePoints = pnt.getCoordinates();
var layer = new TileLayer({
source: new OSM() //지형정보가 존재하는 객체, OSM 클래스는 Openlayers에서 제공하는 기본 레이어이다.
});
var source = new VectorSource(); //wrapX는 세계지도를 가로로 펼친다는 의미. true인경우 좌표계산 벡터가 실제 지형정보를 토대로 하므로 어긋난다고 한다. 즉, 걍 쓰면 된다..
var vector = new VectorLayer({ //벡터레이어, 가장 기본적인 오픈레이어스의 화면구성 레이어 값
source: source
});
var map = new Map({
layers: [layer, vector], //사용하는 레이어, 벡터레이어를 추가해야 이벤트에 따른 원그리기, 선그리기 객체를 지도에 넣을 수 있다.
target: 'map',
view: new View({
center: changePoints, //중앙잡기
zoom: 8 //줌
})
});
var selector = document.getElementById('type'); //셀렉트 테그에 이벤트를 걸기위해
var draw = null; //그릴 객체
function startEvent() { //이벤트 시작 함수
var value = selector.value;
if (value !== 'None') {
draw = new Draw({ //그리기
source: source,
type: selector.value
});
map.addInteraction(draw); //구현된 map 객체에 이벤트 위치를 스스로 추가하여 그리는 부분
}
}
selector.onchange = function() {
map.removeInteraction(draw);
startEvent();
};
startEvent();
물론, Node.js와 ol모듈 및 parcel이 설치되어 있어야 하며 실행 방법과 빌드하는 방법은 앞선 내용과 동일 합니다.
아래 소스코드를 첨부합니다!
* 해당 내용은 Nodejs를 통한 내용과 ES6 문법으로 구성되어 있습니다.
* 위 내용이 이해되지 않는다면 아래 링크를통해 환경을 구성하면 좋습니다.
https://lts0606.tistory.com/194
Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)
오픈레이어스는 브라우저에서 지도를 활용한 정보를 표출하는 라이브러리이다. 네이버지도, 구글지도 및 다음지도 처럼 GIS(geographic information system) 라는 명칭으로 불리우며 지형정보 서버를 따로 구축 할..
lts0606.tistory.com
반응형
'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 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용) (2) | 2019.09.09 |
| Openlayers 사용법, 소개 (6) | 2019.04.27 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글