페이지 이력

page no.    

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 > [UC] MAP_VIEWER(external) (상용 지도)
   UserComponent 보고서	[GeoMap] MAP_USERCOMPONENT(external)	AddIn Control인 GeoMap Component를 감싼 보고서입니다. 인터페이스는 스크립트에 정의되어 있습니다. 추가 기능이 신규로 생길 경우, 해당 보고서가 수정됩니다.	View file name [GeoMap] MAP_USERCOMPONENT(external).sc height 150
   	[GeoMap] MAP_USERCOMPONENT(overlay)	GeoMap Component의 addOverlay 메소드 사용 시, i-AUD 보고서를 Overlay할 수 있습니다. 해당 메소드를 위한 샘플 보고서입니다. 스크립트로 파라미터 전달 방법을 확인하세요.	View file name [GeoMap] MAP_USERCOMPONENT(overlay).sc height 150

        

      

3. 적용 결과
   
       

   1. Component 인터페이스

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

      Method 명	Method 설명
      addLine(locations)	매개 변수 locations 정보에 맞는 위치에 Line을 생성하고, 해당 Line 객체를 반환합니다. 펼치기 title Method 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> 예시) 코드 블럭 language js title markerInfos 예시 collapse true [{'name' : '세방빌딩', 'id' : 'ID_AA', 'lonLat': ['127.0448', '37.5038']}, {'name' : '경복궁', 'id' : 'ID_BB', 'lonLat': ['126.9602', '37.5788']} ]
      Dispose()	Component를 Dispose합니다.
      Resize()	Component를 Resize합니다.
      LoadMap(geoJson, isFit)	전달받은 geoJson 데이터대로 Layer 위에 표시합니다. isFit이 true일 경우 Bound를 Set합니다. - geoJson : GeoJSON - isFit : boolean
      addOverlay(options)	Overlay를 추가합니다. 코드 블럭 title options collapse true 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 설명
      OnFeatureClick	Map의 어떠한 Feature를 click시 발생합니다. 해당 Feature 객체를 전달받습니다.
      OnMarkerClick	Map에 Marker가 존재하고 해당 Marker를 click시 발생합니다. 해당 Marker 객체와 아래 Layer의 Feature 객체를 전달받습니다.

      
      

            

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

      펼치기
      title 추가 기능
      도움말 title 좌표계 변경 기능 getProjUtil()은 GeoMap Component 의 util 객체에 정의되어 있습니다. Proj 라이브러리를 이용한 Util을 반환합니다. 사용 예제 코드 블럭 language js 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] 도움말 title 17개 시도별 중심 좌표 찾기 기능 getCenterPoint(callback) 은 GeoMap Component 의 util 객체에 정의되어 있습니다. 파라미터 callback 은 각 지역의 정보를 가져온 뒤 실행되는 함수입니다. 참고사항 자체 알고리즘에 의해 계산한 값이 아닌 SGIS 의 주소경계 API를 이용하여 SGIS에서 제공하는 지리 데이터를 가져오고 있습니다. 현재는 시/도 범위의 중심 좌표만 지원합니다. 사용 예제 코드 블럭 language js theme Eclipse title 예제 코드 linenumbers true 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 에 해당하는 값과 같습니다) 코드 블럭 language js theme Eclipse title 결과값 linenumbers true collapse true [ { "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을 반환합니다. 사용 예제 코드 블럭 language js title 예제 코드 var turfUtil = map.util.getTurfUtil(); // 시작점과 끝점을 잇는 곡선을 그립니다. 중간지점을 지정하지 않는 경우 turf 라이브러리의 midpoint 함수를 이용하여 중간지점을 정합니다. var curveLine = turfUtil.addCurveLine([37.683105,55.751849], [129.078369,35.169318], undefined); // 모스크바와 부산을 잇는 "LineString"인 type의 feature 반환