Maps JavaScript API의 스타일 참조 (original) (raw)

스타일 옵션으로 표준 Google 지도 스타일의 표현을 맞춤설정하고 도로, 공원, 비즈니스, 기타 관심 장소 같은 지형지물의 시각적 표시를 변경할 수 있습니다. 이러한 지형지물의 스타일을 변경할 뿐만 아니라 지형지물을 완전히 숨길 수도 있습니다. 즉, 지도의 특정 구성요소를 강조하거나 지도로 주변 페이지의 스타일을 보완할 수 있습니다.

예

다음 JSON 스타일 선언에서는 모든 지도 지형지물을 회색으로 바꾸고 간선도로 도형을 파란색으로 칠하며 풍경 라벨을 완전히 숨깁니다.

[ { "featureType": "all", "stylers": [ { "color": "#C0C0C0" } ] },{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#CCFFFF" } ] },{ "featureType": "landscape", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]

JSON 객체

JSON 스타일 선언은 다음 요소로 구성됩니다.

스타일을 지정하려면 featureType 및 elementType 선택기와stylers를 결합하여 하나의 스타일 배열로 만들어야 합니다. 모든 조합의 지형지물이 단일 배열에 배치될 수 있습니다. 그러나 동시에 적용할 수 있는 스타일 수는 제한됩니다. 스타일 배열이 최대 문자 수를 초과하면 스타일이 적용되지 않습니다.

이 페이지의 남은 부분에서는 지형지물, 요소 및 스타일러에 대해 추가로 설명합니다.

featureType

다음 JSON 스니펫은 지도상의 모든 도로를 선택합니다.

{ "featureType": "road" }

지형지물 또는 지형지물 유형은 지도상의 지리적 특성에 해당되며 여기에는 도로, 공원, 호수/바다, 비즈니스 등이 포함됩니다.

지형지물은 all을 루트로 사용하는 카테고리 트리를 형성합니다. 지형지물을 지정하지 않으면 모든 지형지물이 선택됩니다. 지형지물을 all로 지정하는 경우에도 동일한 효과가 나타납니다.

일부 지형지물에는 점(.) 표기법을 사용하여 지정하는 하위 지형지물이 포함됩니다. 예를 들면 landscape.natural 또는road.local입니다. 상위 지형지물만 지정하는 경우(예: road) 상위 요소에 지정한 스타일이 모든 하위 요소(예: road.local, road.highway)에 적용됩니다.

참고로, 상위 지형지물에는 모든 하위 지형지물에 포함되지 않은 요소가 일부 포함될 수도 있습니다.

사용할 수 있는 지형지물은 다음과 같습니다.

elementType

다음 JSON 스니펫에서는 모든 지역 도로에 대한 라벨을 선택합니다.

{ "featureType": "road.local", "elementType": "labels" }

요소는 한 지형지물의 세부 구획을 나타냅니다. 예를 들어 도로는 지도상의 그래픽 선 (도형)과 그 이름 (라벨)을 표시하는 텍스트로 구성됩니다.

다음과 같은 요소를 사용할 수 있으며 다만 특정 지형지물은 어떤 요소도 사용하지 않거나 일부 또는 모든 요소를 사용할 수도 있습니다.

라벨 텍스트 fill 및 stroke 색상은 확대/축소 수준에 따라 변경됩니다. 확대/축소 수준 전반에서 환경을 일관되게 유지하려면 항상 fill 및 stroke를 모두 정의하세요.

stylers

스타일러는 지도 지형지물 및 요소에 적용할 수 있는 서식 옵션입니다.

다음 JSON 스니펫은 RGB 값을 사용하여 지형지물을 밝은 녹색으로 표시합니다.

"stylers": [ { "color": "#99FF33" } ]

이 스니펫은 지형지물의 시작 색상에 상관없이 지형지물 색상에서 모든 강도를 삭제합니다. 그 효과는 지형지물을 회색조로 렌더링하는 것입니다.

"stylers": [ { "saturation": -100 } ]

이 스니펫은 지형지물을 완전히 숨깁니다.

"stylers": [
  { "visibility": "off" }
]

다음과 같은 스타일 옵션이 지원됩니다.

스타일 규칙은 지정된 순서대로 적용됩니다. 여러 작업을 단일 스타일 작업으로 병합하지 마십시오. 그 대신, 각 작업을 별도의 항목으로 스타일 배열에 정의하세요.

참고: 일부 작업은 교환 법칙이 적용되지 않으므로 순서가 중요합니다. 스타일 작업을 통해 수정되는 지형지물 및 요소들은 (대체로) 이미 기존 스타일이 있습니다. 기존 스타일이 있다면 해당 스타일에 작업이 진행됩니다.

색조, 채도, 밝기 모델

스타일 지도는 색조, 채도, 명도(HSL) 모델을 사용하여 스타일러 작업 내에 색상을 표시합니다. _색조_는 기본 색상을 나타내고 _채도_는 색상의 강도를 나타내며 _밝기_는 색상 구성요소 중 흰색 또는 검은색의 상대적인 양을 나타냅니다.

감마 보정은 색 공간에서 밝기를 수정하며 일반적으로 대비를 늘리거나 줄입니다. 또한 HSL 모델은 좌표 공간 내에 있는 색상을 정의합니다. 여기에서 hue는 색상환 내 방향을 나타내며 채도와 밝기는 서로 다른 축에 따른 진폭을 나타냅니다. 색조는 RGB 색 공간 내에서 측정되며 이 색 공간은 흑백의 명암이 없다는 점을 제외하고는 대부분의 RGB 색 공간과 유사합니다.

색조, 채도, 밝기 모델

hue는 HTML 16진수 색상 값을 취하기는 하지만 이 값은 기본 색상(즉, 색상환에서의 방향)을 결정하는 데만 사용되며 채도나 밝기는 결정하지 않습니다. 채도나 밝기는 백분율로 따로 표시됩니다.

예를 들어 순수 녹색의 색조를hue:0x00ff00 또는 hue:0x000100으로 정의할 수 있습니다. 두 색조는 동일합니다. 두 값은 HSL 색상 모델에서 순수 녹색을 가리킵니다.

RGB 색상환

균등한 부분의 빨강, 녹색 및 파랑으로 구성되는 RGB hue 값은 색조를 나타내지 않는데, 그 이유는 이러한 값이 HSL 좌표 공간에서 방향을 나타내지 않기 때문입니다. 예를 들면 '#000000'(검은색), '#FFFFFF'(흰색), 회색의 모든 순수 음영이 있습니다. 검은색, 흰색 또는 회색을 나타내려면 모든 saturation(값을 -100으로 설정)을 삭제하고 그 대신 lightness를 조정해야 합니다.

또한 이미 색 구성표가 있는 기존 지형지물을 수정할 때hue 등의 값을 변경해도 기존 saturation 또는 lightness는 변경되지 않습니다.