page no.
Showpageid |
---|
Link_popup |
---|
경고 | ||
---|---|---|
| ||
해당 기능은 타사의 상용 맵 API 연결을 지원하는 것이므로, 아래 샘플 처럼 타사의 맵을 이용하기 위해서는 BI MATRIX가 아닌 타사 와의 라이센스 계약이 필요합니다. |
참고사항 | ||
---|---|---|
| ||
|
- 기능 설명
- AddIn Control의 GeoMap Component를 이용하여 타사 상용 또는 무료 맵 API를 사용할 수 있습니다.
- 지원 API 목록 : Mapbox gl, Kakao 지도, V-world 지도
사용 방법
간단하고 빠르게 해당 기능을 사용할 수 있도록 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 - 적용 결과
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']} ]
removeMarkers(markerId?) 매개 변수로 marker의 id 를 전달받고, 특정 marker 또는 전체 marker 를 삭제합니다.
코드 블럭 language js title markerInfos 예시 collapse true 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를 추가합니다.
코드 블럭 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 Component 이벤트
Event 명
Event 설명
OnMapLoaded Map이 로드된 후 발생합니다. OnMapClick Map에 click시 발생합니다.
parameter data point {X: offsetX, Y: offsetY} coordinate [longitude, latitude]
OnFeatureClick Map의 어떠한 Feature를 click시 발생합니다.
parameter data point {X: offsetX, Y: offsetY} feature feature 객체 OnFeatureMouseOver Map 의 어떠한 Feature 에 마우스오버시 발생합니니다.
parameter data point {X: offsetX, Y: offsetY} feature feature 객체 OnFeatureMouseOut Map 의 어떠한 Feature 에 마우스아웃시 발생합니니다.
parameter data point {X: offsetX, Y: offsetY} feature feature 객체 해당 Feature 객체를 전달받습니다.
OnMarkerClick Map에 Marker가 존재하고 해당 Marker를 click시 발생합니다.
parameter data point {X: offsetX, Y: offsetY} marker marker 객체 feature feature 객체 또는 undefined OnMarkerMouseOver Map에 Marker가 존재하고 해당 Marker 에 마우스오버시 발생합니다.
parameter data point {X: offsetX, Y: offsetY} marker marker 객체 feature feature 객체 또는 undefined OnMarkerMouseOut Map에 Marker가 존재하고 해당 Marker 에 마우스아웃시 발생합니다.
parameter data point {X: offsetX, Y: offsetY} marker marker 객체 feature feature 객체 또는 undefined 해당 Marker 객체와 아래 Layer의 Feature 객체를 전달받습니다.
이외 추가 기능은 아래 가이드를 참고하세요.
펼치기 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▶ 스타일 데이터 구조데이터 테이블은 아래의 구조를 가집니다. Column 명 | Data Type | Default Value | Description | GID_CODE | string | 스타일을 적용할 지역 코드 | FILL_COLOR | string | '#b1c3f9' | feature 의 배경색상 | FILL_OPACITY | number (between 0 and 1) | 0.4 | feature 의 배경 투명도 | LINE_COLOR | string | '7e9bf6' | feature 의 border 색상 | LINE_OPACITY | number (between 0 and 1) | 0.8 | feature 의 border 투명도 | LINE_WIDTH | number | 1 | feature 의 border 두께 | ▶ UserComponent 보고서 ScriptaddProperty() 함수에서 geojson 의 feature에 스타일 속성을 추가합니다. 아래의 예제 코드는 GID_1 과 매핑하고 있습니다. 필요에 따라 수정해서 사용하실 수 있습니다.
▶ 최종 화면 예시아래의 예시 화면은 KakaoMap 을 이용하였으며, 현재 지원하는 기타 상용 지도(MapboxMap, VWorldMap) 에서도 동일한 결과를 확인할 수 있습니다. 도움말 |
getProjUtil()은 GeoMap Component 의 util 객체에 정의되어 있습니다. Proj 라이브러리를 이용한 Util을 반환합니다. 사용 예제
|
책갈피 | ||||
---|---|---|---|---|
|
도움말 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
참고사항 | ||
---|---|---|
| ||
|
기능 정보 |
|
|
|
|
|
|
|
---|---|---|---|---|---|---|---|
시작 버전 정보 |
|
정보 | ||||
---|---|---|---|---|
| ||||
|
페이지 속성 | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|