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

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