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