[OpenLayers] SuperMap 레이어 중첩 및 정보조회

[공공칠빵]

[OpenLayers] SuperMap 레이어 중첩 및 정보조회

[OpenLayers] "FirstGIS/Professional Education Version 1.0"

OpenLayers5.3(OL5.3)/html/css/JavaScript로 처음 코딩하여 공유중인 GIS프로그램입니다. 

먼저 결과물 프로그램 링크입니다.

>서비스바로가기

(위 링크를 PC용[IE에서는 흑백모드버튼 제거됨]이고, 모바일에서 실행하셔야 모바일용 UI모드로 실행합니다.

 단, 모바일 기종에 따라 WebGL 사용한 함수지원여부로 브이월드3D가 구동 안될수도있습니다)

- 요즘 관공서 등에서 ArcGIS와 국내GIS서버보다는 SuperMap 또는 오픈GIS서버를 많이 사용합니다

  따라서, 본 예제에서는 SuperMap의 레이어를 OpenLayers로 WMS/Tile 중첩 및 객체 정보조회를

  하기위해 OpenLayers 추가함수모듈과 WFS로 객체를 읽어와 객체로 만드는 예를 작성해보겠습니다.

  데모 소스는 산림지리정보의 임상도를 이용하겠습니다.

-이전글중에 "[지도] SuperMap 산림공간정보서비스 임상도 주제도 중첩"에서 말한것과 같이

  산림공간정보서비스의 GIS 서버가 SuperMap으로 구성되어 있습니다

-산림지리정보에서는 임도망도, 산림이용기본도, 산림토양도, 임상도, 임소반도 등 5대 주제도와

 산사태위험도, 맞춤형조림지도 등을 구축하고 서비스중입니다.

 최근에는 대축척도로 만들고 있으며, 각종 인허가 등 법규에서 산림정보가 필요합니다.

아래 기능 소스는 원본 카페글에 있습니다 : https://cafe.naver.com/gisapplication/1025

  

1. SuperMap 서비스중 임상도 레이어를 수종/임상/경급/영급/밀도 주제도별로 중첩

   - 예전에는 WMS로 호출하여 좌표를 화면좌표로 일치시킨후 graphics레이오로 생성하였습니다.

   이번에는 SuperMap쪽에서 공개한 OpenLayers용 iClient 인 "iclient9-openlayers.min.js" 자바스크립을 사용하겠습니다.

   첨부소스는 공개한 소스에 버전오류가 있는거 같아 수정하여 압축한 파일입니다.

   layerType은 "TB_FGDI_IM5000"; //수종, "TB_FGDI_IM50004"; //임상, "TB_FGDI_IM50001"; //경급,

   "TB_FGDI_IM50002"; //영급, "TB_FGDI_IM50003"; //밀도 이므로 반복하여 레이어를 등록합니다.

  var ForestSuperMap_URL = 'http://116.67.84.176:8090/iserver/services/map-TB_FGDI_IM5000/rest/maps/{layerType}';

  var layerType = "TB_FGDI_IM5000"; //수종

  var ForestSUJONG_URL = ForestSuperMap_URL.replace("{layerType}", layerType)

  var ForestLayer = createSuperMapWMSLayer("IM_SUJONG", ForestSUJONG_URL, "", 0, 2048, false);

  map.getLayers().insertAt(map.getLayers().getLength()-NewIndex, ForestLayer);

  function createSuperMapWMSLayer(LayerName, WMSURL, styleName, nimZoom, maxZoom, _visible, _crossOrigin){

    if(!_crossOrigin) _crossOrigin = 'anonymous';

    else if(_crossOrigin == "null") _crossOrigin = null;

    return new ol.layer.Tile({

      id: LayerName,

      name: LayerName,

      layerName: LayerName,

      source: new ol.source.TileSuperMapRest({

          url: WMSURL,

          crossOrigin: _crossOrigin,

          STYLES: styleName,

          wrapX: true,

      }),

      opacity: 0.8,

      minResolution: nimZoom,

      maxResolution: maxZoom,

      visible: _visible

    });

  };

2. 마우스 클릭시 SuperMap 레이어중 임상도 객체 정보 조회

   - SuperMap featureResults를 이용한 데이터 쿼리 (자원에 대한 POST 요청) 로 공간 도형과 필드값을 가져와

     지도상에서 객체를 생성하고 속성정보를 표출합니다.

  - 쿼리시 주의점은 'POST' 매소드로 해야하고, 파라메터는 JSon/Object로 보내라고 하는데 실제는 String형식으로

     보냅니다, 그리고 JavaScript모드에서는 크로스도메인 위반으로 php를 사용하였고, 서버 온라인상에서만

    구동됩니다. 일반 클라이언트 로컬모드에서는 디버깅하지 못하므로 서버모드에서만 구동됩니다.

  - 결과 값중 폴리곤은 그냥 XY리스트입니다. 멀티 도 홀도 없이 그냥 줍니다.

    그래서 포인트리스트를 읽어가며 폴리곤 만들경우, 처음 포인트와 일치시 하나의 링으로하고,

    다음 포인트 부터 새로운 링으로 다시 담고합니다. 그래서 공간 도형을 생성해야 합니다.

- WFSProxyPHP.php 소스

<?php header("Content-Type:text/html;charset=utf-8");
//if (!eregi($_SERVER['HTTP_HOST'], $_SERVER['HTTP_REFERER'])) {
//    echo "  <script>
//                alert(‎'잘못된 접근입니다.');
//                location.href='xxjavascript:history.go(-1);';
//            </script>";
//}else
{
    //ob_clean();
    ob_end_clean();

    $ALLURL= $_GET['url'];
    if($ALLURL){
      $url = str_replace("%26", "&", $ALLURL);
      $url = str_replace("@", "'", $url);
      $url = str_replace(" ", "%20", $url);
    }
    //echo $url;
    $context = NULL;
    if( isset($_GET['param']) ){
       $param = $_GET['param'];
       $opts = array('http' =>
          array(
           'method'  => 'POST',
           'header'  => 'Content-type: application/x-www-form-urlencoded',
           'content' => $param
          )
       );
       $context = stream_context_create($opts);
    }

    $result = file_get_contents($url, FALSE, $context);
    echo $result;
}
 ?>

- WFSProxyPHP.php 소스

//산림정보조회

function Call_ForestMap(coordinate,XX,YY){

  var _name = "임상도 정보";

  var AddMag = "";

  var dataUrl = "http://116.67.84.176:8090/iserver/services/data-fdms/rest/data/";

  var searchUrl = dataUrl + "featureResults.json?returnContent=true&fromIndex=0&toIndex=9999";

  var MapXY = SetCoord_LongitudeToTM('EPSG:5186', XX, YY);

  var JSon_params = '{"datasetNames":["FDMS_BASE:TB_FGDI_IM5000"],';

  JSon_params += '"sourceEpsgCode":"5186",';

  JSon_params += '"targetEpsgCode":"5186",';

  JSon_params += '"getFeatureMode":"SPATIAL",';

  JSon_params += '"geometry":{"id":0,"style":null,"parts":[1],

    "points":[{"id":"SuperMap.Geometry.Point_55804",

    "x":'+MapXY[0].toString()+',"y":'+MapXY[1].toString()+'}],

    "type":"POINT","prjCoordSys":{"epsgCode":3857}},';

  JSon_params += '"spatialQueryMode":"INTERSECT"}';

  var reqUrl = WFSProxyPHP + url_replace(searchUrl) + "&param=" + JSon_params;

  CALL_XMLHTTP_OLD(reqUrl, Call_back);

  function Call_back (item_data){

    var objJSON = eval‎("(function(){return " + item_data + ";})()");

    var JSON_Features = objJSON.features;

    if(JSON_Features.length > 0){

      var _Features = [];

      for (var item=0; item<JSON_Features.length; item++) {

        try{

          var JSON_feature = JSON_Features[item];

          var _feature = new ol.Feature();

          var _points = JSON_feature.geometry.points;

          var MapPoints = [];

          var polygonRings = [];

          for (var iVtx=0; iVtx<_points.length; iVtx++) {

            var _point = _points[iVtx];

            var pLatLng = SetCoord_TMToLongitude('EPSG:5186', _point.x, _point.y);

            var mapPoint = ol.proj.fromLonLat(pLatLng);

            //홀폴리곤일경우

            if( (MapPoints.length > 0) && ((MapPoints[0][0] == mapPoint[0])

              && (MapPoints[0][1] == mapPoint[1])) ){

              MapPoints.push(mapPoint);

              polygonRings.push(MapPoints);

              MapPoints = [];

            }else{

              MapPoints.push(mapPoint);               

            }

          }

          var _geometry = new ol.geom.MultiPolygon([polygonRings]);

          var _properties = {geometry:_geometry};

          var _fieldNames = JSON_feature.fieldNames;

          if(_fieldNames && _fieldNames.length >0){

            var _fieldValues = JSON_feature.fieldValues;

            for (var i=0; i<_fieldNames.length; i++) {

              var _fieldName = _fieldNames[i];

              var _fieldValue = _fieldValues[i];

              _properties[_fieldName] = _fieldValue;

            }

          }

          _feature.id = JSON_feature.id;

          _feature.values_ = _properties;

          _feature.properties = _properties;

          _Features.push(_feature);

        }catch (e){

        }  

      }

      Show_FeatureInfoForm(_name, coordinate, _Features,

           ["FRTP_NM", "KOFTR_NM", "DMCLS_NM", "AGCLS_NM", "DNST_NM"], AddMag);

    }else{

      Call_vworld_Data(coordinate, AddMag);

    };       

  };

}

function CALL_XMLHTTP_OLD(reqUrl, Call_back) {

  try{

    var xhr = null; 

    if(window.XMLHttpRequest){

      xhr = new XMLHttpRequest();

    }else{

      xhr = new ActiveXObject("Microsoft.XMLHTTP"); 

    }

    xhr.open("GET", reqUrl, true);

    xhr.setRequestHeader("Content-type","application/xml");

    //xhr.setRequestHeader("Cache-Control", "no-cache, no-store, must-reval‎idate");

    //xhr.setRequestHeader("Content-type","application/json");

    xhr.onreadystatechange = function(){

      if ((xhr.readyState === XMLHttpRequest.DONE) && (xhr.status === 200)) {

        Call_back(xhr.responseText);

      }

     };

    xhr.send();

  }catch (e){

  }

}