GeoMap 컴포넌트 사용 가이드

page no.    

1. 기능

•  API Open

•  UI Open

•  Read Only

•  Not Use

•  Hidden

•  Not Recommend

1. 설명
   1. GeoMap(국내지도) 컴포넌트를 AUD Designer에서 편집, 실행할 수 있습니다.
      Image Added
      
      
      1. 세부 기능
         
         1. zoom-in, zoom-out: 지도에서 표시하는 영역을 zoom-in , zoom-out 하여 확인할 수 있습니다.
         2. undo, redo: load되었던 지도 정보를 기억하여 undo, redo 하며 history를 확인할 수 있습니다.
           
2. 사용 방법

   1. 아래 가이드를 참고하여 패치를 진행합니다.

      펼치기
      title GeoMap 패치 적용 방법 안내
      도움말 title GeoMap 패치 적용 방법 안내 경고 title 신규 설치가 아닌 패치의 경우 필요한 테이블이 존재하지 않아 오류가 나는 경우, REPOSITORY 최신화를 진행하셔야 됩니다. ADMIN > 시스템 운영관리 > Repository 테이블 점검 메뉴를 이용하시길 바랍니다. GeoMap 컴포넌트 사용 시 필요한 테이블 목록 테이블 명 테이블 설명 MAP_GEO_0 전 세계 국가 데이터 MAP_GEO_1 국가별 1레벨 구역 데이터(시도) MAP_GEO_2 국가별 2레벨 구역 데이터(시군구) MAP_GEO_3 국가별 3레벨 구역 데이터(읍면동) MAP_GEO_4 국가별 3레벨 구역 데이터(읍면동) MAP_GEO_DOMESTIC_CODE 대한민국 지리정보체계 코드 데이터(행정동 및 법정동) MAP_GEO_LANGUAGE 지역명 다국어 데이터 기존 패키지 패치 방법과 동일하게 백업 후 패치를 진행합니다. 패치 파일: GeoMap_patch_20240215.zip 패치 파일 미리보기:

Image Removed

1. 1. Image Added 패치 파일 덮어쓰기 경로: REPORTPATH(보고서 파일 위치, Admin > 시스템 옵션 >  REPORTPATH 확인) 참고사항 title 20240215 Update MAP_GEO_1 데이터가 단순화되었습니다. 로딩 시간이 5.47초 → 879.43밀리초로 축소되었습니다. geojson 파일의 크기가 6918KB → 1039KB로 축소되었습니다. GeoMap 컴포넌트 사용을 위해 필요한 데이터를 아래의 보고서를 통해 생성합니다. 생성 데이터:

1. 1. 지리정보(GeoJSON) 데이터 /

1. 1. 지리정보 다국어(한국어) 데이터 / 대한민국 지리정보 코드체계 데이터 데이터 미리보기: MAP_GEO_DOMESTIC_CODE Image Added 보고서 파일: MAP_DATABASE_생성하기.mtsd 보고서 미리보기:

Image Removed

1. 1. Image Added 보고서를 해당 서버에서 오픈 후, 보고서에서 안내한 대로 1번부터 3번까지의 과정을 진행합니다. 단, 반드시 패치 우선 적용이 필요합니다. 참고사항 서버에서 다음과 같은 에러가 발생한 경우 해결 방법 : java.lang.OutOfMemoryError: heap space 1.  해당 보고서의 [ScriptEditor]-[IMPORT_GEO_JSON 서버 스크립트] 오픈 2. 206번 라인 주석처리 후 보고서 실행 (IMPORT_GEO_JSON 버튼 클릭) 3. 206번 라인의 주석을 해제한 후, 202 ~ 205번 라인을 주석처리 후 보고서 실행 (IMPORT_GEO_JSON 버튼 클릭) 자세한 내용은 아래에 첨부되어있는 이미지를 참고하세요. Image Added GeoMap 컴포넌트 사용을 위한 UserComponent 보고서인

1. 1. GeoMap 컴포넌트(국내지도) 보고서 파일을 #보고서 다운로드 다운받아 사용합니다. 위 파일은 아래의 경로에서 시연이 가능합니다. URL: https://rnd.bimatrix.co.kr/aud7/portal/Content.jsp

1. 1. ?id=

1. 1. REPB12E00F9EAB0463FB7B16DD65DA4687D 보고서 위치: 공용 폴더 > 1. 샘플보고서 > 1.1. i-AUD > UserComponent 보고서 이름: [

1. 1. UC] MAP_

1. 1. VIEWER(audmap) (지도, 맵) AddIn 컨트롤의 Component 목록에 GeoMap을 추가합니다. 추가 방법: CONTEXTPATH /extention/AUD/addin.properties 를 오픈하여 다음과 같이 "GeoMap"을 작성 후 저장합니다.

Image Removed

1. 1. Image Added i-AUD Designer에서 AddIN 컨트롤 생성 후 우측 PropertyGrid의 Base > Class 속성 목록에 정상적으로 추가되었음을 확인합니다.

Image Removed

1. 1. ※ 브라우저 캐시를 삭제하고 실행해주세요. Image Added i-AUD Designer에서 신규 보고서를 생성하여 아래의 규칙을 따라 GeoMap 컴포넌트를 사용합니다. UserComponent 컨트롤을 생성하여, 우측 PropertyGrid의 Base > Source 를 3번 과정에서 다운받은 보고서로 설정합니다. 설정하는 방법은 UserComponent 가이드 를 참고하십시오.

Image Removed

1. 1. Image Added 설치가 정상적으로 진행되었다면, 아래와 같은 화면이 노출됩니다.

Image Removed

Image Removed

1. 1. Image Added 이후 데이터를 연결하여 사용할 수 있습니다.

1. 1. 자세한 내용은 보고서 샘플을 참고하세요. 최초 샘플 보고서 사용 시에는 아래 목록의 보고서를 모두 다운로드 받으셔야 합니다. 보고서 분류 책갈피 보고서 다운로드 보고서 다운로드 보고서 명 보고서 설명 Download (click 시, 보고서 다운로드) Viewer 보고서 [UC] MAP_VIEWER(audmap) (지도,맵).mtsz UserComponent 보고서를 사용하여 간단하게 해당 기능을 사용할 수 있음을 보여줍니다. UserComponent 사용 가이드는 UserComponent 기본 사용 가이드 를 참고하세요. View file name [UC] MAP_VIEWER(audmap) (지도,맵).mtsz height 250 UserComponent 보고서 [GeoMap] MAP_USERCOMPONENT(audmap).mtsz AddIn Control인 GeoMap Component를 감싼 보고서입니다. 인터페이스는 스크립트에 정의되어 있습니다. 추가 기능이 신규로 생길 경우, 해당 보고서가 수정됩니다. View file name [GeoMap] MAP_USERCOMPONENT(audmap).mtsz height 250 경고 title 샘플 보고서- File DB 사용 주의 샘플 보고서 다운로드 하신 후 사용하실 때 DB Connection 오류 발생 시, 보고서 내 데이터소스의 File DB Connection을 연결해주세요.

      
      

   2. Script API로 커스텀 가능한 세부 기능은 다음과 같습니다.

      Property 명	Property 설명
      Source	Map의 source
      Features	Map의 모든 Feature객체 정보
      UseHighlightStyle	feature mouseover시의 하이라이트 기능 사용 유무. (default:false)
      HighlightStyle	feature mouseover시의 하이라이트 기능의 style 객체 변경 가능한 속성: stroke(color, width), fill(color) 펼치기 language text theme FadeToGrey firstline 1 title Method linenumbers true collapse true getStroke(): stroke 반환 setColor(color): stroke의 color를 설정합니다. setWidth(width): stroke의 width를 설정합니다. getFill(): fill 반환 setColor(color): fill의 color를 설정합니다.
      DefaultMapStyle	Map의 기본 style 객체 변경 가능한 속성: stroke(color, width), fill(color), font(color,size) 펼치기 language text theme FadeToGrey firstline 1 title Method linenumbers true collapse true getStroke(): stroke 반환 setColor(color): stroke의 color를 설정합니다. setWidth(width): stroke의 width를 설정합니다. getFill(): fill 반환 setColor(color): fill의 color를 설정합니다. getFont(): font 반환 setColor(color): font의 color를 설정합니다. setSize(width): font의 size를 설정합니다.
      UseDragPan	Map의 interaction 객체의 DragPan 사용 유무를 설정합니다. 코드 블럭 language js theme Eclipse title 예제 코드 linenumbers true map.UseDragPan = true; // 드래그를 통해 지도 내에서 이동할 수 있습니다.
      UseMouseWheelZoom	Map의 interaction 객체의 MouseWheelZoom 사용 유무를 설정합니다. 코드 블럭 language js theme Eclipse title 예제 코드 linenumbers true map.UseMouseWheelZoom = true; // 마우스 휠로 줌을 설정할 수 있습니다.

      
      

      Method 명	Method 설명
      Update()	Map의 style 속성, feature의 style 속성값 변경 후 해당 Method를 실행하면 변경된 값에 맞게 Map의 Layer가 change됩니다.
      Clear()	Map의 모든 layer의 source가 refresh, 즉 초기화됩니다.
      LoadMap(GeoJSON)	feature 정보가 존재하는 featureCollection 타입의 GeoJSON을 전달받아 Map이 Load됩니다.
      getFeature(featureLabelName)	매개 변수 featureLabelName과 feature 객체의 LABEL 속성값과 일치하는 feature를 반환합니다. 펼치기 title Method setStyleProperty(propertyName, propertyValue): 해당 객체의 style 속성을 설정합니다. 설정한 style 속성값은 Update() 실행 후 반영됩니다. 변경 가능한 속성: FILLCOLOR, FONTCOLOR, FONTSIZE, FONTWEIGHT ex) feature.setStyleProperty("FILLCOLOR","#C2C2C5");
      setFeaturesStyleProperties(dataTable)	매개 변수 dataTable의 각 row의 'LABEL' column의 data와 자신의 LABEL 속성값과 일치하는 featrue의 style 속성을 변경, 설정합니다. 변경 가능한 속성은 setStyleProperty와 동일합니다.
      addMarker(markerInfos)	매개 변수 markerInfos 정보에 맞는 위치에 Marker를 생성하고, 해당 Marker 객체를 반환합니다. markerInfos : Array<object> 예시) 코드 블럭 language js title markerInfos 예시 collapse true [{'name' : '세방빌딩', 'id' : 'ID_AA', 'lonLat': ['127.0448', '37.5038']}, {'name' : '경복궁', 'id' : 'ID_BB', 'lonLat': ['126.9602', '37.5788']} ] 펼치기 title Method setImg(imgUrl, imgScale): 기본 제공 마커 이미지 대신 다른 이미지를 원하는 scale에 맞춰 설정합니다. imgUrl: contextpath/reports/WEB_IMAGES 아래의 이미지 파일 removeMarkers(id): 매개 변수 id에 해당하는 marker를 제거합니다. id가 undefined일 경우, 모든 marker를 제거합니다. getId(): 해당 marker의 id를 반환합니다.
      addLine(locations)	매개 변수 locations 정보에 맞는 위치에 Line을 생성하고, 해당 Line 객체를 반환합니다. 펼치기 title Method setColor(color): line 객체의 color를 설정합니다. Update() 실행 후 UI가 변경됩니다. setWidth(width): line 객체의 width를 설정합니다. Update() 실행 후 UI가 변경됩니다. setLineDash(linedash): line 객체의 lineDash style를 설정합니다. Update() 실행 후 UI가 변경됩니다. setLineCap(lineCap): line 객체의 line style를 설정합니다. Update() 실행 후 UI가 변경됩니다. removeLines(coordinate): 매개 변수 coordinate에 해당하는 line를 제거합니다.
      createTooltip()	지도 위의 특정 feature 위에 마우스를 올리면 해당 위치에 Tooltip을 생성하고 Tooltip객체를 반환합니다. Tooltip에는 feature의 'label' 정보가 표시됩니다. 펼치기 title Method Tooltip 객체 Method 명 매개변수 Data Type Method 설명 show() Tooltip을 화면에 표시합니다. hide() 현재 표시되고 있는 Tooltip을 숨깁니다. delete() Tooltip 객체를 삭제합니다. setText(text) text string Tooltip에 표시할 텍스트를 지정합니다. Tooltip Style 객체 Method 명 매개변수 Data Type Method 설명 get BackgroundColor string Tooltip의 배경색을 반환합니다. set BackgroundColor(color) color string Tooltip의 배경색을 설정합니다. get Color string Tooltip의 폰트 색을 반환합니다. set Color(color) color string Tooltip의 폰트 색을 설정합니다. get Size int Tooltip의 폰트 사이즈를 반환합니다. set Size(size) size int Tooltip의 폰트 사이즈를 설정합니다. get Width int Tooltip의 너비를 반환합니다. set Width(width) width int Tooltip의 너비를 설정합니다. get Height int Tooltip의 높이를 반환합니다. set Height(height) height int Tooltip의 높이를 설정합니다. 코드 블럭 language js theme Eclipse title 예제 코드 linenumbers true collapse true var toolTip = null; var toolTipStyle = null; Map.OnMapLoaded = function(){ if(!toolTip) toolTip = Map.createTooltip(); // 툴팁은 한 번만 생성 } Map.OnFeatureMouseOver = function(args){ var feature = args.feature; if(feature){ if(toolTip){ var label = feature.get('LABEL'); toolTipStyle = toolTip.Style; // 툴팁의 스타일 객체 switch(label){ case '서울특별시': case '제주특별자치도': var text = label + '<br>입니다!'; toolTip.setText(text); toolTipStyle.BackgroundColor = '#ffcc80'; toolTipStyle.Color= '#151a27'; break; } } } }

      
      

      Event 명	Event 설명
      OnMapLoaded	LoadMap이 끝난 후, 즉 Map이 load되고 나서 발생합니다.
      OnFeatureClick	Map의 어떠한 Feature를 click시 발생합니다. 해당 Feature 객체를 전달받습니다.
      OnFeatureMouseOver	Map의 어떠한 Feature를 mouseover시 발생합니다. 해당 Feature 객체를 전달받습니다.
      OnFeatureMouseOut	Map의 어떠한 Feature를

1. 1. mouseover시 발생합니다. 해당 Feature 객체를 전달받습니다. 단, feature가 없는 경우, undefined를 전달합니다.
      OnMarkerClick	Map에 Marker가 존재하고 해당 Marker를 click시 발생합니다. 해당 Marker 객체와 아래 Layer의 Feature 객체를 전달받습니다.
      OnMarkerMouseOver	Map에 Marker가 존재하고 해당 Marker를 mouseover시 발생합니다. 해당 Marker 객체를 전달받습니다.

변경 전/후 제품 버전

변경 전 :

변경 후 :

1. 1.         

      
      

   2. 커서 위치에 따른 커스텀 팝업 설정이 필요한 경우에는 아래 가이드를 참고합니다.

      펼치기
      title GeoMap 컴포넌트 커스텀 팝업 설정 가이드
      도움말 title GeoMap 컴포넌트 커스텀 팝업 설정 가이드 해당 개선 작업으로 아래와 같이 추가되었습니다. 툴팁: Geomap 컴포넌트에서 기본으로 제공하는 기능입니다. 사용 방법은 위 createTooltip() 메소드 설명을 참고해주세요. 툴팁은 Geomap 컴포넌트의 viewport 내에서만 움직입니다. 간단한 style 변경이 가능합니다. 팝업: 툴팁보다 다양한 UI를 원하는 사용자들을 위한 기능입니다. Geomap 컴포넌트의 event마다 전달해주는 pointEvent의 위치를 이용합니다. AUD의 UserComponent를 이용한 샘플 보고서와 아래 가이드를 참고해주세요. 샘플 보고서: GeoMap 컴포넌트(국내지도) 팝업 보고서 Image Added 가이드: 뷰어 보고서의 스크립트 가이드 팝업 기능 사용을 위한 함수 정의 코드 블럭 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 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); // 뷰어 사이즈가 변경될 때마다 팝업 보고서에게 자신의 사이즈를 다시 전달합니다. }; 팝업 샘플 보고서의 스크립트 안내 해당 보고서는 샘플 보고서이며, 스크립트 수정으로 사용자가 원하는 대로 사용할 수 있습니다. 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(); }