[i-AUD] GeoMap 컴포넌트(국내지도) 사용 가이드

page no. 79414280

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

사용 방법

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

GeoMap 패치 적용 방법 안내

신규 설치가 아닌 패치의 경우

필요한 테이블이 존재하지 않아 오류가 나는 경우, 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	지역명 다국어 데이터

기존 패키지 패치 방법과 동일하게 백업 후 패치를 진행합니다.
1. 패치 파일: GeoMap_patch_20240215.zip
2. 패치 파일 미리보기:
3. 패치 파일 덮어쓰기 경로: REPORTPATH(보고서 파일 위치, Admin > 시스템 옵션 > REPORTPATH 확인)
4. 20240215 Update
  
  MAP_GEO_1 데이터가 단순화되었습니다.
  로딩 시간이 5.47초 → 879.43밀리초로 축소되었습니다.
  geojson 파일의 크기가 6918KB → 1039KB로 축소되었습니다.
GeoMap 컴포넌트 사용을 위해 필요한 데이터를 아래의 보고서를 통해 생성합니다.
1. 생성 데이터: 지리정보(GeoJSON) 데이터 / 지리정보 다국어(한국어) 데이터 / 대한민국 지리정보 코드체계 데이터
2. 데이터 미리보기: MAP_GEO_DOMESTIC_CODE
3. 보고서 파일: MAP_DATABASE_생성하기.mtsd
4. 보고서 미리보기:
5. 보고서를 해당 서버에서 오픈 후, 보고서에서 안내한 대로 1번부터 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
AddIn 컨트롤의 Component 목록에 GeoMap을 추가합니다.
1. 추가 방법: CONTEXTPATH/extention/AUD/addin.properties 를 오픈하여 다음과 같이 "GeoMap"을 작성 후 저장합니다.
2. i-AUD Designer에서 AddIN 컨트롤 생성 후 우측 PropertyGrid의 Base > Class 속성 목록에 정상적으로 추가되었음을 확인합니다.
i-AUD Designer에서 신규 보고서를 생성하여 아래의 규칙을 따라 GeoMap 컴포넌트를 사용합니다.
1. UserComponent 컨트롤을 생성하여, 우측 PropertyGrid의 Base > Source 를 3번 과정에서 다운받은 보고서로 설정합니다.
  1. 설정하는 방법은 UserComponent 가이드 를 참고하십시오.
  2. 설치가 정상적으로 진행되었다면, 아래와 같은 화면이 노출됩니다.
  3. 이후 데이터를 연결하여 사용할 수 있습니다.
2. 보고서 스크립트에 아래와 같이 작성합니다.
  1. OnDocumentLoadComplete 이벤트
  2. GeoMap 컴포넌트 제공 이벤트 사용
  3. 자세한 사항은 보고서 샘플을 참고하십시오.

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

Property 명	Property 설명
Source	Map의 source
Features	Map의 모든 Feature객체 정보
UseHighlightStyle	feature mouseover시의 하이라이트 기능 사용 유무. (default:false)
HighlightStyle	feature mouseover시의 하이라이트 기능의 style 객체 변경 가능한 속성: stroke(color, width), fill(color) Method 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) Method 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 사용 유무를 설정합니다. 예제 코드 map.UseDragPan = true; // 드래그를 통해 지도 내에서 이동할 수 있습니다.
UseMouseWheelZoom	Map의 interaction 객체의 MouseWheelZoom 사용 유무를 설정합니다. 예제 코드 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를 반환합니다.

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> 예시)
markerInfos 예시 원본 펼치기
```
[{'name' : '세방빌딩',
    'id' : 'ID_AA',
 'lonLat': ['127.0448', '37.5038']},
 {'name' : '경복궁',
    'id' : 'ID_BB',
 'lonLat': ['126.9602', '37.5788']} ]
```
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 객체를 반환합니다.

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' 정보가 표시됩니다.

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의 높이를 설정합니다.

예제 코드

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

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

GeoMap 컴포넌트 커스텀 팝업 설정 가이드

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

툴팁: Geomap 컴포넌트에서 기본으로 제공하는 기능입니다.
- 사용 방법은 위 createTooltip() 메소드 설명을 참고해주세요.
- 툴팁은 Geomap 컴포넌트의 viewport 내에서만 움직입니다.
- 간단한 style 변경이 가능합니다.

팝업: 툴팁보다 다양한 UI를 원하는 사용자들을 위한 기능입니다.

Geomap 컴포넌트의 event마다 전달해주는 pointEvent의 위치를 이용합니다.
AUD의 UserComponent를 이용한 샘플 보고서와 아래 가이드를 참고해주세요.
샘플 보고서: GeoMap 컴포넌트(국내지도) 팝업 보고서

가이드:

뷰어 보고서의 스크립트 가이드

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

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

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

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

참고 사항

데이터 출처
- 세계 지도 데이터: GADM v4.1. (2022년도 7월)
- 국내 지도 데이터: 대한민국 최신 행정구역(SHP) 다운로드 도로명주소 DB의 행정구역도 기반 (2023년도 7월)
- 국내 지도 코드표: 행정안전부>업무안내>주민등록,인감 최신일자(등록일 2023.12.18) 게시판

주의 사항

변경 사항

(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와 동일)

제약 사항
1. 해당 가이드에서 제공하는 별도 패치 파일 없이는 GeoMap 컴포넌트를 사용하실 수 없습니다.
2. 해당 기능은 ie11에서 사용할 수 없습니다.

기능 정보	API Open	UI Open	Read Only	Not Use	Hidden	Not Recommend	해당 없음
시작 버전 정보	Release No : 7.0.400.20230517

샘플 정보

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

	파일	변경됨

공유된 파일이 아직 없습니다.

공간 바로가기

페이지 트리