티스토리 뷰
Openlayers는 지도 데이터의 시각화와 조작을 편리하도록 하는 오픈소스 기반의 자바스크립트 라이브러리이다.
배경지도로 사용할 수 있는 여러 상용지도(구글맵, 네이버 지도, 카카오 지도... 등)와 OpenStreetMap과 같은 무료로 사용할 수 있는 맵들 위에 여러 가지 작업을 할 수 있다.
이 배경지도위에 오픈 레이어스가 하는 일은 지도 위에 마커를 찍는다던지.. 레이어를 쌓아서 배경지도 위에 레이어를 표시할 수 있게 한다.
여기서는 vworld라는 공간정보산업진흥원에서 제공하는 배경지도를 사용한다.
배경지도라고 하는것은 말 그대로 지도의 배경 (타일)만 사용할 수 있는 이야기이다. 물론 브이월드에도 2d 지도에서는 브이월드가 자체적으로 openlayers를 활용해서 만든 기능들이 있다.
설명을 보면 openlayers3 버전을 기반으로 개발되었다고 한다. 코드 샘플을 살펴보면 openlayers3 버전을 래핑 해서 브이월드가 사용하기 쉽게? 객체로 제공해주는 것 같다.
즉 openlayers3 의 기본 기능을 개발자가 직접 래핑 해서 사용할 수 도 있다는 이야기이다.
그런데 지금 하려는 것은 우리는 tile만(지도이미지) 받아서 그 위에는 내가 직접 openlayers를 사용해서 지도 위 데이터를 표현하고 조작할 수 있게 하려는 것이다.
그럴 때는 wmts (web map tile service)를 사용하면 된다. 브이월드에서도 이 API를 제공한다.
각설하고 코드를 작성해보려고 했는데 이미 브이월드 홈페이지 자료실에 브이월드 API 샘플이라는 자료에 소스가 다 있다..
이 소스는
1번 오픈레이어스 브이월드 WMTS API 적용 부분이다.
<!DOCTYPE html>
<!--
Openlayers 기본지도 생성, WMTS API
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>브이월드 WMTS 배경지도 사용하기 오픈레이어스 3버전 이상</title>
<script src="../js/ol.js"></script>
<link rel="stylesheet" href="../js/ol.css" type="text/css">
<!--
https://openlayers.org/en/v6.4.3/build/ol.js
https://openlayers.org/en/v5.3.0/build/ol.js
https://openlayers.org/en/v4.6.5/build/ol.js
https://openlayers.org/en/v3.20.1/build/ol.js
https://openlayers.org/en/v6.4.3/css/ol.css
https://openlayers.org/en/v5.3.0/css/ol.css
https://openlayers.org/en/v4.6.5/css/ol.css
https://openlayers.org/en/v3.20.1/css/ol.css
-->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 350px; left: 0px; top: 0px"></div>
<script type="text/javascript">
let Base = new ol.layer.Tile({
name : "Base",
source: new ol.source.XYZ({
url: 'http://api.vworld.kr/req/wmts/1.0.0/CEB52025-E065-364C-9DBA-44880E3B02B8/Base/{z}/{y}/{x}.png' // WMTS API 사용
})
});
let OSM = new ol.layer.Tile({
name : "Base",
source: new ol.source.OSM()
});
// var debug = new ol.layer.Tile({
// name : "debug",
// source: new ol.source.TileDebug() //ol 6버전에 생김
// }); // 타일의 넘버링을 확인할 수 있음 z: 레벨 / y 위 아래 , x 좌 우 /{z}7/{y}47/{x}111.png
let olView = new ol.View({
center: ol.proj.transform([127.100616,37.402142], 'EPSG:4326', 'EPSG:3857'),//좌표계 변환
zoom: 10
})// 뷰 설정
let map = new ol.Map({
layers: [OSM,Base], //[OSM,Base,debug]
target: 'map',
view: olView
});//
</script>
</body>
</html>브이월드를 사용하려면 Base를 사용하고 Openstreetmap 을 사용하려면 OSM을 사용하게 되어있다.
map객체를 생성할 때 레이어를 지정해서 생성할 수 있다.
참고
브이월드 자료실 API 샘플
공간정보 오픈플랫폼 오픈API
자료실 오픈API 활용에 도움이 되는 다양한 자료를 제공합니다. -->
www.vworld.kr
- Total
- Today
- Yesterday
- Spring Security
- docker
- svn
- intellij
- springboot
- maven
- config-location
- JavaScript
- Mac
- window
- k8s
- Kotlin
- elasticsearch
- jQuery
- mybatis config
- Github Status
- input
- LocalDate
- 베리 심플
- Java
- Spring
- localtime
- mybatis
- Linux
- rocky
- LocalDateTime
- oracle
- 오라클
- 북리뷰
- Bash tab
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |