KakaoMap

KakaoMap 표시하기

KakaoMap을 표시하기 위해서는 ViewInfoType중 MapviewInfo를 사용합니다. 엔진 초기화 및 시작 이후, 엔진이 렌더링 준비를 마치면 KMControllerDelegate를 통해 addViews를 호출합니다. 이 때 MapviewInfo를 통해 KakaoMap View를 생성할 수 있습니다. MapviewInfo에 지정할 수 있는 property는 다음과 같습니다.

func addViews() {
	let defaultPosition: MapPoint = MapPoint(longitude: 127.108678, latitude: 37.402001)
        
    // MapviewInfo생성.
    // viewName과 사용할 viewInfoName, defaultPosition과 level을 설정한다.
    let mapviewInfo: MapviewInfo = MapviewInfo(viewName: "mapview", viewInfoName: "map", defaultPosition: defaultPosition, defaultLevel: 7)
        
    // mapviewInfo를 파라미터로 mapController를 통해 생성한 뷰의 객체를 얻어온다.
    // 정상적으로 생성되면 MapControllerDelegate의 addViewSucceeded가 호출되고, 실패하면 addViewFailed가 호출된다.
    mapController?.addView(mapviewInfo)
}

//addView 성공 이벤트 delegate. 추가적으로 수행할 작업을 진행한다.
func addViewSucceeded(_ viewName: String, viewInfoName: String) {
    print("OK") //추가 성공. 성공시 추가적으로 수행할 작업을 진행한다.
}

//addView 실패 이벤트 delegate. 실패에 대한 오류 처리를 진행한다.
func addViewFailed(_ viewName: String, viewInfoName: String) {
    print("Failed")
}

레벨별 표시 정보

KakaoMap의 표시레벨은 0레벨부터 21레벨까지 존재합니다. 각 레벨별로 카메라가 지도를 바라보는 높이값이 계산됩니다. 단, View의 사이즈가 변할 경우 지도에 보여지는 영역이 달라지므로, 레벨별 카메라 높이값이 재계산되어 달라질 수 있습니다. 현재는 한반도가 보이는 레벨인 6레벨부터 지도가 표시되며, 최소 줌레벨도 6레벨로 제한되어 있습니다. 각 레벨별 표시하는 정보는 아래와 같습니다.

6	7	8	9

10	11	12	13

14	15	16	17

18	19	20	21

BaseMap변경 및 오버레이

KakaoMap은 기본적으로 2D 지도를 base map으로 사용하지만, skyview 혹은 지적편집도로 base map 변경이 가능합니다. 또한, baseMap 위에 교통정보 / 자전거도로 / 로드뷰 라인 등 다양한 종류의 오버레이를 표시할 수 있습니다. 이 부분에 대한 설명은 지도 구성 페이지를 참조하시기 바랍니다.

Zone Overlay

Zone은 다른 오버레이와 다르게 지도 화면이 특정 영억을 보여주게 될 때 추가 상세 정보를 활성화 할 수 있는 오버레이입니다. 예를 들어, “indoor” 오버레이를 활성화하면 지도 화면이 특정 영역(ex. 판교 현대백화점)을 보여줄 때 enterZone 이벤트가 발생하고 이벤트 파라미터로 해당 zone의 상세 정보 목록(ex. 현대 백화점의 층 목록)가 전달됩니다. API를 통해 목록 중 특정 항목(ex. 층 목록 중 특정 층)을 표시하도록 하면 zone의 상세 정보(ex. 판교 현대백화점 1층의 실내지도)를 표시할 수 있습니다.

Zone 영역 표시	Zone 상세 정보 표시

Margins

KakaoMap은 지도의 여백을 지정할 수 있습니다.

예를 들어, 위와 같이 화면 전체가 지도 표시 영역이었다가 UI가 지도 위로 올라올 경우, UI가 지도를 가리면서 지도의 중심점이 맞지 않을 수 있습니다.

이 경우, 아래 margin을 설정하면 지도의 중심점을 계산할 때 지도를 가린 UI 만큼은 제외하고 중심점을 계산할 수 있습니다.

카메라

카메라 이동 API, 관련 property를 이용해서 지도를 다양한 방법으로 표시할 수 있습니다. 자세한 설명은 Camera에서 참조할 수 있습니다.

지도 Objects

KakaoMapsSDK는 지도 위에 Label, Shape, Route, Gui 총 4가지 타입의 Object를 표시하는 기능을 제공합니다.

4가지 타입의 view object는 위와 같이 공통적으로 각 타입별 매니저를 통해 관리합니다. Layer단위로 object들을 grouping해서 일종의 폴더처럼 추가/삭제 등 관리할 수 있습니다. Layer를 생성하면 해당 Layer를 통해서 각 object들을 생성할 수 있습니다. 단, Gui는 SpriteLayer, InfoWindow 두 가지의 레이어만 존재하며 사용자가 임의로 추가하거나 제거할 수 없습니다.

렌더링 우선순위

사용자가 API를 통해 추가할 수 있는 Object는 Gui, Label, Route, Shape가 있으며 각 Object type별로 렌더링 순서는 Shape < Route < Label < Gui 이며 이 순서는 고정되어 있습니다. 즉, Label은 Gui위로 그려질 수 없습니다.

각 Object type별로 Layer가 존재하며, 같은 type으로 생성한 Layer는 zOrder 프로퍼티를 통해 렌더링 순서를 조절할 수 있습니다. 예를 들어, ShapeLayer를 여러개 만들어서 각 ShapeLayer별로 zOrder를 다르게 하여 렌더링 순서를 변경할 수 있습니다. 단, Object type별로 우선순위는 고정이 되어있으므로 ShapeLayer의 우선순위를 조정하더라도 다른 Layer(LabelLayer, RouteLayer 등)보다 위에 그려질 수 없습니다.

또한, 각 Layer안에 추가한 Object는 Layer 내에서 zOrder 프로퍼티를 통해 렌더링 우선순위를 조절할 수 있습니다.

Style

Gui를 제외한 사용자가 추가한 Object는 style로 object를 어떻게 표시할지 결정합니다. Style은 객체가 표시될 style을 세부적으로 설정하고, styleID를 부여하여 생성합니다. 이렇게 생성된 style은 각 객체마다 styleID를 통한 참조 형식으로 스타일을 결정하게 됩니다. 예를 들어, Poi를 생성할 때 단위 Poi마다 어떻게 표시될지 심볼을 정하는것이 아니라, 특정 심볼을 사용하는 스타일을 생성 후 Poi에 해당 스타일을 styleID를 통해 지정해주면, 내부적으로 해당 ID를 갖는 style을 참조하여 Poi가 그려집니다.

Style은 레벨별로 표출 스타일을 다르게 지정할 수 있습니다. 단위 스타일 데이터인 PerLevelStyle로 레벨 구간별로 표출 스타일을 구성해서, 하나의 style을 완성할 수 있습니다. 또한, 이러한 style을 여러개를 포함하는 styleSet을 구성할 수도 있습니다.

기본 Style은 위 그림처럼 PerLevelStyle로 구성할 수 있습니다. PerLevelStyle에는 해당 스타일이 표출되기 시작할 level값을 지정할 수 있습니다. 예를 들어, 위 그림처럼 PerLevelStyle을 0,5,15 세가지의 PerLevelStyle로 하나의 style을 구성했다면, 0-4레벨까지는 PerLevelStyle1로, 5-14까지는 PerLevelStyle2로, 15-21까지는 PerLevelStyle3로 표시됩니다. 만약 Style을 level값이 0인 PerLevelStyle 하나로만 구성하면 전 레벨에서 동일한 스타일로 표시할 수 있습니다.

StyleSet은 여러개의 Style로 구성됩니다. 여러개의 Style로 StyleSet을 구성해서, 인덱스로 특정 스타일을 사용하도록 접근할 수 있습니다. StyleSet은 Shape와 Route에서 사용됩니다.

기타 지도 옵션

빌딩 높이, 지도판의 Poi 크기, 언어 설정 등 기타 지도 옵션을 설정할 수 있습니다.

• 빌딩 높이 : 0~1사이의 Float값으로 지정하며, 값에 따라 지도를 기울였을 때 빌딩의 높이 값을 조절할 수 있습니다.

    let mapView = mapController?.getView("mapview") as? KakaoMap
    mapView?.buildingScale = 1.0

• 지도판 Poi 크기 : small부터 x-large까지 설정 가능하며, Poi의 글자 크기 및 심볼 크기를 조절할 수 있습니다.

    let mapView = mapController?.getView("mapview") as? KakaoMap
    mapView?.poiScale = .regular

• 언어 설정 : 한국어, 영어로 언어를 변경할 수 있습니다.

    let mapView = mapController?.getView("mapview") as? KakaoMap
    mapView?.setLanguage("en") // 영어로 언어 변경