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

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

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

           원본 펼치기

          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에서 정의한 함수 사용 예시

           원본 펼치기

          // 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에서 팝업 보고서 자신의 위치 조정

          원본 펼치기

         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에서 표시해주는 데이터 설정

          원본 펼치기

         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();
         }