안녕하세요 캡틴개구리입니다. 요즘 갑자기 추워졌습니다 감기조심하세요~~~
오늘 소개할 내용은 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 |