1. 기존 패키지 패치 방법과 동일하게 백업 후 패치를 진행합니다.

   1. 패치 파일: GeoMap_patch_20240215.zip

   2. 패치 파일 미리보기:
      
      
      
   3. 패치 파일 덮어쓰기 경로: REPORTPATH(보고서 파일 위치, Admin > 시스템 옵션 > REPORTPATH 확인)

   4. 
      

      참고사항
      title 20240215 Update
      MAP_GEO_1 데이터가 단순화되었습니다. 로딩 시간이 5.47초 → 879.43밀리초로 축소되었습니다. geojson 파일의 크기가 6918KB → 1039KB로 축소되었습니다.

      
      
      

2. GeoMap 컴포넌트 사용을 위해 필요한 데이터를 아래의 보고서를 통해 생성합니다.
   1. 생성 데이터: 지리정보(GeoJSON) 데이터 / 지리정보 다국어(한국어) 데이터 / 대한민국 지리정보 코드체계 데이터
   2. 데이터 미리보기: MAP_GEO_DOMESTIC_CODE
      
   3. 보고서 파일: MAP_DATABASE_생성하기.mtsd
   4. 보고서 미리보기:
      
      
      
   5. 보고서를 해당 서버에서 오픈 후, 보고서에서 안내한 대로 1번부터 3번까지의 과정을 진행합니다. 단, 반드시 패치 우선 적용이 필요합니다.
3. GeoMap 컴포넌트 사용을 위한 UserComponent 보고서인 GeoMap 컴포넌트(국내지도) 보고서 파일을 다운받아 사용합니다.
   1. 위 파일은 아래의 경로에서 시연이 가능합니다.
   2. URL: https://rnd.bimatrix.co.kr/aud7/portal/Content.jsp
   3. https://rnd.bimatrix.co.kr/aud7/portal/Content.jsp?id=REPBD79BA93FF3F4926BCE3534BB92247F7
   4. 보고서 위치: 공용 폴더 > 1. 샘플보고서 > 1.1. i-AUD > UserComponent
   5. 보고서 이름: [GeoMap] MAP_USERCOMPONENT_REPORT
4. AddIn 컨트롤의 Component 목록에 GeoMap을 추가합니다.
   1. 추가 방법: CONTEXTPATH/extention/AUD/addin.properties 를 오픈하여 다음과 같이 "GeoMap"을 작성 후 저장합니다.
      
   2. i-AUD Designer에서 AddIN 컨트롤 생성 후 우측 PropertyGrid의 Base > Class 속성 목록에 정상적으로 추가되었음을 확인합니다.
      
      
      
      
5. i-AUD Designer에서 신규 보고서를 생성하여 아래의 규칙을 따라 GeoMap 컴포넌트를 사용합니다.
   
   1. UserComponent 컨트롤을 생성하여, 우측 PropertyGrid의 Base > Source 를 3번 과정에서 다운받은 보고서로 설정합니다.
      1. 설정하는 방법은 UserComponent 가이드 를 참고하십시오.
         
      2. 설치가 정상적으로 진행되었다면, 아래와 같은 화면이 노출됩니다.
         
      3. 이후 데이터를 연결하여 사용할 수 있습니다.
         
         
   2. 보고서 스크립트에 아래와 같이 작성합니다.
      1. OnDocumentLoadComplete 이벤트
         
      2. GeoMap 컴포넌트 제공 이벤트 사용
         
      3. 자세한 사항은 보고서 샘플을 참고하십시오.

(BCRM#D3511) [i-AUD] 국내 지도(GeoMap) 컴포넌트 마우스 포인터 위치에 따른 툴팁 기능 추가 이슈 작업으로 인해, Geomap Componenet Event에서 전달하는 객체의 타입이 일괄 변경되었습니다.

• AS-IS: 객체 한개 혹은 Array로 전달
• TO-BE: object로 전달

• 
  

  Event 명	변경 전 객체	변경 후 객체
  OnFeatureClick	feature	e.point e.feature (변경 전 feature와 동일)
  OnFeatureMouseOver	feature	e.point e.feature (변경 전 feature와 동일)
  OnFeatureMouseOut	feature	e.point e.feature (변경 전 feature와 동일)
  OnMarkerClick	[ markerFeature, layerFeature ]	e.point e.marker (변경 전 markerFeature와 동일) e.feature (변경 전 layerfeature와 동일)
  OnMarkerMouseOver	markerFeature	e.point e.marker (변경 전 markerFeature와 동일)

  
  

해당 개선 작업으로 아래와 같이 추가되었습니다.

• 툴팁: Geomap 컴포넌트에서 기본으로 제공하는 기능입니다.
  • 사용 방법은 위 createTooltip() 메소드 설명을 참고해주세요.
  • 툴팁은 Geomap 컴포넌트의 viewport 내에서만 움직입니다.
  • 간단한 style 변경이 가능합니다.
• 팝업: 툴팁보다 다양한 UI를 원하는 사용자들을 위한 기능입니다.
  • Geomap 컴포넌트의 event마다 전달해주는 pointEvent의 위치를 이용합니다.
  • AUD의 UserComponent를 이용한 샘플 보고서와 아래 가이드를 참고해주세요.
  • 샘플 보고서: GeoMap 컴포넌트(국내지도) 팝업 보고서
    • 
  • 가이드:
    1. 뷰어 보고서의 스크립트 가이드

       1. 팝업 기능 사용을 위한 함수 정의

          코드 블럭
          language js collapse true
          this.initMAP = function(){ var _this = this; //팝업 샘플을 사용하기 위한 UserComponent보고서 정의 this.RPT_POPUP = Matrix.getObject('RPT_POPUP'); // UserComponent 보고서 this.RPT_POPUP.Visible = false; // init 기본은 숨김 this.RPT_POPUP.OnLoaded = function(s, e){ _this.mPopupScript = e.ScriptObject; // UserComponent의 Script Object _this.mPopupScript.GetRect(_this.RPT_REPORT.Left,_this.RPT_REPORT.Top,_this.RPT_POPUP.Width, _this.RPT_POPUP.Height); // Geomap Component의 viewport가 아닌, 해당 viewer 보고서 안에서 띄우기 위해 사용하는 파라미터를 전달합니다. }; this.RPT_REPORT = Matrix.getObject("RPT_REPORT"); this.RPT_REPORT.OnLoaded = function(s, e){ _this.mMapScript = e.ScriptObject; _this.mMapScript.CreateAddin(function(component){ mapComponent = Object.assign(component, mapComponent); }); }; }; //팝업 샘플 사용을 위한 함수: ShowPOPUP, HidePOPUP, SetMySizeToPOPUP this.ShowPOPUP = function(point, code){ // 팝업을 띄웁니다. if(!this.RPT_POPUP.Visible){ this.RPT_POPUP.Visible = true; } var position = this.mPopupScript.ShowPOPUP(point, code); this.RPT_POPUP.Left = position.x; // position을 전달받아 팝업을 이동시킵니다. this.RPT_POPUP.Top = position.y; } this.HidePOPUP = function(){ // 팝업을 숨깁니다. if(this.RPT_POPUP.Visible){ this.RPT_POPUP.Visible = false; } }; this.SetMySizeToPOPUP = function(size){ // 팝업 보고서에게 viewer 보고서 자신의 사이즈를 전달합니다. if(this.mPopupScript){ this.mPopupScript.GetParentViewSize(size); } } //팝업 샘플 사용을 위한 함수: ShowPOPUP, HidePOPUP, SetMySizeToPOPUP

          
          

       2. a에서 정의한 함수 사용 예시

          코드 블럭
          language js collapse true
          // Geomap의 이벤트 mapComponent.OnFeatureMouseOver = function(e){ var feature = e.feature; if(feature) { var point = e.point; if(point){ MAIN_FORM.ShowPOPUP(point, feature.get('GID_1')); // point 위치와 팝업보고서에 전달할 코드값을 전달합니다. } } }; mapComponent.OnFeatureMouseOut = function(e){ var feature = e.feature; if(feature) { var point = e.point; if(point){ MAIN_FORM.ShowPOPUP(point, feature.get('GID_1')); } }else { MAIN_FORM.HidePOPUP(); // feature 객체가 없는 경우( = 바다 영역인 경우) 팝업을 숨깁니다. } } }; // AUD 제공 기본 이벤트 /************************************** * 뷰어의 사이즈가 변경될 때 발생합니다. * * arguments : * double Width (Readonly:False) : 뷰어의 넓이 * double Height (Readonly:False) : 뷰어의 높이 **************************************/ var OnViewerSizeChanged = function(sender, args){ var size = { Width: args.Width, Height: args.Height } MAIN_FORM.ResizeMAP(); MAIN_FORM.SetMySizeToPOPUP(size); // 뷰어 사이즈가 변경될 때마다 팝업 보고서에게 자신의 사이즈를 다시 전달합니다. };

          
          

    2. 팝업 샘플 보고서의 스크립트 안내
       • 해당 보고서는 샘플 보고서이며, 스크립트 수정으로 사용자가 원하는 대로 사용할 수 있습니다.
       • UI는 VIEW class에서, 내용은 CONTENT class에서 관리합니다.

       • VIEW class에서 팝업 보고서 자신의 위치 조정

         코드 블럭
         language js collapse true
         var VIEW_CONTROLLER = function(){ this.RECT = { Width: 0, Height:0, Left: 0, Top: 0 }; this.PARENT_SIZE = { Width: 0, Height: 0 }; this.setPosition = function(point){ var position = { x: 0, y: 0 }; var gap = 10; //기본 position.x = this.RECT.Left + point.X + gap; position.y = this.RECT.Top + point.Y - this.RECT.Height - gap; //오른쪽으로 튀어나가는 경우 왼쪽으로 자리를 옮겨준다 if(position.x + this.RECT.Width > this.PARENT_SIZE.Width ){ position.x = this.RECT.Left + point.X - this.RECT.Width - gap; } //위쪽으로 튀어나가는 경우 아래쪽으로 자리를 옮겨준다 if(Math.max(position.y,0) == 0){ position.y = this.RECT.Top + point.Y + gap; } return position; }; }

         
         

       • CONTENT class에서 표시해주는 데이터 설정

         코드 블럭
         language js collapse true
         var CONTENT_CONTROLLER = function(){ this.CODE = ""; this.GRD_INFO = null; this.LBL_TITLE = null; this.LBL_SUBTITLE = null; this.IMG_CONTENT = null; this.LBL_AREA = null; this.LBL_POPULATION = null; this.LBL_DENSITY = null; this.LBL_DISTRICT = null; this.init = function(){ this.GRD_INFO = Matrix.getObject('GRD_INFO'); this.LBL_TITLE = Matrix.getObject('LBL_TITLE'); this.LBL_SUBTITLE = Matrix.getObject('LBL_SUBTITLE'); this.IMG_CONTENT = Matrix.getObject('IMG_CONTENT'); this.LBL_AREA = Matrix.getObject('LBL_AREA'); this.LBL_POPULATION = Matrix.getObject('LBL_POPULATION'); this.LBL_DENSITY = Matrix.getObject('LBL_DENSITY'); this.LBL_DISTRICT = Matrix.getObject('LBL_DISTRICT'); } this.Update = function(code){ if(this.CODE === code){ return; } for(var i = 0; i < this.GRD_INFO.GetRowCount(); i++){ var row = this.GRD_INFO.GetRow(i); if(code === row.GetValue('CODE1') || code === row.GetValue('CODE2')){ this.CODE = code; this.LBL_TITLE.Text = row.GetValue('NAME'); this.LBL_SUBTITLE.Text = row.GetValue('DESCRIPTION'); this.LBL_AREA.Text = row.GetValue('AREA'); this.LBL_POPULATION.Text = row.GetValue('POPULATION'); this.LBL_DENSITY.Text = row.GetValue('DENSITY'); this.LBL_DISTRICT.Text = row.GetValue('DISTRICT'); this.IMG_CONTENT.ImageBase64Text = 'data:image' + row.GetValue('IMAGE_TEXT'); return; } } } this.init(); }

         
         

해당 가이드에서 제공하는 별도 패치 파일 없이는 GeoMap 컴포넌트를 사용하실 수 없습니다.

해당 기능은 ie11에서 사용 불가능합니다.

샘플 URL : https://rnd.bimatrix.co.kr/aud7/portal/Content.jsp?id=REPB12E00F9EAB0463FB7B16DD65DA4687D

샘플 파일