OpenLayer, 지도 이동하기
- Web/JavaScript
- 2021. 11. 9.
OpenLayer, 지도 이동하기
지도 이동하기
map.getView().setCenter('좌표');지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다.
그러나 이를 활용하기 위해서는 조금 복잡한 과정을 겪는다.
그냥 된다면 매우 행운스럽겠지만, 안타깝게도 오픈 레이어를 노말로 사용할 확률은 매우 적기 때문이다.
지도를 이용하는 방법
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='js-map'></div>
</body>
<script src="../../assets/js/proj4.js"></script>
<script src="../../assets/js/ol-debug.js"></script>
<script src="../../assets/js/ol-debug.js"></script>
<script src="../../assets/js/jquery.js"></script>
<script>
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
view: new ol.View({
zoom: 16,
center: new ol.geom.Point([ 126.97659953, 37.579220423 ]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
}),
target: 'js-map',
layers: [
new ol.layer.Tile({
source : new ol.source.XYZ({ //vworld api 사용
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
//tileGrid: tileGrid
})
}),
vectorLayer
]
});
</script>
</html>오픈레이어 라이브러리를 가져온 오픈 레이어는 단순하다.
여기서, 이전 글을 살펴보았다면 좌표계의 설정이 안 된 OpenLayer인 것을 확인할 수 있다.
이를 확인하는 방법은, Map에 설정된 View의 설정에서 projection이 존재하는 여부에 따라 결정된다.
여기서는 존재하지 않으므로, transform 함수를 이용해서 좌표계 변동하는 OpenLayer이다.
이제 여기서 이동하는 함수를 집어넣을 예정이다.
이해의 편의를 위해서 함수 move()를 활용하였다.
다음과 같이 map.getView().setCenter을 이용해서 좌표 이동이 가능하다.
오픈 레이어는 생각보다 까다로운 아이라고 생각해야 한다.
그냥 좌표만 넣어서 이동이 되면 좋겠지만, js의 인식 오류와 오픈레이어의 오류가 합작을 이루게 되면 error 찾는 건 갈수록 어려워진다.
따라서, 필자는 확실한 등록을 위해 Point를 이용해 등록하였다.
여기서 응용한다면, map의 좌표계가 설정이 되어있다면, transform은 생략이 가능하다.
Zoom 크기 변경하기
map.getView().setZoom(parseInt(16));위의 글을 응용하여, Zoom의 크기를 컨트롤 할 수 있는 방법이다.
강조를 하기 위해서는 map의 축적 크기를 변경하는 방법도 활용된다.
parseInt를 사용한 이유는, JS의 문자인식 오류를 방지하고자 사용하였다.
이동 효과 주기
//이동효과
map.beforeRender(ol.animation.pan({
source: map.getView().getCenter(),
duration: 500
}));위의 문구만 사용하면, map이 이동만 되어서 심심한 표현을 제공한다.
이를 이동한다는 모습을 표현하기 위한 단순한 코드이다.
이동하기 전에, 위에 위의 문구를 붙여놓기만해도 지도가 이동되는 연출을 제공한다.
duration의 시간은 1000당 약 1초이다.
그러나, 지도 이동시 지도를 불러오는 시간도 존재하기 때문에 사용시 주의가 조금 필요한 기능이다.
소스 공유
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick='move()'>이동</button>
<div id='js-map'></div>
</body>
<script src="../../assets/js/proj4.js"></script>
<script src="../../assets/js/ol-debug.js"></script>
<script src="../../assets/js/ol-debug.js"></script>
<script src="../../assets/js/jquery.js"></script>
<script>
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
view: new ol.View({
zoom: 16,
center: new ol.geom.Point([ 126.97659953, 37.579220423 ]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
}),
target: 'js-map',
layers: [
new ol.layer.Tile({
source : new ol.source.XYZ({ //vworld api 사용
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
//tileGrid: tileGrid
})
}),
vectorLayer
]
});
//이동하기
function move() {
map.beforeRender(ol.animation.pan({
source: map.getView().getCenter(),
duration: 500
}));
map.getView().setCenter(
new ol.geom.Point([ 126.95659953, 37.578220423]).transform('EPSG:4326', 'EPSG:3857').getCoordinates()
);
map.getView().setZoom(parseInt(16));
}
</script>
</html>본문내용
마무리
정말 까탈스러운 아이를 관리하는 기분이다.
에러는 나오지만, 에러가 표현이 안되기도 하고, 다른 사람의 코드를 따라 썼지만 안 되는 일이 쉽게 발생된다.
나 또한 이 코드가 다음에 순수히 적용될 거라고 생각되지 않는다.
다만, 이것이 현재 내가 사용한 방법이므로, 적어놓게 되었다.
'Web > JavaScript' 카테고리의 다른 글
| JavaScript, CSS의 @keyframes 제어하기 (0) | 2021.11.11 |
|---|---|
| OpenLayer, 마커 만들기 (0) | 2021.11.09 |
| OpenLayer, Layer 수정하기 (0) | 2021.10.19 |
| OpenLayer, 등록하기, 선택하기 동시 사용하기 (0) | 2021.10.19 |
| OpenLayer, 데이터 저장하기와 불러오기 (0) | 2021.10.19 |