도형

도형이란 지도 위에 그릴 수 있는 기하학적인 벡터 그래픽을 의미합니다. 도형의 종류로는 폴리곤, 폴리라인, 원 등이 있습니다. 도형을 지도 위에 그리는 방법을 설명합니다.

폴리곤

지도상에 다각형 모양의 면 형태로 표출되는 셰이프를 의미합니다.

추가 및 삭제

지도 위에 다각형을 추가하려면 InvPolygon 객체를 생성한 다음 반드시 coords 속성을 설정해주어야 합니다. coords 속성은 setCoords() 함수를 사용하거나, 폴리곤 객체 생성자를 통해 설정할 수 있습니다.

생성된 폴리곤 객체의 map 속성을 표출하고자 하는 지도 객체로 설정하면 폴리곤이 지도 위에 표출됩니다.

Kotlin

// 폴리곤의 좌표열
val myCoords = listOf(
    LatLng(37.40224, 127.11077),
    LatLng(37.40218, 127.10883),
    LatLng(37.40119, 127.10899),
    LatLng(37.40116, 127.11063)
)

// 지도 위에 폴리곤 추가
val polygon = InvPolygon().apply {
    coords = myCoords
    map = inaviMap
}

지도 위에 폴리곤을 추가한 모습

반대로 지도에서 폴리곤을 제거하려면 map 속성을 null로 설정하면 됩니다.

Kotlin

// 지도에서 폴리곤 제거
polygon.map = null

좌표열

coords 속성으로 폴리곤의 좌표열을 가져오거나 새로 설정할 수 있습니다. 좌표열 원소의 개수는 3 이상이어야 합니다. coords 속성을 설정하지 않았거나, 좌표열의 원소 개수가 3 미만이거나, 좌표열 중 null인 좌표가 존재할 경우 InvalidLatLngException이 발생합니다.

coords 속성을 설정하는데 사용한 객체 또는 이미 설정된 coords 속성 객체의 원소를 추가하거나 삭제하더라도 지도에 변경사항이 반영되지 않습니다. 반드시 coords 속성을 다시 설정해주어야 좌표열의 변경사항이 반영됩니다.

Kotlin

val myCoords2 = mutableListOf(
    LatLng(37.40224, 127.11077),
    LatLng(37.40218, 127.10883),
    LatLng(37.40119, 127.10899),
    LatLng(37.40116, 127.11063)
)

myCoords2.removeAt(myCoords2.size - 1) // 좌표열의 마지막 원소 삭제
polygon.coords = myCoords2 // coords 속성을 다시 설정해주어야 지도에 반영된다.

채우기 색상

fillColor 속성으로 폴리곤의 채우기 색상을 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 폴리곤의 채우기 색상을 노랑색으로 설정
polygon.fillColor = Color.YELLOW

폴리곤의 채우기 색상을 설정한 모습

테두리 두께 및 색상

strokeWidth 속성으로 폴리곤의 테두리 두께를, strokeColor 속성으로 테두리 색상을 각각 가져오거나 새로 설정할 수 있습니다.

Kotlin

polygon.strokeWidth = 5f // 폴리곤의 테두리 두께를 5px로 설정
polygon.strokeColor = Color.RED // 폴리곤의 테두리 두께를 빨간색으로 설정

폴리곤에 테두리 두께와 테두리 색상을 설정한 모습

폴리라인

지도상에 선 형태로 표출되는 셰이프를 의미합니다.

추가 및 삭제

지도 위에 선형을 추가하려면 InvPolyline 객체를 생성한 다음 반드시 coords 속성을 설정해주어야 합니다. coords 속성은 setCoords() 함수를 사용하거나, 폴리라인 객체 생성자를 통해 설정할 수 있습니다.

생성된 폴리라인 객체의 map 속성을 표출하고자 하는 지도 객체로 설정하면 폴리라인이 지도 위에 표출됩니다.

Kotlin

// 폴리라인의 좌표열
val myCoords = listOf(
  LatLng(37.40212, 127.10816),
  LatLng(37.40135, 127.10844),
  LatLng(37.40216, 127.10921),
  LatLng(37.40136, 127.11024),
  LatLng(37.40212, 127.11044)
)

// 지도 위에 폴리라인 추가
val polyline = InvPolyline().apply {
  coords = myCoords
  map = inaviMap
}

지도 위에 폴리라인을 추가한 모습

반대로 지도에서 폴리라인을 제거하려면 map 속성을 null로 설정하면 됩니다.

Kotlin

// 지도에서 폴리라인 제거
polyline.map = null

좌표열

coords 속성으로 폴리라인의 좌표열을 가져오거나 새로 설정할 수 있습니다. 좌표열 원소의 개수는 2 이상이어야 합니다. coords 속성을 설정하지 않았거나, 좌표열의 원소 개수가 2 미만이거나, 좌표열 중 null인 좌표가 존재할 경우 InvalidLatLngException이 발생합니다.

coords 속성을 설정하는데 사용한 객체 또는 이미 설정된 coords 속성을 가져와서 원소를 추가하거나 삭제하더라도 지도에 변경사항이 반영되지 않습니다. 반드시 coords 속성을 다시 설정해주어야 좌표열의 변경사항이 반영됩니다.

Kotlin

val myCoords2 = mutableListOf(
  LatLng(37.40212, 127.10816),
  LatLng(37.40135, 127.10844),
  LatLng(37.40216, 127.10921),
  LatLng(37.40136, 127.11024),
  LatLng(37.40212, 127.11044)
)

myCoords2.removeAt(myCoords2.size - 1) // 좌표열의 마지막 원소 삭제
polyline.coords = myCoords2 // coords 속성을 다시 설정해주어야 지도에 반영된다.

두께

width 속성으로 폴리라인의 두께를 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 폴리라인의 두께를 10px로 설정
polyline.width = 10

폴리라인에 두께를 설정한 모습

색상

color 속성으로 폴리라인의 색상을 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 폴리라인의 색상을 파랑색으로 설정
polyline.color = Color.BLUE

폴리라인에 색상을 설정한 모습

점선 패턴

pattern 속성으로 폴리라인의 점선 패턴을 가져오거나 새로 설정할 수 있습니다. setPattern() 함수 호출 시 파라미터의 개수는 반드시 2개 이상이어야 합니다. 홀수 번째 파라미터는 실선의 길이, 짝수 번째 파라미터는 공백의 길이를 의미하며, 설정한 파라미터의 개수만큼 실선과 공백이 반복되는 패턴이 적용됩니다.

Kotlin

// 폴리라인의 점선 패턴을 실선 20px, 공백 10px로 설정
polyline.setPattern(20, 10)

폴리라인에 점선 패턴을 설정한 모습

끝 지점 모양

capType 속성으로 폴리라인의 끝 지점 모양을 가져오거나 새로 설정할 수 있습니다. 끝 지점 모양의 유형은 InvPolyline.LineCap 열거형에 정의되어 있으며, 유형별 특징은 다음과 같습니다.

• Round: 끝 지점이 둥근 모양이 됩니다.

• Butt: 끝 지점이 좌표에 맞게 직각으로 잘립니다.

• Square: 끝 지점에 선 두께의 절반 만큼의 사각형이 추가됩니다.

Kotlin

// 폴리라인의 끝 지점 모양을 Round로 설정
polyline.capType = InvPolyline.LineCap.Round

연결점 모양

joinType 속성으로 폴리라인의 연결점 모양을 가져오거나 새로 설정할 수 있습니다. 연결점 모양의 유형은 InvPolyline.LineJoin 열거형에 정의되어 있으며, 유형별 특징은 다음과 같습니다.

• Bevel: 연결점에서 경사진 모양으로 그려집니다.

• Miter: 연결점이 뾰족하게 그려집니다.

• Round: 연결점이 원형으로 둥글게 그려집니다.

Kotlin

// 폴리라인의 연결점 모양을 Round로 설정
polyline.joinType = InvPolyline.LineJoin.Round

원

지도상에 원 모양의 면 형태로 표출되는 셰이프를 의미합니다.

추가 및 삭제

지도 위에 원을 추가하려면 InvCircle 객체를 생성한 다음 반드시 center 속성을 설정해주어야 합니다. center 속성은 setCenter() 함수를 사용하거나, 원 객체 생성자를 통해 설정할 수 있습니다.

생성된 원 객체의 map 속성을 표출하고자 하는 지도 객체로 설정하면 원이 지도 위에 표출됩니다.

Kotlin

// 지도 위에 반경 100m 원 추가
val circle = InvCircle().apply {
    center = LatLng(37.40224, 127.11077)
    radius = 100.0
    map = inaviMap
}

지도 위에 원을 추가한 모습

반대로 지도에서 원을 제거하려면 map 속성을 null로 설정하면 됩니다.

Kotlin

// 지도에서 원 제거
circle.map = null

중심점 좌표

center 속성으로 원의 중심점 좌표를 가져오거나 새로 설정할 수 있습니다. center 속성을 설정하지 않으면 InvalidLatLngException이 발생합니다. 이미 지도에 원이 그려지고 있는 상태에서 center 속성을 변경하면 변경된 좌표로 원이 이동합니다.

Kotlin

// 원의 중심점을 새로운 좌표로 설정
circle.center = LatLng(36.99473, 127.81832)

반경

radius 속성으로 원의 반경을 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 원의 반경을 50m로 설정
circle.radius = 50.0

원에 반경을 설정한 모습

채우기 색상

fillColor 속성으로 원의 채우기 색상을 가져오거나 새로 설정할 수 있습니다.

Kotlin

// 폴리곤의 채우기 색상을 노랑색으로 설정
circle.fillColor = Color.YELLOW

원에 채우기 색상을 설정한 모습

테두리 두께 및 색상

strokeWidth 속성으로 원의 테두리 두께를, strokeColor 속성으로 테두리 색상을 각각 가져오거나 새로 설정할 수 있습니다.

Kotlin

circle.strokeWidth = 5f // 원의 테두리 두께를 5px로 설정
circle.strokeColor = Color.RED // 원의 테두리 두께를 빨간색으로 설정

원에 테두리 두께와 테두리 색상을 설정한 모습