안녕하세요 캡틴개구리입니다.

이번시간은 Openlayers3(OL3)와 Leaflet에 Static Image를 올려보겠습니다.

그전에 결과화면부터 보겠습니다.

> 서비스바로가기


Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다. 

OpenLayers3 :  https://openlayers.org/ 

Leaflet : http://leafletjs.com/


활용 좌표계 : EPSG 4326


1. Openlayers3 및 Leaflet Image Overlay(Static Image)


이번에는 소스가 그렇게 길지 않고 간단하여 OL3와 Leaflet을 함께 진행해보도록 하겠습니다.


OL3 활용 라이브러리 : ol.Map, ol.layer.Tile, ol.layer.Image, ol.source.ImageStatic, ol.View

Leaflet 활용 라이브러리 : L.map, L.tileLayer, L.imageOverlay


<script></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
 

    //openlayers3
    var extent = [126.924628, 37.518308, 126.926628, 37.520308]  // image size is 128x128 px
    
    var map = new ol.Map({
        
        layers: [
              new ol.layer.Tile({
                
                source: new ol.source.OSM()
              }),
              new ol.layer.Image({
                  source: new ol.source.ImageStatic({
                    url: '/images/common/example5OL.png',
                    crossOrigin: '',
                    projection: 'EPSG:4326',
                    imageExtent: extent
                  })    
              })
        ],
        target: 'map',
        view: new ol.View({
            projection : 'EPSG:4326',      
            center: extent,
            zoom: 16
            
        })
    });
    
    //leaflet 지도
    var leafletMap = L.map('leafletMap').setView([37.518308, 126.924628],16)
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(leafletMap);
    
    var imageUrl = '/images/common/example5Leaflet.png',
        imageBounds = [[37.518308, 126.924628], [37.520308, 126.926628]];
 
    L.imageOverlay(imageUrl, imageBounds).addTo(leafletMap);
    

</script>
cs

OL3와 Leaflet에서 Image를 Overlay함에 있어서 가장 중요한 부분은 좌표계였던것 같습니다. 그리고 

OL3 Extent는 경도 위도 순으로 [minX, minY, maxX, maxY] 넣어주시면 됩니다. 

Leaflet imageBounds는 위도 경도 순으로 [[minY,minX],[maxY,maxX]] 넣어주시면 됩니다.

저는 프로그웍그 로고를 넣었습니다 ㅎㅎㅎ

<body></body>부분입니다.

1
2
<div id="map"></div>
<div id="leafletMap"></div>
cs


마지막으로 이 기능은 어디에 사용할까요? 혹시 현재 지도 위에 옛날 고지도 또는 일부 지역의 위성영상 등을 오버레이 할 때 사용합니다.

결과화면은 아래와 같습니다.


> 서비스바로가기

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

OpenLayers와 Leaflet에서 User Control 등록하기(거리재기)  (0) 2019.01.11
OpenLayers와 Leaflet에서 Feature 이벤트 연동  (2) 2018.11.29
OpenLayers와 Leaflet에서 Feature Clustering  (0) 2018.11.22
OpenLayers 와 Leaflet에서 WFS 이용하기  (0) 2018.11.15
OpenLayers 와 Leaflet에서 WMS 이용하기  (0) 2018.11.15

안녕하세요 캡틴개구리입니다. 

OpenLayers3(OL3)와 Leaflet에서 Feature Clustering을 알아보도록 하겠습니다. 

그전에 결과화면부터 보겠습니다.

> 서비스바로가기


Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다. 

OpenLayers3 :  https://openlayers.org/ 

Leaflet : http://leafletjs.com/

VWORLD :  http://map.vworld.kr


leaflet.zip

 첨부파일(.Zip)은 leaflet에서 클러스터링을 진행하기 위해 추가적으로 필요한 자료들입니다. 


1. Openlayers3(이하 OL3)


활용 라이브러리 : ol.format.GeoJSON, ol.source.Vector, ol.loadingstrategy.bbox, ol.source.Cluster, ol.layer.Vector, ol.style.Style, ol.style.Stroke, ol.style.Fill

ol.style.Text, ol.layer.Tile, ol.source.XYZ, ol.Map, ol.View


지난시간에 알려드린 Openlayers3에서 wfs를 올리는 방법에 기초하여 소스 추가를 통해 Feature Clustering을 진행해보겠습니다.

<script></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script type="text/javascript">
    //Openlayers3
    var distance = 30;
    var format = new ol.format.GeoJSON();
    
    var vectorSource = new ol.source.Vector({
        format : format,
        url: function(extent) {
            return 'http://***.****.***/geoserver/progworks/wfs?service=WFS&' +
                'version=1.1.0&'+
                'request=GetFeature&'+
                'typename=progworks:lptd_ldreg_dogeun_point_info_2&' +
                'outputFormat=application/json&'+
                'srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857';
        },
        strategy: ol.loadingstrategy.bbox
    })
    
    var clusterSource = new ol.source.Cluster({
        distance: parseInt(distance, 30),
        source: vectorSource
    });
    
    var styleCache = {};
    var clusters = new ol.layer.Vector({
        source: clusterSource,
        style: function(feature) {
            var size = feature.get('features').length;
            var style = styleCache[size];
            if (!style) {
                style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 20,
                        stroke: new ol.style.Stroke({
                            color: '#ffffff'
                            
                        }),
                        fill: new ol.style.Fill({
                            color: '#ff9933'
                        })
                    }),
                    text: new ol.style.Text({
                        text: size.toString(),
                        font:'Bold 20px Verdana',
                        fill: new ol.style.Fill({
                            color: '#ffffff'
                            
                            
                        })
                    })
                });
            styleCache[size] = style;
            }
        return style;
        }
    });
    
    var raster = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
        })
    });
    
    var map = new ol.Map({
        
        layers: [raster,clusters],
       
        target: document.getElementById('map'),
       
        view: new ol.View({
          center: [14128579.82, 4512570.74],
          maxZoom: 19,
          zoom: 10
        })
    });
});
</script>
cs

소스가 점점 길어지는거 같습니다... ㅠㅠ 하하하하하 

먼저 Feature Clustering를 위해 데이터는 불러와야합니다. 데이터 출저는 "국가공간정보포털 오픈마켓의 지적도근점 정보를 이용하였습니다.

데이터는 wfs으로 불러와 변수 vectorSource에 담았습니다.

그후 clusterSource에서 wfs방식으로 불러온 데이터를 활용하여 Cluster를 진행하였습니다. 그 이후 스타일 지정 이후 map에서 layers로 스타일이 지정된 변수 clusters를 불러오면 끝입니다. 

<boby></body>부분은 아래와 같습니다.

1
<div id="map"></div>
cs


2. Leaflet

활용 라이브러리 : L.map, L.tileLayer, L.Util.extend, L.Util.getParamString, L.geoJson, L.markerClusterGroup

<script></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
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
//Leaflet
    var leafletMap = L.map('leafletMap').setView([37.52470308242787, 126.9234],10)
    L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);
    
    var owsrootUrl = 'http://***.****.***/geoserver/progworks/wfs';
    
    var defaultParameters = {
        service : 'WFS',
        version : '1.1.0',
        request : 'GetFeature',
        typeName : 'progworks:lptd_ldreg_dogeun_point_info_2',
        outputFormat : 'application/json',
        format_options : 'callback:getJson',
        SrsName : 'EPSG:4326',
    };
    
    var parameters = L.Util.extend(defaultParameters);
    
    var URL = owsrootUrl + L.Util.getParamString(parameters);
    
    var WFSLayer = null;
        
    var ajax = $.ajax({
        url : URL,
        dataType : 'json',
        jsonpCallback : 'getJson',
        success : function(response){
            markers.addLayer(L.geoJson(response));
        }
    });
    
    var markers = L.markerClusterGroup({
        //Disable all of the defaults:
        spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: false
    });
    
    leafletMap.addLayer(markers);
</script>
cs

Leaflet에서도 Openlayers3에서 데이터를 불러왔던 wfs형태로 데이터를 불러오도록 하겠습니다.

Leaflet Feature Clustering에서 가장 중요한 부분은 29행부터 입니다.!!!!!!!!

JQuery ajax를 이용하여 wfs형태의 데이터로 불러온 데이터를 기존에는 바로 " addTo(leafletMap); "  했지만 이번에는 변수 markers에 담아줍니다.

이렇게 " markers.addLayer(L.geoJson(response)); " 이후 L.markerClusterGroup 함수를 이용하여 Clusterring이 진행됩니다.

그리고 그렇게 진행된 markers를 " leafletMap.addLayer(markers); "를 해주시면 끝이납니다.

<boby></body>부분은 아래와 같습니다.

1
<div id="leafletMap"></div>
cs


결과화면은 아래와 같습니다.


> 서비스바로가기


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

OpenLayers와 Leaflet에서 Feature 이벤트 연동  (2) 2018.11.29
OpenLayers와 Leaflet에서 Image Overlay  (0) 2018.11.28
OpenLayers 와 Leaflet에서 WFS 이용하기  (0) 2018.11.15
OpenLayers 와 Leaflet에서 WMS 이용하기  (0) 2018.11.15
OpenLayers 와 Leaflet에서 Vworld 배경지도 이용하기  (4) 2018.11.15

안녕하세요 캡틴개구리입니다.

오늘은 OpenLayers 와 Leaflet에서 WFS 이용하는 방법을 알아보도록 하겠습니다.


먼저 결과화면은 아래와 같습니다.

> 서비스바로가기

관련 라이브러리 함수

Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다. 

OpenLayers3 :  https://openlayers.org/ 

Leaflet : http://leafletjs.com/

VWORLD :  http://map.vworld.kr


좌표계

 * OpenLayer3 : EPSG 3857

 * Leaflet : EPSG 4326


1. OpenLayers3(이하 OL3)

활용 라이브러리 : ol.source.Vector, ol.format.GeoJSON, ol.loadingstrategy.bbox, ol.layer.Vector, ol.style.Style, ol.style.Stroke, ol.layer.Tile, ol.source.XYZ,

ol.Map, ol.View 

OL3에 WFS를 올리는 방식은 WMS를 올리는 방식과 유사합니다. 그럼 먼저  <script></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script type="text/javascript">
    $(document).ready(function(){
 
 
        var vectorSource = new ol.source.Vector({
            format : new ol.format.GeoJSON(),
            url: function(extent) {
                return 'http://***.****.****/geoserver/progworks/wfs?service=WFS&' +
                'version=1.1.0&'+
                'request=GetFeature&'+
                'typename=progworks:z_upis_c_uq152&' +
                'outputFormat=application/json&'+
                'srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857';
            },
            strategy: ol.loadingstrategy.bbox
        })
 
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });
 
 
        var raster = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
            })
        });
        
 
        var map = new ol.Map({
            
            layers: [raster,vector],
           
            target: document.getElementById('map'),
           
            view: new ol.View({
              center: [14128579.82, 4512570.74],
              maxZoom: 19,
              zoom: 14
            })
        });
                        
    });
 
</script>
cs

wfs를 불러올때 중요한 부분은 16행 부분이라 생각합니다. 여기에 선언한 ol.loadingstrategy.bbox 라이브러리는 wfs요청문에 bbox(Spatial Filter)가 자동으로 추가되어 서버에 요청을 하는것으로, 줌 레벨이 변결 될 경우, 이전 영역보다 작다면 서버에는 재요청을 하지 않도록합니다. 


<body></body>부분은 아래와 같습니다.

1
<div id="map"></div>
cs


2. Leaflet

활용 라이브러리 : L.map, L.tileLayer, L.Util.extend, L.Util.getParamString, L.geoJson 

<script></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
    $(document).ready(function(){
                
        
        var leafletMap = L.map('leafletMap').setView([37.52470308242787, 126.9234],14)
                
        L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);
          
        var owsrootUrl = 'http://***.****.***/geoserver/progworks/wfs';
        
        var defaultParameters = {
            service : 'WFS',
            version : '1.1.0',
            request : 'GetFeature',
            typeName : 'progworks:z_upis_c_uq152',
            outputFormat : 'application/json',
            format_options : 'callback:getJson',
            SrsName : 'EPSG:4326',
        };
        
        var parameters = L.Util.extend(defaultParameters);
        
        var URL = owsrootUrl + L.Util.getParamString(parameters);
        
        var WFSLayer = null;
        
        var ajax = $.ajax({
            url : URL,
            dataType : 'json',
            jsonpCallback : 'getJson',
            success : function(response){
                WFSLayer = L.geoJson(response, {
                    style : function(feature){
                        return{
                            stroke: 'rgb(255, 0, 0)',
                            fillcolor : 'rgba(0, 0, 0, 0.3)',
                        }
                    }
                }).addTo(leafletMap);
            }
        })
    });
</script>
 
cs

23행에서 선언한 URL에 wfs의 경로와 정보를 담고 그 정보를 이용하여 JQuery ajax를 이용하여 wfs를 받아옵니다.

받아온 정보를 이용하여 L.geoJson 라이브러리를 이용하여 Leaflet 지도에 추가합니다.


<body></body>부분은 아래와 같습니다.

1
2
<div id="leafletMap"></div>
 
cs

결과화면은 아래와 같습니다.


> 서비스바로가기

'꿀팁 - 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에서 WMS 이용하기  (0) 2018.11.15
OpenLayers 와 Leaflet에서 Vworld 배경지도 이용하기  (4) 2018.11.15

안녕하세요 캡틴개구리입니다. 요즘 갑자기 추워졌습니다 감기조심하세요~~~

오늘 소개할 내용은 OpenLayers와 Leaflet에서 WMS를 이용하는 방법을 알려드리겠습니다. 

참고사항으로 OpenLayers는 OepnLayers3를 이용하고 있습니다. 

결과 서비스 화면은 아래와 같습니다. 

> 서비스바로가기


Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다. 

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

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

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


 * OpenLayer3 : EPSG : 3857

 * Leaflet : EPSG :4326


1. Openlayesr3

 Openlayers3(이하 OL3)에서 WMS를 지도위에 올려보도록 하겠습니다. 


이번글은 지난번에 올린 "Openlayers와 Leafle에서 Vworld 배경지도 이용하기"와 연결됩니다. 


OL3에서 지도를 이용할때, 이전에는 OL3의 라이브러리를 이용하여 URL만 Vworld로 변경했었습니다. 이번에는 지도위에 WMS를 이용하여야 하기 때문에 한단계 더 진행하도록 하겠습니다.


사용할 라이브러리를 아래와 같습니다.


--> 지도 띄우기 : ol.Map, ol,View 

--> WMS 이용하기 : ol.layer.Tile, ol.source.TileWMS


지도를 띄우고, 그 지도에 TileWMS를 올리기 위해서 <script></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
    $(document).ready(function(){
        //openlayers 지도 띄우기        
        var layerName = 'z_upis_c_uq152';
        var wmsSource = new ol.source.TileWMS({
            urls: [
                "http://progworks.paas.lx.or.kr/wms.do"
               , "http://progworks01.paas.lx.or.kr/wms.do"
               , "http://progworks02.paas.lx.or.kr/wms.do"
               , "http://progworks03.paas.lx.or.kr/wms.do"
               , "http://progworks04.paas.lx.or.kr/wms.do"                
               , "http://progworks05.paas.lx.or.kr/wms.do"                
               , "http://progworks06.paas.lx.or.kr/wms.do"                
               , "http://progworks07.paas.lx.or.kr/wms.do"                
            ],
            params: {'LAYERS' : layerName,
                        'FORMAT':'GIF',
                        'TRANSPARENT':'TRUE',
                        'STROKECOLOR' : 'rgb(255, 0, 0)',        
                        'FILLCOLOR' :  'rgba(0, 0, 0, 0.3)'
                        
                    },
            serverType: 'geoserver',
        });
        
        var layer = new ol.layer.Tile({
            source : wmsSource,
            minResolution: 0.1,
            maxResolution: 20,            
            layerName : layerName,
            layerCategory : 'WMS',
            type : 'WMS',
            visible : true,
            opacity :0.8
        });
 
        var map = new ol.Map({
            target: 'map',
            layers: [
                  new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        
                        url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
                    })
                  }),
            ],
            view: new ol.View({
                center: [14128579.82, 4512570.74],
                zoom: 14,
                minZoom: 10,
                maxZoom: 19,
            }),
            
          });
        map.addLayer(layer);  
    })
</script>
cs

6행 : OL3 지도위에 올릴 WMS 파일을 변수에 넣었습니다. 활용 데이터 출처는 "국가공간정보포털 오픈마켓 교통시설(현황)"데이터입니다.

7행 : WMS의 포맷에 따라 사용하는 라이브러리가 다릅니다. 저같은 경우, ol.source.TileWMS를 이용하였습니다.

 - urls : wms 데이터 위치

 - params : layer의 이름, 포맷, 스타일 등등

 - serverType : 사용하는 서버 타입

28행 : 5행에서 변수 wmsSource에 담은 값을 가지고 ol.layer.Tile 라이브러를 이용하여 layer를 생성하도록 하겠습니다.

 - source : 5행에 선언한 변수명

 - minResolution : 0.1(해상도)

 - maxResolution : 20(해상도)

 - layerName : 4행에 선언한 데이터 변수명

56행 : 지도에 추가하는 부분입니다.

<body></body>부분은 아래와 같습니다.

1
<div id="map"></div>
cs


2. Leaflet

 두번째로 Leaflet에서 WMS를 올려보도록 하겠습니다.

Leaflet 또한 포스팅한 글 "Openlayers와 Leafle에서 Vworld 배경지도 이용하기"와 연결됩니다.

--> 지도 띄우기 : L.map , L.tileLayer

--> WMS 이용하기 : L.tileLayer.wms

<script></script>부분을 먼저 살펴보도록 하겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
    $(document).ready(function(){
        
        var leafletMap = L.map('leafletMap').setView([37.52470308242787, 126.9234],14)
        
        L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);    
        
        var wmsLayer = L.tileLayer.wms('http://***.***.**/geoserver/progworks/wms', {
            layers: "progworks:z_upis_c_uq152",
            format: 'image/png',
            transparent: true,
            version: '1.1.0',
            tileSize: 256,
            zIndex: 100,
            crs: L.CRS.EPSG4326
        }).addTo(leafletMap);
    })
</script>
cs

4행과 6행은 지난번 Leaflet에서 Vworld 지도를 불러오는 부분입니다. 

wms를 불러오기위한 부분은 8행입니다. 이제 8행부분에 대하여 살펴보도록 하겠습니다.

8행 : Leaflet에서 wms를 이용하기 위하여 사용하는 라이브러리 L.tileLayer.wms 입니다. L.tileLayer.wms(wms 데이터 위치, 옵션)형태로 넣어주시면 됩니다.

16행 : OL3와 마찬가지로 지도에 추가하는 부분입니다. 

<body></body>부분은 아래와 같습니다.

1
<div id="leafletMap"></div>
cs


OL3와 Leaflet의 결과 화면입니다.


> 서비스바로가기

'꿀팁 - 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에서 Vworld 배경지도 이용하기  (4) 2018.11.15

안녕하세요 캡틴개구리입니다. 오늘은 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

티스토리툴바