[Daum지도API] GeoServer의 WMS/WFS 사용하기

[Daum지도API] GeoServer의 WMS/WFS 사용하기다은지도API를 기반으로한 GeoServer의 WMS/WFS 사용으로, 최적방법이 아니므로 "사용"이라는 용어를 사용했습니다. 다른 방법도 많을겁니다.OpenLayers로  GeoServer의 WMS/WMTS/WFS 등 레이어로 데이터를 올리는 방법을 지원하고, 또, 관제모니터링에서는 다음지도 API로 간단한 뷰어를 사용하는데 자체보유 데이터를 중첩시키는 방식으로 GeoServer의 WMS/WFS를 사용하는 개발지원 샘플 소스를 만들어보았습니다.GIS개발툴(엔진)은 ArcGIS나 GEOMania 등 상용 툴처럼 GIS의 체계적인 구성과 클래스다이어그램을 지원하는것과좌표를 가진 그림판처럼 GIS뷰어에 가까운 개발툴로 구분이됩니다, 물론 중간 툴들도 많구요. 그림판 뷰어에 가까울수록응용개발자가 바쁘고, 아는 사람만 그때그때 고쳐쓰는 경우가 많지요. 물론, 다음이나 네이버 등 포털사이트의 API는 그림판 뷰어게 가깝다할 수있지만, 이건 고의적인 "다운"으로 일반 개발자가 GIS개념이 적은 상태에서도 쉽게 접근할 수 있게한 것일 겁니다.여기에서는 이러한 다음지도API중 WMS/WFS 사용하기 편리한 함수로 구현해보았습니다.그래서 정답이 아니라 여러방안중 한가리라는것을 고려해주세요 1. WFS방식 예제 : <a href="http://www.gisapplication.kr/daum_map/Main_WFS.html" target="_blank">http://www.gisapplication.kr/daum_map/Main_WFS.html</a> 2. WMS방식 예제 : <a href="http://www.gisapplication.kr/daum_map/Main_WMS.html" target="_blank">http://www.gisapplication.kr/daum_map/Main_WMS.html</a>데모소스는 계속된 수정본 유지를 위해서 한 게시글에만 첨부하였습니다. (<a href="https://cafe.naver.com/gisapplication/998" target="_blank">https://cafe.naver.com/gisapplication/998</a>) 예로, 원도는 국내 모든 보호지역이 있으나, 표현은 상수원보호, 국립/도립/군립 공원과 사용자 정의 보호지역만 표출합니다  <img src="https://t1.daumcdn.net/cfile/cafe/99E9C54D5CAAAFFE03" class="txc-image" width="1024" style="clear: none; float: none;" border="0" vspace="1" hspace="1" actualwidth="1024" exif="{}" data-filename="보호지역ALL.png" id="A_99E9C54D5CAAAFFE030FCB"/> <img src="https://t1.daumcdn.net/cfile/cafe/99D7414D5CAAAFFF0F" class="txc-image" width="1024" style="clear: none; float: none;" border="0" vspace="1" hspace="1" actualwidth="1024" exif="{}" data-filename="보호지역_다음WMSWFS.png" id="A_99D7414D5CAAAFFF0F16AC"/> 1. GeoServer의 데이터를 WFS방식으로 쿼리해서 다음의 new daum.maps.Polygon 함수로 표출하기.지도 MBR변화시 중복실행을 방지하고, JSON을 파서해서 하나하나를 그립니다.선 작업은 <a title="새창으로 열림" href="https://cafe.naver.com/gisapplication/988" target="_blank">"[GeoServer활용] WFS쿼리시 크로스도메인(cross-domain-policy) 해결하기</a>"를 참조하세요또는, php등 서버사이드언어로 CORS를 해결하면 됩니다.<table width="730" height="25" style="width: 730px; height: 25px;" bgcolor="#b7bbb5" border="0" cellspacing="1" cellpadding="1"><tbody><tr bgcolor="#ffffff"><td width="571"> <div style='color: rgb(0, 0, 0); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgb(255, 255, 255);'><div><!DOCTYPE html></div><div><html></div> <div><head></div><div>    <meta charset="UTF-8"></div> <div>    <style type="text/css"></div><div>        html,</div><div>        body {</div><div>            position: relative;</div><div>            width: 100%;</div><div>            height: 100%;</div><div>            border: none;</div><div>            margin: 0px;</div><div>            padding: 0px;</div><div>            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;</div><div>            font-size: small;</div><div>        }</div><div>        #header {</div><div>            position:relative;</div><div>            background-color: #fffff0;</div><div>            height: 50px;</div><div>            border: 2px solid #f15922;</div><div>            margin: 0;</div><div>            padding: 0;</div><div>        }</div><div>        #map {</div><div>            position:absolute;</div><div>            top:54px;</div><div>            bottom: 0px;</div><div>            width: 100%;</div><div>            height: auto;</div><div>            border: none;</div><div>            margin: 0;</div><div>            padding: 0;</div><div>        } </div><div>    </style></div><div>    <script type="text/javascript" src=<a href="http://dapi.kakao.com/v2/maps/sdk.js?appkey=" target="_blank">http://dapi.kakao.com/v2/maps/sdk.js?appkey=</a>발급받은키charset="utf-8"></script></div><div></head></div> <div><body></div><div>    <div id="header"></div><div>        관심지역 보이기: <input type="checkbox" id="myCheck" checked = "true" xxonclick="myFunction()"></div><div>    </div></div><div>    <div id="map"></div><div>        </div><div>    </div></div><div>    </div><div>    <script></div><div>        window.xxonload = function() {</div><div>            Init_Map();</div><div>        }</div><div>        var map;</div><div>        function Init_Map() {</div><div>            var container = document.getElementById('map');</div><div>            var options = {</div><div>                center: new daum.maps.LatLng(37.54699, 127.09598),</div><div>                level: 7</div><div>            };</div><div>            map = new daum.maps.Map(container, options);</div><div>            getGeoServerWFS(map);</div><div>            ///////////////////////////////////</div><div>            ///////////////////////////////////</div><div>            //중복실행방지</div><div>            var ticking = false;</div><div>            var debounce = (function() {</div><div>                return function(callback) {</div><div>                    window.setTimeout(callback, 1000 / 60);</div><div>                };</div><div>            })();</div> <div>            function updateWMS() {</div><div>                setTimeout(function() {</div><div>                    //if (map.getLevel() < 11) //데이터가 많을경우 적절하게 줌레벨에 따라 그리기</div><div>                       getGeoServerWFS(map);</div><div>                    //else remove_marker();</div><div>                    ticking = false;</div><div>                }, 500);</div><div>            }</div><div>            ///////////////////////////////////</div><div>            daum.maps.event.addListener(map, 'bounds_changed', function() {</div><div>                var checkBox = document.getElementById("myCheck");</div><div>                if ((checkBox.checked == true)&&(!ticking)) {</div><div>                    ticking = true;</div><div>                    debounce(updateWMS);</div><div>                }</div><div>            });</div><div>        }</div><div>        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div><div>        var markers = [];</div><div>        function remove_marker() {</div><div>            for (var i = 0; i < markers.length; i++) {</div><div>               markers[i].setMap(null);</div><div>            }</div><div>            markers = [];</div><div>        }</div><div>        function GetID_marker(id) {</div><div>            for (var i = 0; i < markers.length; i++) {</div><div>               var marker = markers[i];</div><div>               if(marker.id == id){</div><div>                 return true;</div><div>               }</div><div>            }</div><div>            return false;</div><div>        }</div><div>        function getGeoServerWFS(_map) {</div><div>            //_map.relayout();</div><div>            var container = document.getElementById('map');</div><div>            var imageSize = new daum.maps.Size(container.clientWidth, container.clientHeight);</div><div>            var Centerlatlng = _map.getCenter();</div><div>            var bounds = _map.getBounds();</div><div>            var minXY = bounds.getSouthWest();</div><div>            var maxXY = bounds.getNorthEast();</div><div>            var LAYERS = "kdpaMap,danger_area";</div><div>            var searchUrl = "<a href="http://www.gisapplication.kr:8080/geoserver/triphos/wfs?service=WFS&version=1.1.0&request=GetFeature" target="_blank">http://www.gisapplication.kr:8080/geoserver/triphos/wfs?service=WFS&version=1.1.0&request=GetFeature</a>"</div><div>                   +"&outputFormat=application/json&srsName=EPSG:4326"</div><div>                   + "&typeName="+ LAYERS +"&cql_filter=BBOX(the_geom,"</div><div>                   + minXY.getLng() + "," + minXY.getLat() + "," + maxXY.getLng() + "," + maxXY.getLat()  + ",'EPSG:4326')";</div> <div>            var reqUrl = encodeURI(searchUrl);</div><div>            var xhr = null;  </div><div>            if(window.XMLHttpRequest){</div><div>                xhr = new XMLHttpRequest();</div><div>            }else{</div><div>                xhr = new ActiveXObject("Microsoft.XMLHTTP");       </div><div>            }</div><div>            xhr.open("GET", reqUrl, true);</div><div>            xhr.setRequestHeader("Content-type","application/xml");</div><div>            xhr.onreadystatechange = function(){</div><div>                if ((xhr.readyState === XMLHttpRequest.DONE) && (xhr.status === 200)) {</div><div>                    var NweID = [];</div><div>                    var objJSON = eval‎("(function(){return " + xhr.responseText + ";})()");</div><div>                    if(objJSON.totalFeatures > 0){</div><div>                        for(var item in objJSON.features) {</div> <div>                            //markers에 이미 등록된 객체는 제외</div><div>                            var id = objJSON.features[item].id;</div><div>                            NweID.push(id);</div><div>                            if(!GetID_marker(id)){</div><div>                                CreatePolygon(_map, objJSON, item);</div><div>                            }</div><div>                        }</div><div>                    };</div><div>                    //새로 등록된 ID외의 객체 삭제</div><div>                    if(NweID.length >0){</div><div>                        for (var i = markers.length-1; i >= 0; i--) {</div><div>                            var delete_Ok = true;</div><div>                            for (var j = 0; j < NweID.length; j++) {</div><div>                                if(markers[i].id == NweID[j]){</div><div>                                    delete_Ok = false;</div><div>                                    break;</div><div>                                }</div><div>                            }</div><div>                            if(delete_Ok){</div><div>                                markers[i].setMap(null);</div><div>                                markers.splice(i, 1);</div><div>                            }</div><div>                        }</div><div>                    }else{</div><div>                        remove_marker();</div><div>                    }</div><div>                    </div><div>                } else {</div><div>             </div><div>                }</div><div>            };</div><div>            xhr.send();        </div><div>        }</div><div>        function CreatePolygon(_map, objJSON, item) {</div><div>            var id = objJSON.features[item].id;</div><div>            var ORIG_NAME = objJSON.features[item].properties.ORIG_NAME;</div><div>            var DESIG =  objJSON.features[item].properties.DESIG;</div><div>            var DESIG_ENG =  objJSON.features[item].properties.DESIG_ENG;</div> <div>            var coordinates =  objJSON.features[item].geometry.coordinates;</div><div>            var polygonPath = [];</div><div>            for (var i = 0; i < coordinates.length; i++) {</div><div>                var polygons = coordinates[i];</div><div>                for (var j = 0; j < polygons.length; j++) {</div><div>                    var polygonOne = [];</div><div>                    var polygon = polygons[j];</div><div>                    for (var k = 0; k < polygon.length; k++) {</div><div>                        var long_lat = polygon[k];</div><div>                        polygonOne.push( new daum.maps.LatLng(long_lat[1], long_lat[0]) );</div><div>                    }    </div><div>                    polygonPath.push(polygonOne);</div><div>                }</div><div>            }</div><div>            var _Color = '#FFFF00';</div><div>            if(DESIG_ENG == 'National Park')_Color = '#145d06';</div><div>            else if(DESIG_ENG == 'Provincial Park')_Color = '#078b0f';</div><div>            else if(DESIG_ENG == 'County Park')_Color = '#1dcc0d';</div><div>            else if(DESIG_ENG == 'Water Source Protection Area')_Color = '#00FFFF';</div><div>            var polygon = new daum.maps.Polygon({</div><div>                path:polygonPath, </div><div>                strokeWeight: 3, </div><div>                strokeColor: _Color, </div><div>                strokeOpacity: 1.0, </div><div>                fillColor: _Color, </div><div>                fillOpacity: 0.5 </div><div>            });</div><div>            polygon.id = id;</div><div>            polygon.setMap(map);</div><div>            markers.push(polygon);</div><div>        }</div><div>        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////**</div><div>        function myFunction() {</div><div>            var checkBox = document.getElementById("myCheck");</div><div>            if (checkBox.checked == true){</div><div>                getGeoServerWFS(map);</div><div>            } else {</div><div>                remove_marker();</div><div>            }</div><div>        } </div><div>         </div><div>    </script></div> <div></body></div> <div></html></div></div></td></tr></tbody></table> 2. GeoServer의 데이터를 WMS방식으로 쿼리해서 다음의 new daum.maps.MarkerImage함수로 표출하기.지도 MBR변화시 중복실행을 방지하고, 줌레벨 11정도이상에서만 표출함.줌레벨 11이상시 좌표불일치됨, 다음 좌표계로 서비스해도 그런거 같습니다. 데모는 구글 좌표계 서비스를 올려본것입니다. <table width="730" height="25" style="width: 730px; height: 25px;" bgcolor="#b7bbb5" border="0" cellspacing="1" cellpadding="1"><tbody><tr bgcolor="#ffffff"><td width="571"> <div style='color: rgb(0, 0, 0); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgb(255, 255, 255);'><div><!DOCTYPE html></div><div><html></div> <div><head></div><div>    <meta charset="UTF-8"></div> <div>    <style type="text/css"></div><div>        html,</div><div>        body {</div><div>            position: relative;</div><div>            width: 100%;</div><div>            height: 100%;</div><div>            border: none;</div><div>            margin: 0px;</div><div>            padding: 0px;</div><div>            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;</div><div>            font-size: small;</div><div>        }</div><div>        #header {</div><div>            position:relative;</div><div>            background-color: #fffff0;</div><div>            height: 50px;</div><div>            border: 2px solid #f15922;</div><div>            margin: 0;</div><div>            padding: 0;</div><div>        }</div><div>        #map {</div><div>            position:absolute;</div><div>            top:54px;</div><div>            bottom: 0px;</div><div>            width: 100%;</div><div>            height: auto;</div><div>            border: none;</div><div>            margin: 0;</div><div>            padding: 0;</div><div>        } </div><div>    </style></div><div>    <script type="text/javascript" src="<a href="http://dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키" target="_blank">http://dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키</a>" charset="utf-8"></script></div><div></head></div> <div><body></div><div>    <div id="header"></div><div>        관심지역 보이기: <input type="checkbox" id="myCheck" checked = "true" xxonclick="myFunction()"></div><div>    </div></div><div>    <div id="map"></div><div>        </div><div>    </div></div><div>    </div><div>    <script></div><div>        window.xxonload = function() {</div><div>            Init_Map();</div><div>        }</div><div>        var map;</div><div>        function Init_Map() {</div><div>            var container = document.getElementById('map');</div><div>            var options = {</div><div>                center: new daum.maps.LatLng(37.54699, 127.09598),</div><div>                level: 7</div><div>            };</div><div>            map = new daum.maps.Map(container, options);</div><div>            getGeoServerWMS(map);</div><div>            ///////////////////////////////////</div><div>            //중복실행방지</div><div>            var ticking = false;</div><div>            var debounce = (function() {</div><div>                return function(callback) {</div><div>                    window.setTimeout(callback, 1000 / 60);</div><div>                };</div><div>            })();</div> <div>            function updateWMS() {</div><div>                setTimeout(function() {</div><div>                    if (map.getLevel() < 11) //구글좌표계로 발행된 레이어에선 불필요</div><div>                       getGeoServerWMS(map);</div><div>                    ticking = false;</div><div>                }, 500);</div><div>            }</div><div>            ///////////////////////////////////</div><div>            daum.maps.event.addListener(map, 'bounds_changed', function() {</div><div>                var checkBox = document.getElementById("myCheck");</div><div>                if ((checkBox.checked == true)&&(!ticking)) {</div><div>                    ticking = true;</div><div>                    remove_marker();</div><div>                    debounce(updateWMS);</div><div>                }</div><div>            });</div><div>        }</div><div>        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div><div>        var marker = null;</div><div>        function remove_marker() {</div><div>            if (marker) marker.setMap(null); //삭제</div><div>            marker = null;</div><div>        }</div><div>        function getGeoServerWMS(_map) {</div><div>            //_map.relayout();</div><div>            var container = document.getElementById('map');</div><div>            var imageSize = new daum.maps.Size(container.clientWidth, container.clientHeight);</div><div>            var Centerlatlng = _map.getCenter();</div><div>            var bounds = _map.getBounds();</div><div>            var minXY = bounds.getSouthWest();</div><div>            var maxXY = bounds.getNorthEast();</div><div>            var imageSrc = '<a href="http://www.gisapplication.kr:8080/geoserver/triphos/wms?" target="_blank">http://www.gisapplication.kr:8080/geoserver/triphos/wms?</a>' +</div><div>                'SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&STYLES=' +</div><div>                '&LAYERS=triphos%3AkdpaMap,triphos%3Adanger_area' +</div><div>                '&SRS=EPSG%3A4326' +</div><div>                '&WIDTH=' + imageSize.width + '&HEIGHT=' + imageSize.height +</div><div>                '&BBOX=' + minXY.getLng() + '%2C' + minXY.getLat() + '%2C' + maxXY.getLng() + ' %2C' + maxXY.getLat();</div><div>            CreateMarkerImage(_map, imageSrc, imageSize, Centerlatlng)</div><div>        }</div><div>        function CreateMarkerImage(_map, imageSrc, imageSize, Centerlatlng) {</div><div>            var newImg = new Image;</div><div>            newImg.xxonload = function() {</div><div>                var imageOption = {</div><div>                  offset: new daum.maps.Point(imageSize.width / 2, imageSize.height / 2)</div><div>                };</div><div>                var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption);</div><div>                var markerPosition = new daum.maps.LatLng(Centerlatlng.getLat(), Centerlatlng.getLng());</div><div>                remove_marker();</div><div>                marker = new daum.maps.Marker({</div><div>                    position: markerPosition,</div><div>                    image: markerImage</div><div>                });</div><div>                marker.setMap(_map); //추가</div><div>            }</div><div>            newImg.src = imageSrc;</div><div>        }</div><div>        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////**</div><div>        function myFunction() {</div><div>            var checkBox = document.getElementById("myCheck");</div><div>            if (checkBox.checked == true){</div><div>                getGeoServerWMS(map);</div><div>            } else {</div><div>                remove_marker();</div><div>            }</div><div>        } </div><div>         </div><div>    </script></div> <div></body></div> <div></html></div></div></td></tr></tbody></table>