안녕하세요 캡틴개구리입니다. 오늘은 Openlayers와 leaflet에서 Vworld 배경지도를 불러오도록 하겠습니다. 

일단 결과는 아래와 같습니다.

> 서비스바로가기

Openlayers3 & leaflet 라이브러리를 다운받으실 수 있는 위치를 함께 알려드리겠습니다.


OpenLayers3 사이트  :  https://openlayers.org/ 

Leaflet 사이트 : http://leafletjs.com/

VWORLD 사이트  :  http://map.vworld.kr


1. Openlayers3 및 leaflet의 라이브러리를 추가한다.
  Openlayers3 및 leaflet의 라이브러리를 원하는 위치에 추가합니다.

1
2
3
4
5
6
7
8
9
 
 
<link type="text/css" rel="stylesheet" href="<c:url value='/css/openlayers/ol.css'/>" />
<link type="text/css" rel="stylesheet" href="<c:url value='/css/leaflet/leaflet.css'/>" />
<script src="<c:url value='/js/openlayers/ol.js'/>"></script>
<script src="<c:url value='/js/leaflet/leaflet.js'/>"></script>
 
 
 
cs

2-1 . 지도 띄우기 (Openlayers3)

 Openlayers3와 leaflet의 지도를 웹상에 띄우는 방법은 유사했습니다. 

소스를 추가할 부분은 <script></script>부분과 <body></body>부분 두곳입니다. 먼저 <script>부분은 아래와 같습니다.

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
 
<script type="text/javascript">
    
        //openlayers 지도 띄우기 (EPSG : 4326)
        var map = new ol.Map({
            target: 'map',
            layers: [
                  new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        //Vworld Tile 변경
                        url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
                    })
                  })
            ],
            view: new ol.View({
                //경도,위도 (EPSG : 4326)
                center: [14128579.82, 4512570.74],
                zoom: 14,
                minZoom: 10,
                maxZoom: 19
            }),
            logo:false
          });
                
    
</script>
 
 
 
cs

변수 map 선언 후, Openlayers3 라이브러리 중 Map을 불러오는 함수를 이용합니다. (new ol.Map)

target의 map은 <div>의 id로 사용됩니다. 그리고 Vworld 지도 이미지정보를 받기 위해서 url부분에 

url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'

반드시 넣어주셔야합니다. 참고로 현재 화면에 보이는 url은 테스트용으로 실제로 사용하실려면 api-key를 신청하셔서 사용하시면 됩니다.

화면 실행 시, map 의 View위치는 ol.View()에 넣으시면 됩니다. center : [경도, 위도], zoom : map 확대 레벨, minZoom & maxZoom : map 최대 최소레벨 표시

다음은 <body>부분입니다. 사실 <body>부분은 너무나 간단합니다...너무나 간단하여 스타일과 함께 보여드리겠습니다.(스타일은 변경하셔도 무방합니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<style>
#map {
    height: 390px;
    width: 100%;
    
    
}
</style>
 
<body>
 
    <div id="map" class="map"></div>
            
</body>
 
 
cs

참고로 <script>의 target이 <div>의 id라고 말씀드렸었습니다. 따라서 라이브러리를 통해 불러온 지도를 <div>내에 표출하는것입니다. 

이로인해 Openlayers를 이용한 Vworld 지도 띄우기는 끝입니다. 


2-2 . 지도 띄우기 (leaflet)

leaflet 또한 Openlayers3과 유사한 방법으로 지도를 띄울 수 있습니다. leaflet의 라이브러리 추가는 글 1번에서 Openlayers 라이브러리와 함께 보여드렸기때문에 넘어가도록 하겠습니다.

소스를 추가할 부분은 <script></script>부분과 <body></body>부분 두곳으로 Openlayers3와 동일합니다. <script>부분은 아래와 같습니다.

1
2
3
4
5
6
7
8
<script type="text/javascript">
    
        //leaflet 지도 띄우기 (EPSG : 4326)
        var leafletMap = L.map('leafletMap').setView([37.52470308242787, 14129046.928310394],14)
        //Vworld Tile 변경
        L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);
    
</script>
cs

leaflet는 Openlayers와 유사하지만 좌표를 넣는 부분에서 차이를 보입니다. Openlayers3의 경우, 경도 위도 순으로 좌표계를 입력하지만

leaflet의 경우 위도 경도 순으로 좌표를 넣어야합니다. --> setView([위도, 경도],줌레벨)

그리고 Vworld를 지도에 띄우기 위해 L.tileLayer에 Vworld 테스트용 API키를 입력합니다.

<body>부분은 Openlayers와 마찬가지로 매우 간단합니다.

1
2
3
4
5
6
7
8
9
10
11
<style>
#leafletMap{
    height: 390px;
    width: 100%;
    
}
 
</style>
 
<div id="leafletMap" class="lea"></div>
cs


이렇게 소스를 넣으시고 html를 조정해주신다면 쉽게 Openlayers 와 leaflet에 Vworld 배경지도를 이용하실 수 있으실 겁니다. 

> 서비스바로가기



'꿀팁 - OpenLayers, Leaflet' 카테고리의 다른 글

OpenLayers와 Leaflet에서 Feature 이벤트 연동  (2) 2018.11.29
OpenLayers와 Leaflet에서 Image Overlay  (0) 2018.11.28
OpenLayers와 Leaflet에서 Feature Clustering  (0) 2018.11.22
OpenLayers 와 Leaflet에서 WFS 이용하기  (0) 2018.11.15
OpenLayers 와 Leaflet에서 WMS 이용하기  (0) 2018.11.15

+ Recent posts

티스토리툴바