페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

page no.    

Showpageid

Start Release No : 7.0.500.20240329-01 / Update Release No : 7.0.500.20240516-11

작성자 : 황송희, 김예슬  / 검수자 : 이경륜

Link_popup

경고
title라이센스 안내

해당 기능은 타사의 상용 맵 API 연결을 지원하는 것이므로, 아래 샘플 처럼 타사의 맵을 이용하기 위해서는 BI MATRIX가 아닌 타사 와의 라이센스 계약이 필요합니다.
이 과정에서 별도로 비용이 요구될 수 있으며 API Key에 대한 사용기간, 발급 방법 등에 대한 내용은 각 라이브러리의 사이트를 참고하세요.


참고사항
title기능 사용 전 필수 참고 사항
  • 해당 기능을 사용하기 위해서는 패치를 우선적으로 해주셔야 합니다. 패치 방법은 GeoMap 컴포넌트(국내지도) 사용 가이드패치 적용 방법 안내 를 참고하세요. 아래 항목까지만 적용하시면 됩니다.
    1. 기존 패키지 패치 방법과 동일하게 백업 후 패치를 진행합니다.
    2. GeoMap 컴포넌트 사용을 위해 필요한 데이터를 아래의 보고서를 통해 생성합니다.
  • 필수 옵션과 제약 사항에 관해서는 GeoMap 컴포넌트(국내지도) 사용 가이드 를 참고하세요.
  • 해당 기능을 위해 사용한 오픈 소스 라이브러리에 대한 내용은 아래 참고사항 을 참고하세요.

  

  1. 기능 설명
    1. AddIn Control의 GeoMap Component를 이용하여 타사 상용 또는 무료 맵 API를 사용할 수 있습니다.
    2. 지원 API 목록 : Mapbox gl, Kakao 지도, V-world 지도

  2. 사용 방법
    간단하고 빠르게 해당 기능을 사용할 수 있도록 rnd 사이트샘플 보고서를 제공합니다.

    최초 샘플 보고서 사용 시에는 아래 목록의 보고서를 모두 다운로드 받으셔야 합니다.

    보고서 분류보고서 명보고서 설명
    다운 혹은 연결 URL
    다운로드
    Viewer 보고서[UC] MAP_VIEWER(external) (상용 지도)UserComponent 보고서를 사용하여 간단하게 해당 기능을 사용할 수 있음을 보여줍니다. UserComponent 사용 가이드는 UserComponent 기본 사용 가이드 를 참고하세요.
    URL: https://rnd.bimatrix.co.kr/aud7/portal/Content.jsp?id=REP5D10EC786D6046698FCDB4447CF1A33C
    보고서 위치: 1. 샘플 보고서 > 1.1. i-AUD > UserComponent > 

    View file
    name[UC] MAP_VIEWER(external) (상용 지도).mtsz
    height250

    UserComponent 보고서[GeoMap] MAP_USERCOMPONENT(external)AddIn Control인 GeoMap Component를 감싼 보고서입니다. 인터페이스는 스크립트에 정의되어 있습니다. 추가 기능이 신규로 생길 경우, 해당 보고서가 수정됩니다.

    View file
    name[GeoMap] MAP_USERCOMPONENT(external).sc
    height150

    [GeoMap] MAP_USERCOMPONENT(overlay)GeoMap Component의 addOverlay 메소드 사용 시, i-AUD 보고서를 Overlay할 수 있습니다. 해당 메소드를 위한 샘플 보고서입니다. 스크립트로 파라미터 전달 방법을 확인하세요.

    View file
    name[GeoMap] MAP_USERCOMPONENT(overlay).sc
    height150


    경고
    title샘플 보고서- File DB 사용 주의

    샘플 보고서 다운로드 하신 후 사용하실 때 DB Connection 오류 발생 시, 보고서 내 데이터소스의 File DB Connection을 연결해주세요.


  3. 적용 결과

    1. Component 인터페이스

      책갈피
      Component 인터페이스
      Component 인터페이스

      Method 명

      Method 설명

      addLine(locations)

      매개 변수 locations 정보에 맞는 위치에 Line을 생성하고, 해당 Line 객체를 반환합니다.

      펼치기
      titleMethod
      • setColor(color): line 객체의 color를 설정합니다. Update() 실행 후 UI가 변경됩니다.
      • setWidth(width): line 객체의 width를 설정합니다. Update() 실행 후 UI가 변경됩니다.
      • setLineDash(linedash): line 객체의 lineDash 사용 여부를 설정합니다. Update() 실행 후 UI가 변경됩니다.
      • setLineCap(lineCap): line 객체의 line style를 설정합니다. Update() 실행 후 UI가 변경됩니다.
      • removeLines(coordinate): 매개 변수 coordinate에 해당하는 line를 제거합니다.


      addMarker(markerInfos)

      매개 변수 markerInfos정보에 맞는 위치에 Marker를 생성하고, 해당 Marker 객체를 반환합니다.

      - markerInfos : Array<object> 예시)

      코드 블럭
      languagejs
      titlemarkerInfos 예시
      collapsetrue
      [{'name' : '세방빌딩',
          'id' : 'ID_AA',
       'lonLat': ['127.0448', '37.5038']},
       {'name' : '경복궁',
          'id' : 'ID_BB',
       'lonLat': ['126.9602', '37.5788']} ]
      removeMarkers(markerId?)

      매개 변수로 marker의 id 를 전달받고, 특정 marker 또는 전체 marker 를 삭제합니다.

      코드 블럭
      languagejs
      titlemarkerInfos 예시
      collapsetrue
      var markersArr = map.addMarker(markerInfo);
      
      
      // 1. marker 객체에서 직접 remove 하는 경우
      if(markersArr.length > 0) {
      	for(var i = markersArr.length - 1; i >= 0; i--){
      		markersArr[i].remove();	
      	}
      	this.markers[];
      }
      
      
      // 2. 지도의 removeMarkers() 메소드를 사용하는 경우 : 전체 삭제
      if(markersArr.length > 0) {
      	map.removeMarkers();
      }
      
      
      // 3. 지도의 removeMarkers(markerId) 메소드를 사용하는 경우 : 특정 marker 삭제
      if(markersArr.length > 0) {
      	map.removeMarkers('경복궁');	// id 가 '경복궁' 인 marker 만 삭제합니다
      }


      Dispose()Component를 Dispose합니다.
      Resize()Component를 Resize합니다.
      Clear()Map의 모든 layer의 source가 refresh, 즉 초기화됩니다.
      LoadMap(geoJson, isFit)전달받은 geoJson 데이터대로 Layer 위에 표시합니다. isFit이 true일 경우 Bound를 Set합니다. - geoJson : GeoJSON - isFit : boolean
      ※ feature의 style 을 변경하고 싶다면 아래의 추가 기능 가이드를 참고해주세요.
      addOverlay(options)

      Overlay를 추가합니다.

      코드 블럭
      titleoptions
      collapsetrue
      element?: HTMLElement;
      offset?: Array<number>;
      position?: Array<number>;
      positioning? : string;
      reportCode?: string;
      params?: object;


      addDomesticGeoJson(isFit)권역별 데이터를 로드하여 Layer를 추가합니다. isFit이 true일 경우 Bound를 Set합니다. - isFit : boolean


    2. Component 이벤트

      Event 명

      Event 설명

      OnMapLoadedMap이 로드된 후 발생합니다.OnMapClick

      Map에 click시 발생합니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      coordinate
      [longitude, latitude]
      OnFeatureClick

      Map의 어떠한 Feature를 click시 발생합니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      featurefeature 객체
      OnFeatureMouseOver

      Map 의 어떠한 Feature 에 마우스오버시 발생합니니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      featurefeature 객체
      OnFeatureMouseOut

      Map 의 어떠한 Feature 에 마우스아웃시 발생합니니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      featurefeature 객체

      해당 Feature 객체를 전달받습니다.

      OnMarkerClick

      Map에 Marker가 존재하고 해당 Marker를 click시 발생합니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      markermarker 객체
      featurefeature 객체 또는 undefined
      OnMarkerMouseOver

      Map에 Marker가 존재하고 해당 Marker 에 마우스오버시 발생합니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      markermarker 객체
      featurefeature 객체 또는 undefined
      OnMarkerMouseOut

      Map에 Marker가 존재하고 해당 Marker 에 마우스아웃시 발생합니다.

      parameterdata
      point{X: offsetX, Y: offsetY}
      markermarker 객체
      featurefeature 객체 또는 undefined

      해당 Marker 객체와 아래 Layer의 Feature 객체를 전달받습니다.


이외 추가 기능은 아래 가이드를 참고하세요.

Image Removed

▶ UserComponent 보고서 Script

addProperty() 함수에서 geojson 의 feature에 스타일 속성을 추가합니다.

아래의 예제 코드는 GID_1 과 매핑하고 있습니다. 필요에 따라 수정해서 사용하실 수 있습니다.

펼치기
title추가 기능


LoadMap 에서 geojson 을 이용하여 feature 를 생성할 때, 지역별로 스타일 속성(Fill, Line) 을 추가할 수 있습니다.

사용 예제

▶ 메인 보고서 Script

데이터 테이블을 매개변수로 전달합니다.

도움말
titlefeature에 style 추가하기
코드 블럭
languagejs
title예제 코드
collapsetrue
function addGeoJsonWithStyle(){
    Matrix.Execute('DS_COLOR', function(p){
		if(p.Success == false){
			Matrix.Alert(p.Message);
				return;
			}
			var ds = p.DataSet;
			var dt = p.DataTable;
			closure.map.addDomesticGeoJson(Matrix.getObject('CheckBox2').Checked, dt);
		});
}

▶ 스타일 데이터 구조

데이터 테이블은 아래의 구조를 가집니다.

Column 명Data TypeDefault ValueDescription
GID_CODEstring스타일을 적용할 지역 코드
FILL_COLORstring'#b1c3f9'feature 의 배경색상
FILL_OPACITYnumber (between 0 and 1)0.4feature 의 배경 투명도
LINE_COLORstring'7e9bf6'feature 의 border 색상
LINE_OPACITYnumber (between 0 and 1)0.8feature 의 border 투명도
LINE_WIDTHnumber1feature 의 border 두께
코드 블럭
languagejs
title예제 코드
collapsetrue
addDomesticGeoJson: function(isFit, options){
		Matrix.RunScript("" ,"MAP_SERVICE" ,function(p){
								if(p.Success == false){
									Matrix.Alert(p.Message);
									Matrix.DebugWrite('GeoMap', 'refreshMap::'+ p.Message);
									return;
								}
								var geoJson = p.DataSet;
								var lastLevel = Matrix.GetGlobalParamValue('VS_G_LAST_FEATURE_LEVEL');
								Matrix.RemoveGlobalParams('VS_G_LAST_FEATURE_LEVEL');
								
								
								
								if(geoJson.features.length > 0) {
									if(options) geoJson = addProperty(geoJson, options);	// geoJson 에 속성을 추가해서 전달합니다
									IGeoMapComponent.LoadMap(geoJson, isFit);
									Matrix.DebugWrite('GeoMap', 'LoadMap::');
								}else {
									alert('마지막 Level입니다.');
									return;
								}
								
							});
							
		/* 
			geoJson 의 Property 에 overlay style 속성을 추가하고 geoJson 을 반환합니다.
			@params property DataTable 의 형태로 GID_CODE, FILL_COLOR, FILL_OPACITY, LINE_COLOR, LINE_WIDTH, LINE_OPACITY 의 Column 을 가진다
		*/
		function addProperty(geoJson, property){
			 property.Rows.map(function(row){				
				// geoJson 을 돌면서 속성을 추가합니다.
				geoJson.features.forEach(function(feature){
					if (feature.properties.GID_1 === row.GetValue('GID_CODE')) {	// GID_1 과 매핑
						feature.properties.GID_CODE = row.GetValue('GID_CODE');
						feature.properties.FILL_COLOR = row.GetValue('FILL_COLOR');
						feature.properties.FILL_OPACITY = row.GetValue('FILL_OPACITY');
						feature.properties.LINE_COLOR = row.GetValue('LINE_COLOR');
						feature.properties.LINE_WIDTH = row.GetValue('LINE_WIDTH');
						feature.properties.LINE_OPACITY = row.GetValue('LINE_OPACITY');
					}
				});
			});
			
			return geoJson;
		}
	},

▶ 최종 화면 예시

아래의 예시 화면은 KakaoMap 을 이용하였으며, 현재 지원하는 기타 상용 지도(MapboxMap, VWorldMap) 에서도 동일한 결과를 확인할 수 있습니다.

Image Removed

도움말
title좌표계 변경 기능

getProjUtil()은 GeoMap Component 의 util 객체에 정의되어 있습니다. Proj 라이브러리를 이용한 Util을 반환합니다.


사용 예제

코드 블럭
languagejs
title예제 코드
var projUtil = map.util.getProjUtil();
// 기존 Proj 라이브러리에서 제공하는 좌표계를 반환합니다. 변경을 원하는 좌표계가 아래에 있을 경우 defineNewProjection를 이용해 좌표계를 정의하실 필요가 없습니다.
var predefinedProjections = projUtil.getPreDefinedProjections() // return ['EPSG:4326', 'EPSG:4269', 'EPSG:3857'];


// 예시) EPSG:5181 좌표계의 [37.528, 126.9207]를 변환하고 싶은 경우
// 1. 좌표계 정의
// proj4 문자열 좌표계 정의는 https://epsg.io/5181 를 참고하세요.
projUtil.defineNewProjection("EPSG:5181", "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs")
// 2. 포인트 좌표 변환
var transformedCoordinate = projUtil.transformCoordinate("EPSG:5181", [37.528, 126.9207]); // return [124.84886361842304, 33.47611942468759]



도움말
title17개 시도별 중심 좌표 찾기 기능

getCenterPoint(callback) 은 GeoMap Component 의 util 객체에 정의되어 있습니다.

파라미터 callback 은 각 지역의 정보를 가져온 뒤 실행되는 함수입니다.

참고사항

자체 알고리즘에 의해 계산한 값이 아닌 SGIS 의 주소경계 API를 이용하여 SGIS에서 제공하는 지리 데이터를 가져오고 있습니다.

현재는 시/도 범위의 중심 좌표만 지원합니다.


사용 예제

코드 블럭
languagejs
title예제 코드
linenumberstrue
function getCenter(){
	map.util.getCenterPoint(function(datas){
		// callback function (datas 의 내용은 아래의 결과값을 참고하세요)
		var markerInfo = datas.map(function(data){
			retrun {
				name: data.name,
				lonLat: data.lonLat
			}
		});
		map.addMarker(markerInfo);	// 마커로 표시합니다
	});
}


결과값

lonLat: 좌표값

code: SGIS 의 지역 코드

name: 지역 이름 (MAP_GEO_1 테이블의 LABEL 에 해당하는 값과 같습니다)

코드 블럭
languagejs
title결과값
linenumberstrue
collapsetrue
[
    {
        "lonLat": [
            126.97834782835902,
            37.56669009036455
        ],
        "code": "11",
        "name": "서울특별시"
    },
    {
        "lonLat": [
            129.09175563706935,
            35.24125634125668
        ],
        "code": "21",
        "name": "부산광역시"
    },
    {
        "lonLat": [
            128.6226425399308,
            35.97347538476608
        ],
        "code": "22",
        "name": "대구광역시"
    },
    {
        "lonLat": [
            126.70523602351949,
            37.45604185708162
        ],
        "code": "23",
        "name": "인천광역시"
    },
    {
        "lonLat": [
            126.8354459164671,
            35.15573674234789
        ],
        "code": "24",
        "name": "광주광역시"
    },
    {
        "lonLat": [
            127.39405991650911,
            36.33980451022681
        ],
        "code": "25",
        "name": "대전광역시"
    },
    {
        "lonLat": [
            129.23840258289323,
            35.55370705798613
        ],
        "code": "26",
        "name": "울산광역시"
    },
    {
        "lonLat": [
            127.25881030360377,
            36.560535581441435
        ],
        "code": "29",
        "name": "세종특별자치시"
    },
    {
        "lonLat": [
            127.25204502645134,
            37.2865873659788
        ],
        "code": "31",
        "name": "경기도"
    },
    {
        "lonLat": [
            128.17336172923484,
            37.8836272925393
        ],
        "code": "32",
        "name": "강원특별자치도"
    },
    {
        "lonLat": [
            127.53924730130387,
            36.73834076972116
        ],
        "code": "33",
        "name": "충청북도"
    },
    {
        "lonLat": [
            126.71839045797792,
            36.67835738574175
        ],
        "code": "34",
        "name": "충청남도"
    },
    {
        "lonLat": [
            127.10867588676484,
            35.820389942968816
        ],
        "code": "35",
        "name": "전라북도"
    },
    {
        "lonLat": [
            126.67198974055624,
            34.814882947753354
        ],
        "code": "36",
        "name": "전라남도"
    },
    {
        "lonLat": [
            128.75109173106813,
            36.4649263768976
        ],
        "code": "37",
        "name": "경상북도"
    },
    {
        "lonLat": [
            128.16437996516694,
            35.42913615877326
        ],
        "code": "38",
        "name": "경상남도"
    },
    {
        "lonLat": [
            126.48382513785216,
            33.40104880413814
        ],
        "code": "39",
        "name": "제주특별자치도"
    }
]




도움말
title곡선 생성 기능

getTurfUtil()은 GeoMap Component 의 util 객체에 정의되어 있습니다. Turf 라이브러리를 이용한 Util을 반환합니다.


사용 예제

코드 블럭
languagejs
title예제 코드
var turfUtil = map.util.getTurfUtil();


// 시작점과 끝점을 잇는 곡선을 그립니다. 중간지점을 지정하지 않는 경우 turf 라이브러리의 midpoint 함수를 이용하여 중간지점을 정합니다.
var curveLine = turfUtil.addCurveLine([37.683105,55.751849], [129.078369,35.169318], undefined); // 모스크바와 부산을 잇는 "LineString"인 type의 feature 반환



도움말
titleshp 파일 형식 변환 및 좌표계 변환 기능

shp 파일의 형식을 geoJson 으로 바꾸고 AUD 에서 제공하는 지도의 좌표계(WGS84)와 다른 경우에는 좌표계의 변환을 수행합니다.

더욱 자세한 코드를 확인하시려면 geoTools service 불러오기.mtsz를 참고해주세요. (샘플 보고서에서는 mapbox 지도를 사용하고 있습니다.)


참고사항
title제약 사항
  • 패치 필요 : 해당 서비스를 이용하기 위해서는 서버에 패치가 필요합니다.
  • JDK 11 환경에서 서비스 : 해당 서비스는 JDK 11 환경에서 서비스됩니다. JDK 11 이상의 버전이 아닌 다른 버전에서는 서비스가 제대로 작동하지 않을 수 있습니다.


패치 방법

  1. geomap-1.0.jar [CONTEXT_ROOT]/WEB-INF/lib/ 에 위치시켜 주세요.
  2. 샘플 보고서의 server script 에서 환경에 맞는 경로로 filePath를 수정해 주세요.


사용 예제

코드 블럭
languagejs
titleClient Script 예제
linenumberstrue
collapsetrue
/* 서버에서 shp 파일을 geoJson 형식으로 변환하고 좌표계를 WGS84 로 변경하는 함수 */
function convertSHPfile(){
	Matrix.RunScript('', 'CONVERT_COORDS', function(p){
        if(p.Success == false){
      		Matrix.Alert(p.Message);
      		return;
      	}
      	var ds = p.DataSet;
		closure.map.LoadMap(ds, true);	// 변환된 geoJson을 지도에 표시합니다.
    });
}


코드 블럭
languagejs
titleServer Script 예제
linenumberstrue
collapsetrue
/* 서버에서 jar 파일을 실행 */
var req = Matrix.getRequest(); /* request */
var res = Matrix.getResponse(); /* response */
var session  = Matrix.getSession(); /* session */
var util = Matrix.getUtility(); /* utility */
var fso = Matrix.getFileSystemObject(); /* file access */

try{
	Matrix.WriteCustomLog('geoTools', '===== shell command [시작] =====');
	
	// shp file path
	var inputFilePath = req.getParam('VS_SHP_PATH');
	
	// geoJson file path
	var filePath = 'C:/AUDPlatform_7/matrix/reports/_TEMP_/';
	var fileName = util.getUniqueKey('GEO') + '.json';
	var outputFilePath = fso.PathCombine(filePath, fileName);
	
	// target 좌표계
	var epsgCode = req.getParam('VS_EPSG_CODE');
	
	Matrix.WriteCustomLog('geoTools', '===== shell command [inputFilePath] =====  ' + inputFilePath);
	Matrix.WriteCustomLog('geoTools', '===== shell command [outputFilePath] =====  ' + outputFilePath);
	
	/* jar 실행시 필요한 파라미터 */
	var cmdArray = [
		"C:\\Program Files\\Java\\jdk-11\\bin\\java.exe",						// jdk 11 실행 경로
		"-jar",																					// jar 파일 실행 명령어
		"C:\\AUDPlatform_7\\matrix\\WEB-INF\\lib\\geomap-1.0.jar",	// geomap-1.0.jar 파일 위치
		inputFilePath,																			// .shp 파일의 위치
		outputFilePath,																		// .json 파일의 위치
		epsgCode																				// target 좌표계
	];
	var result = util.ShellExecute(cmdArray, true);
	Matrix.WriteCustomLog('geoTools', '===== shell command [완료] =====');

	if(fso.Exists(outputFilePath)){
		Matrix.WriteCustomLog('geoTools', '===== read geoJson [시작] =====');
		res.WriteResponseTextFile(outputFilePath)
		fso.DeleteFile(outputFilePath);
		Matrix.WriteCustomLog('geoTools', '===== read geoJson [완료] =====');
	}
}catch(e){
	Matrix.WriteCustomLog('geoTools', '===== CONVERT_COORDS Error =====  ' + e);
}


화면 예시




책갈피
참고사항
참고사항

도움말
title참고 사항


참고사항
title주의 사항
  • 제약 사항

    1. 해당 기능은 ie11에서 사용 불가능합니다.
    2. 반드시 [i-AUD] GeoMap 국내지도 컴포넌트를 제공합니다. 를 우선으로 확인하고 해당 가이드의 기능을 이용하셔야 합니다.
    3. API Key에 대한 사용기간, 발급 방법 등에 대한 내용은 각 라이브러리 사이트를 참고하세요.


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


정보
title샘플 정보

첨부 파일
patterns.*jsp,.*zip,.*xml,.*js,.*mtsd,.*xlsx,.*xlsb,.*mtzb,.*mtvx,.*mtx,.*mtxz, .*mtsz,.*sc


페이지 속성
hiddentrue


정보
titleBCRM 정보


(BCRM#E0122) [GeoMap Component] 타사 상용 또는 무료 맵에 대한 연결 지원
(BCRM#E0997) [GeoMap] shp 파일의 문서 형식과 좌표계를 변환하는 서비스 개발