Openlayers overviewmap을 생성하는 예제를 해보도록 하겠다.
보통 보이는 위치가 대략적으로 어디인지 확인하기 위해 많이들 사용한다.
오픈 레이어스의 설치는 생략하겠다.
맵 레이어와 오버뷰 맵의 레이어는 브이월드 타일 레이어로 추가해서 작업을 했다.
전체 소스는 아래와 같다.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>openlayers - dev-jhs</title>
</head>
<body>
<h2>오픈 레이어스 브이월드 배경지도 테스트</h2>
<div id="map" class="map" style="width:100%;height:80%;"></div>
<script>
//브이월드 타일레이어 url 설정
var source =new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
});
//타일레이어 생성하기
var viewLayer = new ol.layer.Tile({
source:source
});
//overviewmap 생성하기
var overViewMapCtrl = new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: source,
})],
collapsed: false,
});
//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
center:[14377556.389982047, 4186024.063626864],
zoom:14,
});
var mapView = new ol.Map({
target:"map", // 지도를 생성할 element 객체의 id 값,
layers:[viewLayer], //생성한 레이어 추가,
view:view, //view 설정
controls: ol.control.defaults().extend([overViewMapCtrl])
});
</script>
</body>
</html>
오버뷰 맵이 디폴트로 펼쳐져있는 걸 바로 확인하기 위해서 collapsed 옵션을 false로 설정하면 된다.
//overviewmap 생성하기
var overViewMapCtrl = new ol.control.OverviewMap({
layers: [
new ol.layer.Tile({
source: source,
})
],
collapsed: false //true일 경우 오버맵뷰의가 접힌 상태로 보인다.
});
그 외 오버맵뷰 컨트롤에 대한 여러 가지 옵션은 아래 링크를 참조하면 된다.
openlayers.org/en/latest/apidoc/module-ol_control_OverviewMap-OverviewMap.html
OpenLayers v6.5.0 API - Class: OverviewMap
This function is used to set a target element for the control. It has no effect if it is called after the control has been added to the map (i.e. after setMap is called on the control). If no target is set in the options passed to the control constructor a
openlayers.org
빠른 예제를 확인하기 위해 아래 링크를 첨부했다.
plnkr.co/edit/PZmjplotV8acUDGY
Plunker - opernlayers-overviewmap
Plunker is loading… Everything will be all right.
plnkr.co
'JS > Openlayers' 카테고리의 다른 글
| 오픈레이어스 csv 포인트 cluster 시각화 예제 (0) | 2021.05.03 |
|---|---|
| Openlayers point 벡터 레이어 생성 예제 (0) | 2021.04.29 |
| Openlayers mouse position 예제 마우스 커서 위치 좌표 가져오기 예제 (0) | 2021.04.28 |
| openlayers 브이월드 배경지도 추가하기 (0) | 2021.04.12 |
| openlayers 좌표계 변경하기 EPSG:3857 -> EPSG:4326 (0) | 2021.04.04 |