이번엔 오픈레이어스 객체위치를 바꾸는 방법 입니다.
쉽게 설명하면, 기존에 만들어놓은 맵 데이터를 다른 테그에 옮기는 방법 입니다.
내가 한 행위, 내가 그린 대상 및 정보 전부 다른 테그로 옮길 때 사용 합니다.
기본 레이어를 생성 합니다.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import point from 'ol/geom/Point';
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');
var center = pnt.getCoordinates();
var layer = new OlTileLayer({
source: new OSM()
});
var myView = new View({
center:center,
zoom: 8
});
var map = new Map({
layers: [layer],
view: myView
});
map.setTarget('left_map'); //타겟 테그
항상 타겟을 map을 만들 때 내부에서 주었던 것 같은데..이번엔 바깥으로 분리 하였습니다.
이를 적용 시킬 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;
border : 3px dashed rgba(83, 206, 255, 0.6);
border-radius: 5px;
}
.left{
float: left;
margin: 2%;
}
</style>
</head>
<body>
<div id="left_map" class="map left"></div>
<div id="right_map" class="map left"></div>
<input type='button' value='워프 해주세요~' id='warp'/>
<script src="./index.js"></script>
</body>
</html>
map을 그릴 객체 2개를 만들었으며 아래 버튼을 통해서 서로 위치를 바꿀 예정 입니다.
맵 객체를 바꾸는 것은 target의 내용을 바꾸어주면 됩니다. 아주 간단합니다!
var warp = document.getElementById('warp'); //버튼
warp.addEventListener('click', function() { //클릭이벤트 발생시
var target = map.getTarget() === 'left_map' ? 'right_map' : 'left_map';
map.setTarget(target); //타겟을 바꾸어라
}, false);
따로 라이브러리를 사용하지 않아도 될 정도로 심플한 코드 입니다.
최종 완성된 스크립트 입니다.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import point from 'ol/geom/Point';
var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');
var center = pnt.getCoordinates();
var layer = new OlTileLayer({
source: new OSM()
});
var myView = new View({
center:center,
zoom: 8
});
var map = new Map({
layers: [layer],
view: myView
});
map.setTarget('left_map'); //타겟 테그
var warp = document.getElementById('warp'); //버튼
warp.addEventListener('click', function() { //클릭이벤트 발생시
var target = map.getTarget() === 'left_map' ? 'right_map' : 'left_map';
map.setTarget(target); //타겟을 바꾸어라
}, false);
동작중인 사진 입니다.
아래 소스코드를 첨부합니다!
* 해당 내용은 npm과 parcel 환경으로 구성되어 있습니다.
* 아래 주소를 통해 환경구성을 하면 이해하기 쉽습니다.
https://lts0606.tistory.com/194?category=726697
Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)
오픈레이어스는 브라우저에서 지도를 활용한 정보를 표출하는 라이브러리이다. 네이버지도, 구글지도 및 다음지도 처럼 GIS(geographic information system) 라는 명칭으로 불리우며 지형정보 서버를 따로 구축 할..
lts0606.tistory.com
반응형
'OpenLayers(오픈레이어스)' 카테고리의 다른 글
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글