내부적으로 사용하는 옵션 타입

interface IMapOptions {
    ambientLight?: number;
    backgroundImage?: {
        visible?: boolean;
    };
    camera: CAMERA_TYPE;
    canvasSize?: {
        height: number;
        width: number;
    };
    controlOption: {
        pan?: {
            x?: number;
            y?: number;
            z?: number;
        };
        rotate?: number;
        skipValidation?: boolean;
        tilt?: number;
        zoom?: number;
    };
    dragDistance: number;
    enableGeoreferencing?: boolean;
    enableMouseMoveEvent?: boolean;
    enablePoiCollisionTest: boolean;
    enableTiling: boolean;
    floor: string;
    fontSizeRatio: number;
    framerate: number;
    graphicLibrary: GRAPHIC_LIBRARY;
    language: LANG_TYPE;
    mergeMesh: boolean;
    poiFitToObject?: boolean;
    poiFixFontsize: number;
    poiTextPadding: IPadding;
    relativeGeoreferencing?: boolean;
    showConnectedFloor: boolean;
    showPoi: boolean;
    showWaterMarker?: boolean;
    spriteEnable: boolean;
    spriteKeepRotation: boolean;
    theme: string;
    tilingOption: {
        thresholdLevel: number;
        treeDepth: number;
    };
    waterMarkPosition?: WATERMARK_TYPE;
    [index: string]: any;
}

Indexable

[index: string]: any

Properties

ambientLight?: number

ambient light의 밝기 설정

backgroundImage?: {
    visible?: boolean;
}

지도 background 설정입니다. 지도에 담겨있는 sampleImageUrl이 그려집니다.

Type declaration

  • Optional visible?: boolean

Default Value

{
visible: true
}
camera: CAMERA_TYPE

초기 카메라 모드 { '2d' || '3d' }

Default Value

'3d'
canvasSize?: {
    height: number;
    width: number;
}

지도를 표시할 Canvas의 크기를 명시적으로 지정합니다.

Type declaration

  • height: number
  • width: number

Default Value

{
width: 0,
height: 0
}
controlOption: {
    pan?: {
        x?: number;
        y?: number;
        z?: number;
    };
    rotate?: number;
    skipValidation?: boolean;
    tilt?: number;
    zoom?: number;
}

카메라 컨트롤 관련 zoom은 지도의 사이즈에 맞게 0 ~ 24 까지 zoomLevel값이 설정됩니다.

https://wiki.openstreetmap.org/wiki/Zoom_levels 위키에 있는 zoomLevel 설명참조

위키에 있는 줌 레벨은 0 ~ 20까지 이고, 다비오 맵에서는 0 ~ 24까지 줌레벨 설정이 가능합니다.

Type declaration

  • Optional pan?: {
        x?: number;
        y?: number;
        z?: number;
    }
    • Optional x?: number
    • Optional y?: number
    • Optional z?: number
  • Optional rotate?: number
  • Optional Internal skipValidation?: boolean

    Skip coordinate validation when setting camera position. Used internally when switching between 2D/3D modes to preserve exact camera position.

  • Optional tilt?: number
  • Optional zoom?: number

Default Value

{
zoom: 27.2, //지도 사이즈 전체를 보여주는 줌 레벨이 자동으로 default값으로 설정됩니다.
rotate: 0,
tilt: 0,
pan: {
x: undefined,
y: undefined,
},
}
dragDistance: number

touch click에 대한 감도 설정 (단위 : pixel)

enableGeoreferencing?: boolean

studio4 지도를 georeferencing된 지도로 그릴지 선택하는 옵션입니다. default 값은 true 입니다.

false 인 경우 지도가 editor 와 동일하게 그려집니다.

enableMouseMoveEvent?: boolean

mouse event 를 enable / disable 할 수 있는 옵션입니다. default 값은 false 입니다.

enableMouseMoveEvent 값에 영향을 받는 event list object: object-mouse-over, object-mouse-enter, object-mouse-leave, poi: poi-mouse-over, poi-mouse-enter, poi-mouse-leave,

enablePoiCollisionTest: boolean

Floating POI 의 Collision Test 기능 활성화 여부. default = true

enableTiling: boolean

줌레벨 및 타일링 기능 활성화 여부. 지도의 object 및 poi 요소를 타일 단위로 렌더링할 수 있는 최적화 모드를 활성화합니다.

default = false

floor: string

적용할 층 정보

Default Value

'default'
fontSizeRatio: number

poiFixFontsize 사용 시 outdoor 기준 indoor의 scale 비율 값. default = 1

framerate: number

애니메이션을 렌더링하는 framerate을 지정합니다. 최대 지원 가능 framerate 는 현재 디스플레이의 주사율과 동일합니다. default는 24입니다

Default Value

{
framerate: 24,
}
graphicLibrary: GRAPHIC_LIBRARY
language: LANG_TYPE

초기 POI 언어 설정. { 'ko' || 'en' }

Default Value

'ko'
mergeMesh: boolean

mergedMesh 활성화 여부

Default Value

'false'
poiFitToObject?: boolean

poi를 object size에 fit 하게 reposition 할지 선택하는 옵션입니다. default 값은 false 입니다.

false 인 경우 editor에서 그린대로 그려집니다. georeferencing 된 지도에서는 사용할 수 없습니다. true 인 경우 showMap 에서 설정한 controlOption.rotate 값에 영향을 받아 적용됩니다.

showMap 시 boothNo 는 항상 object를 감싸는 boundingBox 의 좌측상단에 고정됩니다. rotate 값은 90의 배수일 땐 object의 좌측상단에 boothNo 가 위치합니다. (ex. 0, 90, 180, 270)

poiFixFontsize: number

모든 sprite poi font size를 동일한 값으로 지정 할 수 있는 option (sticker 제외) 브라우저의 px 단위 (에디터의 font size랑 다름) default 값은 0 0 이상 일 경우, fontSizeRatio에 따라 outdoor 기준 indoor의 scale값 변경 가능 zoom과 상관 없이 동일하게 표현 됨

poiTextPadding: IPadding

poi text에 패딩을 부여합니다. vertical: top, bottom 에 적용할 padding (px 단위) horizontal: left, right 에 적용할 padding (px 단위)

Default Value

{
vertical: 0,
horizontal: 0,
}
relativeGeoreferencing?: boolean

Reflects coordinates relative to the current viewport.

showConnectedFloor: boolean

Enables or disables the connected floor feature. When set to true, floors that have entrance connections to the current floor will be displayed together. This option only works when enableGeoreferencing is false.

Default Value

false
showPoi: boolean

map상의 POI 보여줄지 말지 결정 여부. default = true

showWaterMarker?: boolean

워터 마크 보여줄지 여부. default = true

spriteEnable: boolean

POI,Marker,MyLocation,길찾기 마커 등을 항상 정면으로 보이게 함.

spriteKeepRotation: boolean

POI,Marker,MyLocation,길찾기 마커 등을 sprite로 그릴때 원래 각도 유지 여부

theme: string

적용할 테마 정보

Default Value

'default' //지도의 default 층이 설정됩니다
tilingOption: {
    thresholdLevel: number;
    treeDepth: number;
}

타일링 적용 시, 타일의 treeDepth 와 thresholdLevel 을 설정할 수 있습니다.

treeDepth 는 현재 줌레벨에 따라 렌더링할 타일의 단계를 결정하는 데 사용됩니다. thresholdLevel 은 현재 줌레벨과 무관하게 항상 보여주고 싶은 타일 레벨의 범위를 결정합니다.

예를 들어, threeDepth: 6, thresholdLevel: 3 으로 설정했다면, 타일을 총 여섯 단계의 depth 로 나눕니다. 이때, 각 단계마다 0, 1, 2, 3, 4, 5 의 타일 레벨이 할당됩니다. 이 중에서 thresholdLevel 까지의 타일 레벨이 할당된 타일들(0, 1, 2, 3)은 현재 줌레벨과 무관하게 항상 렌더링되고, thresholdLevel 보다 높은 타일 레벨들(4, 5)은 현재 줌레벨에 따라 타일링이 적용됩니다.

treeDepth 의 최솟값은 5, 최댓값은 10 로 제한됩니다. thresholdLevel 의 최솟값은 1, 최댓값은 현재 treeDepth 값으로 제한됩니다.

Type declaration

  • thresholdLevel: number
  • treeDepth: number

Default Value

{
treeDepth: 6,
thresholdLevel: 3
}
waterMarkPosition?: WATERMARK_TYPE

워터마크 위치. 'LEFT_TOP' | 'RIGHT_TOP' | 'LEFT_BOTTOM' | 'RIGHT_BOTTOM' 중 하나의 값을 가짐. default는 'LEFT_BOTTOM'