반응형
오픈레이어스의 기본인 배경지도 불러오기를 해볼려고한다.
오픈레이어스 설치에 대해서는 cdn으로 간략하게 설치해보자
<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>
</body>
</html>헤더에 오픈레이어스의 스타일과 스크립트를 추가했다.
자세한 설치사항은 아래 링크를 참조하면 된다.
https://openlayers.org/en/latest/doc/quickstart.html
설치가 끝난 후 지도를 매핑할 엘리먼트를 생성해준다.
<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"></div>
</body>
</html>id가 map인 div 영역에 지도를 생성할 예정이다.
오픈레이어스 설치가 끝난 후 id가 map인 div 밑에 스크립트 태그를 추가해서 시작해볼 것이다.
<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"></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
});
//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
center:[14248656.389982047, 4331624.063626864],
zoom:8,
});
var mapView = new ol.Map({
target:"map" // 지도를 생성할 element 객체의 id 값,
layers:[viewLayer] //생성한 레이어 추가,
view:view //view 설정
});
</script>
</body>
</html>아래의 이미지와 같이 확인할 수 있을 것이다.
다음번 포스팅에서는 기본 맵 컨트롤을 생성하고 포인트, 라인스트링, 폴리곤을 생성해보는 예제를 진행할 것이다.
아래 링크에서 소스를 확인해볼 수 있다.
plnkr.co/edit/lTbvGrrd3JPkuygZ?preview
Plunker - OpenLayers-overview
Plunker is loading… I eat z-index for breakfast.
plnkr.co
반응형
'JS > Openlayers' 카테고리의 다른 글
| 오픈레이어스 csv 포인트 cluster 시각화 예제 (0) | 2021.05.03 |
|---|---|
| Openlayers point 벡터 레이어 생성 예제 (0) | 2021.04.29 |
| Openlayers mouse position 예제 마우스 커서 위치 좌표 가져오기 예제 (0) | 2021.04.28 |
| OpenLayers overview map 생성 예제 (0) | 2021.04.27 |
| openlayers 좌표계 변경하기 EPSG:3857 -> EPSG:4326 (0) | 2021.04.04 |