MapDraw

Name	Type	Description
`mapName`	`string`	지도 이름
`langInfo`	`Array.<LangInfo>`	언어 정보
`floorInfo`	`Array.<FloorInfo>`	지도 층 정보
`themeInfo`	`Array.<ThemeInfo>`	테마 정보
`poiInfo`	`Array.<PoiInfo>`	poi 정보
`sectionInfo`	`Array.<SectionInfo>`	섹션 정보
`poiCategories`	`Array.<PoiCategory>`	poi 카테고리 정보
`mapOptions`	`MapOption`	지도 설정 옵션

# changeCamera(cameraOption)

지도의 카메라 모드를 2d 또는 3d로 변경합니다.

Parameters:

Name	Type	Description
`cameraOption`	`CameraMode`	2d 또는 3d 지정

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#camera

Example

mapDraw.changeCamera({camera:"2d"});

# changeLanguage(language)

지도의 poi 언어를 변경합니다.

Parameters:

Name	Type	Description
`language`	`LangType`	변경할 언어.

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#language

Example

mapDraw.changeLanguage("ko");

# changeShowPoi(poiOption)

poi를 보이거나 숨기도록 설정합니다.

Parameters:

Name	Type	Description
`poiOption`	`ShowPoiOption`

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#showPoi

Examples

mapDraw.changeShowPoi({showPoi: true});

mapDraw.changeShowPoi({showPoi: false});

# clearMarker()

setMarker()로 그린 마커를 삭제합니다.

Example

mapDraw.clearMarker();

# controlDragLeft()

drag 기능을 3d, 2d 모두 마우스의 왼쪽 버튼으로 변경합니다.

Example

mapDraw.controlDragLeft();

# controlDragRight()

drag 기능을 3d, 2d 모두 마우스의 오른쪽 버튼으로 변경합니다.

Example

mapDraw.controlDragRight();

# convert2img(optionopt)

지도를 png형태의 이미지로 다운로드합니다.

Parameters:

Name	Type	Attributes	Description
`option`	`ImageConvertOption`	<optional>

See:

실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#mapDownload

Examples

mapDraw.convert2img();

mapDraw.convert2img({useMapOption : true});

# convertPosition(options) → {Position2d}

고객의 좌표계의 좌표를 다비오 지도(원도) 기준의 좌표로 변환합니다.

Parameters:

Name	Type	Description
`options`	`ConvertPositionOption`

See:

실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#convertPosition

Returns:

변환된 좌표 (2d)

Type: Position2d

Example

let convertOptions = {
     position : {
		    x:node.position.x, // 고객이 구하려고 하는 x 좌표 (고객의 위치 수집장치를 통해 수집되는 m 단위의 좌표)
		    y:node.position.y // 고객이 구하려고 하는 y 좌표 (고객의 위치 수집장치를 통해 수집되는 m 단위의 좌표)
	    },
	    degree : -5.27, // 고객의 지도를 기준으로 다비오(원도) 의 회전각도 (시계방향이 +, 시계 반대방향이 -)
	    zeroPoint : {
		    x : -284,
		    y : 286.5
	    }, // 고객의 지도를 기준으로 다비오(원도) 의 영점 이동 좌표
	    xDirection : 1, // 고객의 지도를 기준으로 다비오지도의 x 축 진행방향 (순방향)
	    yDirection : -1 // 고객의 지도를 기준으로 다비오지도의 y 축 진행방향 (역방향)
};
let p = mapDraw.convertPosition(convertOptions); // 좌표 변경 함수 호출

# deletePOITag(id)

mapDraw.setPOITag()로 생성한 poi의 tag를 삭제합니다.

Parameters:

Name	Type	Description
`id`	`string`	삭제할 tag와 연동된 poi id

See:

https://developers.dabeeomaps.com/example/#poiTag

Example

mapDraw.deletePOITag(poi1.id);

# dispose() → {void}

map을 그리기 위해 사용하던 모든 geometry, material 등을 메모리에서 해제합니다. dispose를 호출한 뒤 다시 지도를 그리려면 new indoorMapApi.mapView을 통해 새롭게 mapView를 생성해야 합니다.

Returns:

Type: void

Example

mapDraw.dispose();

# getFloorName(floorId)

floorId를 입력받아 해당하는 층의 정보를 return 해준다

Parameters:

Name	Type	Description
`floorId`	`string`	floor정보를 찾을 floorId

# getNavigation() → {Array.<RoutePath>}

지도에 그려진 노드를 기반으로 텍스트로 길찾기 경로를 표현할 수 있는 경로 목록이 배열형태로 반환합니다. 배열의 항목에서 move()를 사용하면 카메라를 해당위치로 이동시킬 수 있습니다. 이동수단을 이용하여 층이 변경된 경우 배열의 항목에서 distance가 number가 아닌 층 object로 표현됩니다. mapDraw.getRouteOn() 호출 후 사용하여야 합니다.

See:

실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#navigation

Returns:

길찾기 경로 목록

Type: Array.<RoutePath>

Example

let list = mapDraw.getNavigation();

# getNaviInfoByRoute(origin, destination, waypointsopt) → {RouteInfoByTrans}

이동수단별 길찾기 정보를 반환합니다. 길찾기 정보는 전체 소요시간과 전체거리입니다.

Parameters:

Name	Type	Attributes	Default	Description
`origin`	`Location`			출발지 poi 아이디 또는 좌표
`destination`	`Location`			도착지 poi 아이디 또는 좌표
`waypoints`	`Array.<Location>`	<optional>	[]	경유지 poi 아이디 또는 좌표. 한 개이상의 경유지도 가능. 생략 가능

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#getNaviInfoByRoute

Returns:

경로별 길찾기 정보

Type: RouteInfoByTrans

Example

let pathInfo = mapDraw.getNaviInfoByRoute(originPoi, destPoi);

# getRouteOff()

mapDraw.getRouteOn()으로 지도에 그린 길찾기 경로를 삭제합니다.

Example

mapDraw.getRouteOff();

# getRouteOn(origin, destination, typeopt, waypointsopt, retResponseopt) → {RouteInfo|number}

길찾기 경로를 지도에 표현합니다.

Parameters:

Name	Type	Attributes	Default	Description
`origin`	`Location`			출발지
`destination`	`Location`			경유지
`type`	`"recommendation"` \| `"stairs"` \| `"escalator"` \| `"elevator"`	<optional>	"recommendation"	층간이동 수단. 지정하지 않은 경우 추천경로로 그려집니다.
`waypoints`	`Array.<Location>`	<optional>	[]	경유지. 복수의 경유지가 가능합니다.
`retResponse`	`boolean`	<optional>	false	true로 설정할 경우 object로 경유포인트와 소요시간, 거리를 반환받게 되며 false로 설정할 경우 소요시간만 반환받습니다. 소요시간은 밀리세컨드 단위입니다.

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#navigation

Returns:

retResponse의 설정에 따른 반환

Type: RouteInfo | number

Examples

let time = mapDraw.getRouteOn(origin,destination);

let time = mapDraw.getRouteOn(origin,destination,"elevator");

let time = mapDraw.getRouteOn(origin,destination,"elevator", waypoints);

let naviResponse =  mapDraw.getRouteOn(origin,destination,"recommendation",[], true);

let naviResponse =  mapDraw.getRouteOn(origin,destination,"elevator",[], true);

# init2DCameraInfo()

2D 모드에서 카메라의 zoom, position, rotate를 초기화합니다. 만약 mapViewOption의 초기값에 zoom, center, northReference 값이 있다면 해당 값으로 초기화 됩니다.

Example

mapDraw.init2DCameraInfo();

# init3DCameraInfo()

3D 모드에서 카메라의 zoom, position, rotate를 초기화합니다. 만약 mapViewOption의 초기값에 zoom, center, northReference 값이 있다면 해당 값으로 초기화 됩니다.

Example

mapDraw.init3DCameraInfo();

# mapCordInfo() → {MapCordInfo}

지도좌표계를 매핑하기 위한 기본 정보를 제공합니다.

Returns:

지도좌표계에 대한 정보

Type: MapCordInfo

# mapPositionMoveCamera(x, y)

지도 좌표기준으로 카메라를 이동합니다.

Parameters:

Name	Type	Description
`x`	`number`	지도상의 x 좌표
`y`	`number`	지도상의 y 좌표

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#mapPositionMoveCamera

Example

mapDraw.mapPositionMoveCamera(x, y); // 지도 scene 좌표 x, y

# myLocationOff()

mapDraw.myLocationOff()메소드로 좌표에 표시된 아이콘을 삭제할 수 있습니다.

Example

mapDraw.myLocationOff();

# myLocationOn(x, y, z, onActiveopt, markerOptionopt)

내 위치 마커를 원하는 좌표에 표시할 수 있습니다.

Parameters:

Name	Type	Attributes	Default	Description
`x`	`number`		0	내위치 마커의 x 좌표
`y`	`number`		0	내위치 마커의 y 좌표
`z`	`number`		1	내위치 마커의 z 좌표. z좌표가 오브젝트보다 높아야 지도에 노출됨.
`onActive`	`boolean`	<optional>	false	타층 이동후 다시 돌아왔을 때 계속 표시 여부.
`markerOption`	`MarkerOption`	<optional>		내위치 마커의 옵션. 애니메이션과 사용자 지정 아이콘

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#myLocation

Examples

mapDraw.myLocationOn(x, y, z); // 층변경 후 함수 호출층 복귀시 다시 내위치 표시 안함.

mapDraw.myLocationOn(x, y, z, true); // 층변경 후 함수 호출층 복귀시 다시 내위치 표시함.

mapDraw.myLocationOn(x, y, z, false); // 층변경 후 함수 호출층 복귀시 다시 내위치 표시 안함.

// default 마커에 default animation 적용
mapDraw.myLocationOn(x, y, z, false, {
animate : true
});

// 마커 옵션 및 animation 옵션 적용
mapDraw.myLocationOn(x, y, z, false, {
    icon :  {
        image : "https://assets.dabeeomaps.com/image/ico/img_mylocation.png",
        size : {
            width:12, 
            height:12
        }
    },
    animate : {
        color : '#96c4e1',
        opacity : 0.8, // 초기 opacity ( 0 으로 animation 됨)
        desireScale : 3.0 // icon 대비 사이즈 배수
    }
});

# onHoverObjectEvent(color, opacity)

마우스 hover시 입력받은 color와 opacity로 해당 object의 색상을 변경합니다. 해제하기 위해서는 MapDraw.unHoverObjectEvent()를 호출합니다.

Parameters:

Name	Type	Description
`color`	`string`	object에 입힐 색상 코드
`opacity`	`number`	색상의 투명도

See:

실행 및 전체 코드 보기 https://developers.dabeeomaps.com/example/#mouseOver

Example

mapDraw.onHoverObjectEvent("#ff0000", 0.5);

# redrawMap(mapDrawOptions)

층을 변경하거나 테마를 변경하여 지도를 그릴 때 사용합니다.

Parameters:

Name	Type	Description
`mapDrawOptions`	`MapRedrawOption`

See:

층변경 실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#floor
테마변경 실행 및 전체 코드 보기 :https://dabeeo.github.io/web_api/example/#theme

Examples

mapDraw.redrawMap({floor: "FL-qhndqjlqhu7p3894"});

mapDraw.redrawMap({theme: 1919});

# setMarker(marker)

위치를 지정하여 마커를 한개 또는 여러개 표시할 수 있습니다. 각 마커에 원하는 아이콘을 각각 지정하여 줄 수 있습니다. 여러개의 마커를 지정하기 위하여 배열 형태로 인자를 받습니다.

Parameters:

Name	Type	Description
`marker`	`Array.<Marker>`

See:

실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#marker
tagInfo를 사용하는 예제 실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#markerTag

Example

mapDraw.setMarker({
    marker: [
        { 
            position:{
                x: 1000,
                y: 2000,
                z: 50
            },
            image: "img_marker_blue-3x.png", // 이미지 지정하지 않을 경우 기본 이미지로 표시
            size: { // size 가 없을 경우 지도 비율에 맞춰 이미지 사이즈가 정의
                width:20, 
                height: 20
            },
            data: i // marker를 클릭했을 때 반환할 정보 
            async: true // 마커의 사이즈를 줌배율에 따라 실시간 동기화(마커 크기 일정) : 지정하지 않을 경우 동기화 하지 않음(마커 크기 변동)
            tagInfo: tagInfo
        }
    ]
});

# setNavigationOption(options)

길찾기가 지도에 그려질 때 관련하여 옵션을 설정할 수 있습니다.

Parameters:

Name	Type	Description
`options`	`NavigationOption`

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#navigation

Example

mapDraw.setNavigationOption ({ 
    lineColor:"#0000ff", 
    lineSpotSize:3,
    lineSpotInterval:100,
    lineZ : 20,
    iconUrl: "./person.png",
    speedRate: 1.5,
    originPositionZ: 20,
    destinationPositionZ: 20,
    origin: { // 시작지 아이콘 
        iconUrl: "origin.png", 
        width: 100,
        height: 100
    },
    destination: { // 도착지 아이콘 
        iconUrl: "destination.png",
        width: 100,
        height: 100
    },
    visibleIcon: false,  // 경로 표시할때 시작지, 도착지 아이콘 없애기 / 보이기
    moveIconZ: 101
});

# setPoiLevelOff()

setPoiLevelOn() 설정을 해제합니다.

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#poiLevel

Example

mapDraw.setPoiLevelOff();

# setPoiLevelOn(top, middle, bottom)

poi 중요도에 따라 해당 poi를 노출하도록 zoom 값을 설정합니다. 설정한 줌값보다 지도가 확대되면 poi가 노출됩니다.

Parameters:

Name	Type	Description
`top`	`number`	poi 중요도 상에 해당하는 poi가 보이게 되는 시점의 zoom값
`middle`	`number`	poi 중요도 중에 해당하는 poi가 보이게 되는 시점의 zoom값
`bottom`	`number`	poi 중요도 하에 해당하는 poi가 보이게 되는 시점의 zoom값

See:

실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#poiLevel

Example

mapDraw.setPoiLevelOn(100, 200, 300);

# setPoiRotateDistance(spacing)

3d 모드에서 poi의 높이값을 설정합니다. . poi 객체의 높이값을 조정할 수 있습니다. 맵에 적용되어 있는 poi의 높이 값을 0으로 인식합니다.

Parameters:

Name	Type	Description
`spacing`	`number`	소숫점 2자리까지 반영

Example

mapDraw.setPoiRotateDistance(5.55);

# setPOITag(poiList)

POI 정보를 받아와 해당 poi에 유저가 만든 dom tag 생성합니다. 이 메소드를 사용하기 위해서는 MapView 생성시 isUseTag를 true로 설정해야 합니다. dom tag를 삭제하기 위해서는 mapDraw.deletePOITag(id)를 호출해야 합니다.

Parameters:

Name	Type	Description
`poiList`	`PoiTag` \| `Array.<PoiTag>`	tag를 추가할 poiList 또는 개별 poi

See:

https://developers.dabeeomaps.com/example/#poiTag

Example

poiTag= {
                 poiId: poi.id,
                 tagInfo: {
                     tag: dom2,
                     width: 170,
                     height: 70,
                     pos: "BOTTOM",
                     isResize: false
                   }
               }
               mapDraw.setPOITag(poiTagList);

# setTagBox(coordinate, tag, pos, width, height)

태그가 생성되거나 마우스 zoom 또는 이동시 tag size, rotate값 수정

Parameters:

Name	Type	Description
`coordinate`	`object`	vector값 생성할 좌표
`tag`	`HTMLElment`	user가 생성한 tag
`pos`	`string`	tag가 생성될 위치 {top \| bottom \| left \| right \| ''}
`width`	`string` \| `number`	tag width
`height`	`string` \| `number`	tag height

# startRouteAnimation(option)

길찾기 경로가 표시된 후 경로를 따라 모의주행을 그립니다. 경로를 따라가다가 층이 변경되는 경우 층 변경 전에 "floor-changed" event와 "will-floor-change" event가 발생합니다. 옵션 없이 사용할 수도 있고 옵션을 주어 모의주행에 관련된 설정을 할 수도 있습니다.

Parameters:

Name	Type	Description
`option`	`RouteAnimationOption`

See:

일반 모의주행 실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#navigation
줌과 애니메이션 옵션을 이용한 모의주행 실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#navigationObjectAnimation
지연시간 옵션을 이용하여 층간 이동을 알려주는 모의주행 실행 및 전체 코드 보기 : https://dabeeo.github.io/web_api/example/#navigationWillFloorChange

Examples

mapDraw.startRouteAnimation();

mapDraw.startRouteAnimation({zoom: 200});

mapDraw.startRouteAnimation({changeFloorDelay: 3000});

mapDraw.startRouteAnimation({
     destOption:{
              activeDest:true, 
              color:"#ff0000", 
              opacity:0.78, 
              isAnimate:true, 
              duration:1500, 
              isRepeat:true, 
              isYoyo:false,
              ids:["OB-jai102782n192", "PO-192nqpwbwyq0_12"]
     }});

# stopRouteAnimation()

현재 진행중인 모의주행을 멈출 수 있습니다.

Example

mapDraw.stopRouteAnimation();

# unHoverObjectEvent()

MapDraw.onHoverObjectEvent()로 실행한 hover event를 해제합니다

See:

실행 및 전체 코드 보기 https://developers.dabeeomaps.com/example/#mouseOver

Example

mapDraw.unHoverObjectEvent();

# updateObjectStateByIds(option)

특정 오브젝트의 속성을 변경하고 색상 애니메이션 효과를 줄 수 있습니다.

Parameters:

Name	Type	Description
`option`	`ObjectOption`

See:

실행 및 전체 코드 보기 https://dabeeo.github.io/web_api/example/#multiObjectsAnimation

Example

mapDraw.updateObjectStateByIds(
            {
                ids:[
                     "OB--QDxNdSuV2784",
                     "OB-qKLSARLpKQ1959",
                     "PO-qnwnwnwuwuw"
		            ], 
                color:"#efefef", 
                opacity:0.3, 
                isAnimate:true, 
                duration:1500, 
                isRepeat:true, 
                isYoyo:false
            }
        );

# zoomControl(zoomopt) → {number}

줌값을 설정하거나 현재의 줌값을 반환합니다.

Parameters:

Name	Type	Attributes	Description
`zoom`	`number`	<optional>	줌값을 설정. 지정하지 않을 경우 현재의 줌값을 반환

Returns:

현재의 줌설정값

Type: number

Examples

mapDraw.zoomControl(120);

mapDraw.zoomControl(); //현재 비율 리턴

# zoomIn()

지도를 확대합니다.

Example

mapDraw.zoomIn();

# zoomOff()

줌 기능을 마우스로 제어할 수 없도록 비활성화합니다.

Example

mapDraw.zoomOff();

# zoomOn()

줌 기능을 마우스로 제어할 수 있도록 활성화합니다.

Example

mapDraw.zoomOn();

# zoomOut()

지도를 축소합니다.

Example

mapDraw.zoomOut();

Classes

Members

# response

Properties:

Methods

# changeCamera(cameraOption)

Parameters:

Example

# changeLanguage(language)

Parameters:

Example

# changeShowPoi(poiOption)

Parameters:

Examples

# clearMarker()

Example

# controlDragLeft()

Example

# controlDragRight()

Example

# convert2img(optionopt)

Parameters:

Examples

# convertPosition(options) → {Position2d}

Parameters:

Example

# deletePOITag(id)

Parameters:

Example

# dispose() → {void}

Example

# getFloorName(floorId)

Parameters:

# getNavigation() → {Array.<RoutePath>}

Example

# getNaviInfoByRoute(origin, destination, waypointsopt) → {RouteInfoByTrans}

Parameters:

Example

# getRouteOff()

Example

# getRouteOn(origin, destination, typeopt, waypointsopt, retResponseopt) → {RouteInfo|number}

Parameters:

Examples

# init2DCameraInfo()

Example

# init3DCameraInfo()

Example

# mapCordInfo() → {MapCordInfo}

# mapPositionMoveCamera(x, y)

Parameters:

Example

# myLocationOff()

Example

# myLocationOn(x, y, z, onActiveopt, markerOptionopt)

Parameters:

Examples

# onHoverObjectEvent(color, opacity)

Parameters:

Example

# redrawMap(mapDrawOptions)

Parameters:

Examples

# setMarker(marker)

Parameters:

Example

# setNavigationOption(options)

Parameters:

Example

# setPoiLevelOff()

Example

# setPoiLevelOn(top, middle, bottom)

Parameters:

Example

# setPoiRotateDistance(spacing)

Parameters:

Example

# setPOITag(poiList)

Parameters:

Example

# setTagBox(coordinate, tag, pos, width, height)