본문 바로가기
GIS/OpenLayers

[OpenLayers] 스와이프(Swipe) 기능 적용하기 (ft. ON/OFF 제어)

by 썸머워즈 2020. 8. 17.
반응형


- OpenLayers Swipe 기능 적용하기 -


이번에도 역시 oplayers-extension 에서 가져온 기능을 사용할것이다.


사실 예제가 아주 잘되어있기에 가져다 쓰기만 하면 된다.


https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html


기본 예제에서 추가적으로 ON/OFF 로 제어하는 방법까지 기록해보자.

(ON/OFF는 다른방법도 많겠지만 일단 잠깐 맛보기로 적용시켜 본것이다.)


<!doctype html>
<html lang="ko">
<head>
<!-- OpenLayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- OpenLayers extension -->
<link rel="stylesheet" href="../ol-ext.css">
<script src="../ol-ext.js"></script>

<style>
#map {
height: 800px;
width: 100%;
}
</style>
<title>OpenLayers-vworld</title>
</head>
<body>
<h2>OpenLayers_MAP</h2>
<div id="map" ></div>
<button type="button" class="control_btn swipeBtn" onclick="modeSW(this)" ><span class='tool_name'>SWIPE</span></button>
</body>
<script type="text/javascript">

//기본지도
var vwBaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
//Vworld Tile 변경
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
})
});

//회색지도
var vwGrayLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/gray/202002/{z}/{x}/{y}.png'
})
});

var map = new ol.Map({
target : 'map',
layers: [vwGrayLayer,vwBaseLayer],
view: new ol.View({
center: [14126669.41589247, 4493404.190498611],
zoom: 7,
minZoom: 7,
maxZoom: 19
})
});

function modeSW(dom){
$(dom).toggleClass("on");
return $(dom).hasClass("on")? swipeOn() : swipeOff();
}

var ctrl;

function swipeOn(){
// Control
ctrl = new ol.control.Swipe();
map.addControl(ctrl);
// Set stamen on left
ctrl.addLayer(vwBaseLayer);
// OSM on right
ctrl.addLayer(vwGrayLayer,true);
}

function swipeOff(){
var i;
var l;
if (ctrl.getMap()) {
for (i=0; i<ctrl.layers.length; i++) {
l = ctrl.layers[i];
if (l.right) l.layer.un(['precompose','prerender'], ctrl.precomposeRight_);
else l.layer.un(['precompose','prerender'], ctrl.precomposeLeft_);
l.layer.un(['postcompose','postrender'], ctrl.postcompose_);
}
ctrl.getMap().renderSync();
}
ol.control.Control.prototype.setMap.call(ctrl, map);

//map에 쌓여있는 swipe-control 삭제
for(var j = 0 ; j < map.controls.array_.length ; j++){
var check = $(map.controls.array_[j].element);
if(check.hasClass("ol-swipe")){
map.removeControl(map.controls.array_[j]);
}
}

//레이어 및 제어 버튼 제거
$('div').remove(".ol-swipe");
}
</script>
</html>


OpenLayers extension 에서 제공하는 ol.control.Swipe() 기능을 사용한 것이다.


그저 스와이프 기능만 적용한다면

 swipeOn() 메소드에 존재하는 4줄만 가져다 쓰면 사용할 수 있다.


swipe를 가진 control 을 map에 넣어줘서 사용하는것이다.


swipeOff() 메소드에 존재하는 코드는 따로 만들어낸 코드는 아니고

ol-ext.js 에 존재하는 swipe 관련 스크립트에서 뽑아온것이다.


swipe는 꺼지는데 map에 계속 남아있어서 아래에 추가적으로 제거를 해주고 버튼도 남아있어서 제거해주었다.

더 좋은 방법이 있을텐데 일단 이렇게 테스트 해보았다.



이렇게 on/off로 swipe를 제어하는데 까지는 해보았는데


동적으로 레이어를 변경하는것은 아직 시도해보진 않았으나 


그리 어려울거같지는 않다.


extension 기능을 사용하기 위해서는 ol-ext.js 와 ol-ext.css 파일이 꼭 필요하다.

반응형


댓글

TOP