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

오늘은 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.824512570.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.52470308242787126.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

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


서비스바로가기

+ Recent posts