본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


OpenLayers(오픈레이어스)

Openlayers change map (오픈레이어스 맵 바꾸기, Openlayers 맵 변경)

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 9. 26.

 

이번엔 오픈레이어스 객체위치를 바꾸는 방법 입니다.

쉽게 설명하면, 기존에 만들어놓은 맵 데이터를 다른 테그에 옮기는 방법 입니다.

내가 한 행위, 내가 그린 대상 및 정보 전부 다른 테그로 옮길 때 사용 합니다.

기본 레이어를 생성 합니다.

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);

 

동작중인 사진 입니다.

움직 입니다!

 

아래 소스코드를 첨부합니다!

Open_test.7z
0.38MB

 

 

* 해당 내용은 npm과 parcel 환경으로 구성되어 있습니다.

* 아래 주소를 통해 환경구성을 하면 이해하기 쉽습니다.

https://lts0606.tistory.com/194?category=726697

 

Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)

오픈레이어스는 브라우저에서 지도를 활용한 정보를 표출하는 라이브러리이다. 네이버지도, 구글지도 및 다음지도 처럼 GIS(geographic information system) 라는 명칭으로 불리우며 지형정보 서버를 따로 구축 할..

lts0606.tistory.com

 

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글