Class SymbolStyle

PointLayer 또는 LineLayer 생성 시 style로 설정할 수 있는 SymbolStyle입니다.
point 또는 line을 따라 아이콘 및 텍스트 라벨을 렌더링할 수 있으며, 벡터 타일 피쳐에 대한 라벨의 style을 구성할 수 있습니다.

Example

new ktGms.style.SymbolStyle(
// SymbolStylePaint
{
     'icon-opacity' : 0.9,
     'text-color': '#3e3eee',
     'text-opacity': 0.5,
},
// SymbolStyleLayout
{
     'icon-image': 'cat',
     'visibility': "visible",
     'icon-size': 0.2,
     'text-field' : 'cat',
     'icon-rotate': 10,
},
//이미지 url
     'ktlogo url' 
)

See

Hierarchy

  • SymbolStyle

Constructors

constructor

Properties

paint? layout? url?

Methods

getLayout getPaint

Constructors

constructor

  • Parameters

    • Optional paint: SymbolStylePaint

      SymbolStyle의 paint 속성입니다.

    • Optional layout: SymbolStyleLayout

      SymbolStyle의 layout 속성입니다.

    • Optional url: string

      심볼 아이콘으로 사용할 이미지 url입니다. addImage로 이미지를 추가하지 않더라도 SymbolStyle.url로 이미지를 설정할 수 있습니다.

    Returns SymbolStyle

Properties

Optional paint

paint?: SymbolStylePaint

SymbolStyle의 paint 속성입니다.

Optional layout

layout?: SymbolStyleLayout

SymbolStyle의 layout 속성입니다.

Optional url

url?: string

심볼 아이콘으로 사용할 이미지 url입니다. addImage로 이미지를 추가하지 않더라도 SymbolStyle.url로 이미지를 설정할 수 있습니다.

Methods

getLayout

  • Returns {
        icon-allow-overlap?: boolean;
        icon-anchor?: anchor_type;
        icon-ignore-placement?: boolean;
        icon-image?: string;
        icon-sdf?: boolean;
        icon-keep-upright?: boolean;
        icon-offset?: any;
        icon-optional?: boolean;
        icon-overlap?: "never" | "always" | "cooperative";
        icon-padding?: any;
        icon-pitch-alignment?: icon_alignment_type;
        icon-rotate?: any;
        icon-rotation-alignment?: icon_alignment_type;
        icon-size?: any;
        icon-text-fit?: "none" | "width" | "height" | "both";
        icon-text-fit-padding?: any;
        symbol-avoid-edges?: boolean;
        symbol-placement?: "line" | "point" | "line-center";
        symbol-sort-key?: number;
        symbol-spacing?: any;
        symbol-z-order?: "auto" | "viewport-y" | "source";
        text-allow-overlap?: boolean;
        text-anchor?: anchor_type;
        text-field?: any;
        text-font?: string | string[];
        text-ignore-placement?: boolean;
        text-justify?: "center" | "left" | "right" | "auto";
        text-keep-upright?: boolean;
        text-letter-spacing?: any;
        text-line-height?: any;
        text-max-angle?: any;
        text-max-width?: any;
        text-offset?: any;
        text-optional?: boolean;
        text-overlap?: "never" | "always" | "cooperative";
        text-pitch-alignment?: icon_alignment_type;
        text-rotate?: number;
        text-rotation-alignment?: "map" | "viewport" | "auto" | "viewport-glyph";
        text-size?: any;
        text-transform?: "none" | "uppercase" | "lowercase";
        text-writing-mode?: ("horizontal" | "vertical")[];
        visibility?: visibility_type;
    }

    • Optional icon-allow-overlap?: boolean

      true이면 이전에 그려진 다른 기호와 충돌하더라도 표시됩니다.
      icon-overlap이 있으면 비활성화됩니다.

      Default

      false

    • Optional icon-anchor?: anchor_type

      심볼 아이콘을 기준으로 중심 좌표를 둘 위치입니다. 예를 들어 "icon-anchor":"bottom"이라면, 중심 좌표가 아래에 위치하기 때문에, 심볼 아이콘은 위쪽에 표시됩니다.
      옵션은 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' 및 'bottom-right' 입니다.
      icon-image가 있어야 활성화됩니다.

      Default

      center

    • Optional icon-ignore-placement?: boolean

      true인 경우 해당 심볼 아이콘과 다른 기호가 충돌하더라도 표시됩니다.

      Default

      false

    • Optional icon-image?: string

      심볼 아이콘의 배경으로 사용할 이미지입니다.
      addImage로 추가한 이미지 id를 값으로 사용할 수 있으며, 이미지가 symbol의 배경으로 나타납니다.
      url를 통하여 이미지를 설정할 수도 있습니다.

    • Optional icon-sdf?: boolean

      심볼 아이콘의 배경으로 사용할 이미지에 대한 sdf(Signed Distance Field)모드 여부입니다.
      심볼 스타일로 이미지 설정하고 "icon-sdf":true로 설정 후 SymbolStyle.icon-color 변경 하면 이미지 모양대로 심볼의 색상이 변경됩니다.

      Example

      new ktGms.style.SymbolStyle(
      {
           "icon-opacity" : 0.9, //아이콘 투명도
      }, 
      {
           "visibility": "visible",
           "icon-size": 0.2, //아이콘 크기
           "icon-sdf": true
      },
      //symbol icon url
      "https://map.gis.kt.com/mapsdk/images/cat.png" );

      Default

      false

    • Optional icon-keep-upright?: boolean

      true인 경우 심볼 아이콘이 거꾸로 뒤집혀지지 않도록 방지합니다.
      icon-image 값이 있고, icon-rotation-alignment가 map이고, symbol-placement가 line 또는 line-center일 때 활성화됩니다.

      Default

      false

    • Optional icon-offset?: any

      앵커에서 심볼 아이콘까지의 오프셋 거리입니다. [0,0] 형식으로 설정할 수 있고, [x거리, y거리]입니다. 음수는 왼쪽과 위쪽을 나타냅니다.
      각 구성 요소에 icon-size 값을 곱하여 최종 오프셋(픽셀)을 얻습니다. 또한, icon-rotate와 결합하면 오프셋은 회전된 방향이 위로 이동한 것과 같습니다.
      icon-image가 있어야 활성화됩니다.

      Default

      [0,0]

    • Optional icon-optional?: boolean

      true이면 심볼 아이콘이 다른 기호와 충돌하고 텍스트가 충돌하지 않을 때, 해당 심볼 아이콘 없이 텍스트가 표시됩니다.
      icon-image와 text-field가 있어야 활성화됩니다.

      Default

      false

    • Optional icon-overlap?: "never" | "always" | "cooperative"

      다른 심볼과 겹칠 때 심볼 아이콘 표시 유무입니다.

      • never : 이전에 그려진 다른 심볼와 겹치면 현재 심볼 아이콘이 숨겨집니다.
      • always : 이전에 그려진 다른 심볼와 겹치더라도 현재 심볼 아이콘이 표시됩니다.
      • cooperative : 이전에 그려진 다른 심볼과 겹치는 경우, 해당 심볼에 대한 오버랩 모드가 확인됩니다. 이전 심볼이 never모드를 사용하면 현재 심볼이 숨겨집니다. 이전 심볼이 always 또는 cooperative 모드를 사용하면 현재 심볼이 표시됩니다.

      icon-image가 있어야 활성화됩니다.
      만약 icon-overlap이 없다면, icon-allow-overlap이 대신 사용됩니다.

    • Optional icon-padding?: any

      심볼 충돌을 감지하는데에 사용되는 심볼 아이콘 주변 영역 크기입니다.(픽셀 단위)
      icon-image가 있어야 활성화됩니다.

      css margin 문법과 동일하게 적용됩니다.

      • [0] 형식으로 설정할 수 있고, [위/아래/왼쪽/오른쪽]에 패딩값이 적용됩니다.
      • [0,0] 형식으로 설정할 수 있고, [위/아래, 왼쪽/오른쪽]에 패딩값이 적용됩니다.
      • [0,0,0] 형식으로 설정할 수 있고, [위, 왼쪽/오른쪽, 아래]에 패딩값이 적용됩니다.
      • [0,0,0,0] 형식으로 설정할 수 있고, [위, 오른쪽, 아래, 왼쪽]에 패딩값이 적용됩니다.
    • Optional icon-pitch-alignment?: icon_alignment_type

      지도를 피치할 때 심볼 아이콘의 방향입니다.

      • map : 지도와 평행하게 심볼 아이콘의 pitch가 변경됩니다.
      • viewport : viewport와 평행하게 pitch가 변경됩니다.
      • auto : icon-rotation-alignment와 동일한 방향 값을 사용합니다.

      icon-image가 있어야 활성화됩니다.

      Default

      auto

    • Optional icon-rotate?: any

      심볼 아이콘을 시계 방향으로 회전합니다. (도 단위)
      icon-image가 있어야 활성화됩니다.

      Default

      0
    • Optional icon-rotation-alignment?: icon_alignment_type

      symbol-placement와 함께 심볼 아이콘의 회전 동작을 설정할 수 있습니다.

      • map : symbol-placement = point이면 심볼 아이콘을 동-서로 정렬합니다. symbol-placement = line | line-center이면 심볼 아이콘의 x축을 라인에 맞게 정렬합니다.
      • viewport : symbol-placement 값과 관계없이 뷰포트의 x축과 맞도록 심볼 아이콘을 정럴합니다.
      • auto : symbol-placement = point이면 viewport로 설정이 되고, symbol-placement = line | line-center이면 map으로 설정됩니다.

      icon-image가 있어야 활성화됩니다.

      Default

      auto

    • Optional icon-size?: any

      심볼 아이콘의 크기입니다. 1은 원래 크기이고, 3은 icon-image 크기의 3배입니다.
      icon-image가 있어야 활성화됩니다.

      Default

      1
    • Optional icon-text-fit?: "none" | "width" | "height" | "both"

      텍스트에 맞도록 심볼 아이콘의 크기를 조정합니다.

      • none : 심볼 아이콘 기존 크기 비율대로 표시됩니다.
      • width : 텍스트 너비에 맞게 x차원으로 심볼 아이콘의 크기가 조정됩니다.
      • height : 텍스트 높이에 맞게 y차원으로 심볼 아이콘의 크기가 조정됩니다.
      • both : x차원과 y차원 모두 조정됩니다.
        icon-image와 text-field가 있어야 활성화됩니다.

      Default

      none

    • Optional icon-text-fit-padding?: any

      icon-text-fit으로 결정된 크기에 추가되는 padding 크기입니다. (픽셀 단위)
      [0,0,0,0] 형식으로 설정할 수 있으며, [위, 오른쪽, 아래, 왼쪽] 형식입니다.

      icon-image와 text-field가 있어야 활성화됩니다.
      icon-text-fit이 both 또는 width 또는 height여야 활성화됩니다.

      Default

      [0,0,0,0]

    • Optional symbol-avoid-edges?: boolean

      true인 경우 심볼 아이콘은 충돌을 해결하기 위해 타일 가장자리를 교차하지 않습니다.
      벡터 타일에 충분한 패딩이 없는 레이어이거나, 라인 심볼 레이어 뒤에 배치된 포인트 심볼 레이어인 경우로 true를 권장합니다.

      Default

      false

    • Optional symbol-placement?: "line" | "point" | "line-center"

      geometry를 기준으로 한 Label 배치 방식입니다.

      • point : geometry가 위치한 포인트 위에 배치됩니다.
      • line : geometry의 라인을 따라 배치됩니다. geometry가 LineString이거나 Polygon일 때만 사용할 수 있습니다. LineLayer 위에 라인을 따라 심볼 라벨이 표시됩니다. SymbolStyleLayout의 symbol-spacing 간격으로 심볼이 반복적으로 표시됩니다.
      • line-center : geometry의 라인의 중앙에 배치됩니다. geometry가 LineString이거나 Polygon일 때만 사용할 수 있습니다. 벡터 타일의 단일 피쳐에는 여러 개의 라인 지오메트리가 포함될 수 있습니다.

      Default

      point

    • Optional symbol-sort-key?: number

      피쳐를 정렬하기 위한 key입니다.
      key 값이 작은 피쳐가 먼저 그려지고 배치됩니다.
      icon-allow-overlap 또는 text-allow-overlap이 false인 경우, 해당 key값이 낮은 피쳐가 배치에서 우선 순위를 가집니다.
      icon-allow-overlap 또는 text-allow-overlap이 true인 경우, 해당 key값이 높은 피쳐가 배치에서 우선 순위를 가집니다.

    • Optional symbol-spacing?: any

      두 심볼 앵커 사이의 거리입니다. (픽셀 단위)
      symbol-placement가 line이어야 활성화됩니다.

      Default

      250

    • Optional symbol-z-order?: "auto" | "viewport-y" | "source"

      동일한 레이어 내의 중첩된 심볼이 나타나는 순서를 정합니다.

      • auto : symbol-sort-key를 기준으로 심볼을 정렬합니다. key값 설정이 없고, icon-allow-overlap = true 또는 text-allow-overlap = true 또는 icon-ignore-placement = false 또는 text-ignore-placement = false이면 심볼을 뷰포트의 y축을 기준으로 심볼을 정렬합니다.
      • viewport-y : icon-allow-overlap = true 또는 text-allow-overlap = true 또는 icon-ignore-placement = false 또는 text-ignore-placement = false이면 심볼을 뷰포트의 y축을 기준으로 심볼을 정렬합니다.
      • source : symbol-sort-key를 기준으로 심볼을 정렬합니다. key값 설정이 없다면 정렬이 적용되지 않으며, 소스 데이터와 동일한 순서로 심볼이 렌더링됩니다.

      Default

      auto

    • Optional text-allow-overlap?: boolean

      true인 경우 이전에 그려진 다른 기호와 충돌하더라도 텍스트가 표시됩니다.
      text-field가 있어야 활성화됩니다.

      Default

      false

    • Optional text-anchor?: anchor_type

      텍스트를 기준으로 심볼 중심 위치를 둘 위치입니다. "text-anchor":"top"으로 설정했다면, 심볼 라벨은 아래쪽에 위치하고, 라벨의 top쪽에 심볼 중심이 위치합니다.
      유효한 옵션은 center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right입니다.
      text-field가 있어야 활성화됩니다.
      text-variable-anchor가 있으면 비활성화됩니다.

      Default

      center

    • Optional text-field?: any

      심볼 텍스트 라벨로 사용할 텍스트입니다.

      Default

      ""
    • Optional text-font?: string | string[]

      심볼 텍스트 라벨의 폰트입니다. 현재는 나눔고딕만 사용 가능합니다.
      text-field가 있어야 활성화됩니다.

      Default

      KTfontMedium

    • Optional text-ignore-placement?: boolean

      true인 경우 해당 텍스트와 다른 기호가 충돌하더라도 텍스트가 표시됩니다.
      text-field가 있어야 활성화됩니다.

      Default

      false

    • Optional text-justify?: "center" | "left" | "right" | "auto"

      텍스트를 둘 위치입니다.
      text-field가 있어야 활성화됩니다.

      • auto : 텍스트는 앵커 위치를 향해 정렬됩니다.
      • left : 텍스트가 왼쪽 정렬됩니다.
      • center : 텍스트가 중앙에 위치합니다.
      • right : 텍스트가 오른쪽 정렬됩니다.

      Default

      center

    • Optional text-keep-upright?: boolean

      true인 경우 텍스트가 거꾸로 렌더링되지 않도록 텍스트를 세로로 뒤집을 수 있습니다.
      text-field가 있어야 활성화됩니다.
      text-rotation-alignment가 map이고, symbol-placement가 line 또는 line-center여야 활성화됩니다.

      Default

      true

    • Optional text-letter-spacing?: any

      텍스트 문자 간격입니다. (ems 단위)
      text-field가 있어야 활성화됩니다.

      Default

      0

    • Optional text-line-height?: any

      텍스트가 여러 줄일때, 텍스트 라인의 높이입니다. (ems 단위)
      text-field가 있어야 활성화됩니다.

      Default

      1.2

    • Optional text-max-angle?: any

      텍스트 사이의 최대 각도입니다. (도 단위)
      text-field가 있어야 활성화됩니다.
      symbol-placement가 line 또는 line-center여야 활성화됩니다.

      Default

      45

    • Optional text-max-width?: any

      텍스트의 최대 너비입니다. (ems 단위)
      text-field가 있어야 활성화됩니다.

      Default

      10

    • Optional text-offset?: any

      심볼 중심으로부터 텍스트의 오프셋 거리입니다. (ems 단위)
      [0,0] 형식으로 설정할 수 있고, [x거리, y거리]입니다. 음수는 왼쪽과 위쪽을 나타냅니다.
      text-field가 있어야 활성화됩니다.

      Default

      [0,0]

    • Optional text-optional?: boolean

      true이면 텍스트가 다른 기호와 충돌하고 심볼 아이콘과 충돌하지 않을 때, 해당 텍스트 없이 심볼 아이콘만 표시됩니다.
      text-field와 icon-image가 있어야 활성화됩니다.

      Default

      false

    • Optional text-overlap?: "never" | "always" | "cooperative"

      텍스트가 다른 기호와 겹칠 때 표시할지에 대한 여부를 설정합니다. text-overlap이 설정되지 않은 경우, text-allow-overlap이 대신 사용됩니다.

      • never : 이전에 그려진 다른 심볼와 겹치면 현재 텍스트가 숨겨집니다.
      • always : 이전에 그려진 다른 심볼와 겹치더라도 현재 텍스트가 표시됩니다.
      • cooperative : 이전에 그려진 다른 심볼과 겹치는 경우, 해당 심볼에 대한 오버랩 모드가 확인됩니다. 이전 심볼이 never모드를 사용하면 현재 텍스트가 숨겨집니다. 이전 심볼이 always 또는 cooperative 모드를 사용하면 현재 텍스트가 표시됩니다.

      text-field가 있어야 활성화됩니다.

    • Optional text-pitch-alignment?: icon_alignment_type

      지도를 피치할 때 텍스트의 방향입니다.

      • map : 지도와 평행하게 텍스트의 pitch가 변경됩니다.
      • viewport : viewport와 평행하게 pitch가 변경됩니다.
      • auto : icon-rotation-alignment와 동일한 방향 값을 사용합니다.

      text-field가 있어야 활성화됩니다.

      Default

      auto

    • Optional text-rotate?: number

      텍스트를 시계 방향으로 회전할 각도입니다. (도 단위)
      text-field가 있어야 활성화됩니다.

      Default

      0

    • Optional text-rotation-alignment?: "map" | "viewport" | "auto" | "viewport-glyph"

      symbol-placement와 함께 텍스트를 구성하는 개별 글리프의 회전 동작을 설정할 수 있습니다.

      • map : symbol-placement = point이면 텍스트를 동-서로 정렬합니다. symbol-placement = line | line-center이면 텍스트의 x축을 라인에 맞게 정렬합니다.
      • viewport : symbol-placement 값과 관계없이 뷰포트의 x축과 맞도록 텍스트를 정럴합니다.
      • viewport-glyph : symbol-placement = point이면 텍스트를 뷰포트의 x축에 정렬하고, symbol-placement = line | line-center이면 글리프를 뷰포트의 x축에 정렬하고 라인을 따라 배치합니다.
      • auto : symbol-placement = point이면 viewport로 설정이 되고, symbol-placement = line | line-center이면 map으로 설정됩니다.

      text-field가 있어야 활성화됩니다.

      Default

      auto

    • Optional text-size?: any

      텍스트 크기입니다. (픽셀 단위)
      text-field가 있어야 활성화됩니다.

      Default

      16

    • Optional text-transform?: "none" | "uppercase" | "lowercase"

      텍스트 대문자화 방법을 설정합니다.
      text-field가 있어야 활성화됩니다.

      • none : 텍스트가 변경되지 않습니다.
      • uppercase : 모든 텍스트를 대문자로 표시합니다.
      • lowercase : 모든 텍스트를 소문자로 표시합니다.

      Default

      none

    • Optional text-writing-mode?: ("horizontal" | "vertical")[]

      텍스트 방향을 설정합니다.
      text-field가 있고, symbol-placement가 point여야 활성화됩니다.

      • horizontal : 텍스트를 수평으로 배치합니다.
      • vertical : 텍스트를 수직으로 배치합니다.

      Example

       "text-writing-mode": ['vertical'] //수직으로 텍스트 배치
    • Optional visibility?: visibility_type

      레이어 표시 여부입니다.

      • visible : 레이어를 표시합니다.
      • none : 레이어를 표시하지 않습니다.

      Default

      "visible"

getPaint

  • Returns {
        icon-color?: any;
        icon-halo-blur?: any;
        icon-halo-color?: any;
        icon-halo-width?: any;
        icon-opacity?: any;
        icon-translate?: any;
        icon-translate-anchor?: "map" | "viewport";
        text-color?: any;
        text-halo-blur?: any;
        text-halo-color?: any;
        text-halo-width?: any;
        text-opacity?: any;
        text-translate?: any;
        text-translate-anchor?: "map" | "viewport";
    }

    • Optional icon-color?: any

      심볼 아이콘의 색상입니다. sdf 형식의 아이콘에서만 사용할 수 있습니다.

      Default

      #000000

    • Optional icon-halo-blur?: any

      아이콘 후광을 바깥쪽으로 페이드 아웃 합니다.
      icon-image가 있어야 활성화욉니다.

      Default

      0
    • Optional icon-halo-color?: any

      아이콘 후광의 색상입니다. 아이콘 후광은 sdf 형식의 아이콘에서만 사용할 수 있습니다.

      Default

      rgba(0,0,0,0)

    • Optional icon-halo-width?: any

      후광에서 아이콘 외곽선까지의 거리입니다.
      icon-image가 있어야 활성화됩니다.

      Default

      0
    • Optional icon-opacity?: any

      심볼 아이콘의 불투명도입니다. 0과 1 사이의 값이 적용되며 0과 가까울수록 투명하고, 1과 가까울수록 불투명합니다.
      icon-image가 있어야 활성화됩니다.

      Default

      1
    • Optional icon-translate?: any

      심볼 아이콘의 오프셋입니다.
      [0,0] 형식으로 설정할 수 있고, [x거리, y거리]입니다. 음수는 왼쪽과 위쪽을 나타냅니다
      icon-image가 있어야 활성화됩니다.

      Default

      [0,0]

    • Optional icon-translate-anchor?: "map" | "viewport"

      icon-translate의 프레임을 제어하며, icon-translate와 icon-image 값이 있어야 활성화됩니다.

      • map : icon-translate를 map 기준으로 변환합니다.
      • viewport : icon-translate를 viewport 기준으로 변환합니다.

      Default

      map

    • Optional text-color?: any

      심볼 텍스트의 색상입니다.
      text-field가 있어야 활성화됩니다.

      Default

      #000000

    • Optional text-halo-blur?: any

      심볼 텍스트 바깥쪽을 향항 후광의 페이드아웃 거리입니다. (픽셀 단위)
      text-field가 있어야 활성화됩니다.

      Default

      0

    • Optional text-halo-color?: any

      심볼 텍스트 후광의 색상입니다.
      text-field가 있어야 활성화됩니다.

      Default

      rgba(0,0,0,0)

    • Optional text-halo-width?: any

      심볼 텍스트 후광의 너비입니다.(픽셀 단위)
      글꼴 외곽선에서 후광까지의 거리를 나타내며, 최대 너비는 글꼴 크기의 1/4입니다.
      text-field가 있어야 활성화됩니다.

      Default

      0

    • Optional text-opacity?: any

      심볼 텍스트의 투명도입니다. 0과 1 사이의 값이 적용되며 0과 가까울수록 투명하고, 1과 가까울수록 불투명합니다.
      text-field가 있어야 활성화됩니다.

      Default

      1

    • Optional text-translate?: any

      텍스트의 오프셋입니다. (픽셀 단위)
      [0,0] 형식으로 설정할 수 있고, [x거리, y거리]입니다. 음수는 왼쪽과 위쪽을 나타냅니다
      text-field가 있어야 활성화됩니다.

      Default

      [0,0]

    • Optional text-translate-anchor?: "map" | "viewport"

      text-translate의 프레임을 제어하며, text-translate와 text-field의 값이 있어야 활성화됩니다.

      • map : text-translate를 map 기준으로 변환합니다.
      • viewport : text-translate를 viewport 기준으로 변환합니다.

      Default

      map

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc