맵에 LineString, MultiLineString을 그리기 위한 레이어입니다.
line을 따라 화살표 같은 것을 표현 하거나, 도로라인에 중앙선을 이미지로 표현 할때, 특히 라인을 따라서 텍스트를 일정 간격으로 표현할때(예, 도로에 도로명)

[LineSymbolicLayer 생성 방법]
레이어를 생성하고 addTo 함수를 사용하여 맵에 레이어를 추가할 수 있습니다.

Example

const style= new ktGms.style.SymbolStyle(
{
"text-color": "#007cbf",
"text-halo-color": "#007cbf",
"text-halo-width": 0.5
}, {

visibility: 'visible',
"text-field": "<",
"text-size": 12,
"text-rotation-alignment": "map",
"symbol-placement": "line"
"symbol-spacing": 180
});
const source = new ktGms.source.GeoJSONSource("route", {data: "https://map.gis.kt.com/mapsdk/data/lineData.geojson"});
new ktGms.layer.LineSymbolicLayer('lineLayer', style, source).addTo(map);

See

LineSymbolicLayer and VectorSource Map에 LineSymbolicLayer와 VectorSource를 추가하는 예제

Hierarchy

Constructors

  • LineSymbolicLayer class의 생성자입니다.

    Parameters

    • id: string

      생성할 레이어의 id입니다.

    • style: SymbolStyle

      레이어에 그릴 feature의 스타일입니다.

    • source: string | VectorSource | GeoJSONSource | LineString | MultiLineString | LineString[] | MultiLineString[]

      그릴 line의 source입니다.
      이전에 선언된 source의 id를 string로 파라미터로 전달하거나, GeoJSONSource, VectorSource, LineString, LineString[], MultiLineString, MultiLineString[] 객체를 파라미터로 사용할 수 있습니다.

    • Optional sourceLayer: string

      VectorSource는 mvt포맷입니다. VectorSource에는 여러 Layer가 존재합니다. 해당 LineSymbolicLayer에 표출될 Layer의 명을 입력합니다.
      존재하지 않으면 VectorSource에 defaultLayer 속성이 있다면 그것을 사용하지만 이 프로퍼티가 더 우선순위가 높습니다.

    • Optional layerInfo: LayerInfo

      레이어에 필터 옵션을 추가해 feature를 제어하거나 표출되는 레이어의 zoom level 범위를 제한할 수 있습니다.

    Returns LineSymbolicLayer

Properties

sourceId?: string

레이어에 추가할 소스의 id

id: string

생성할 레이어의 id입니다.

레이어에 그릴 feature의 스타일입니다.

그릴 line의 source입니다.
이전에 선언된 source의 id를 string로 파라미터로 전달하거나, GeoJSONSource, VectorSource, LineString, LineString[], MultiLineString, MultiLineString[] 객체를 파라미터로 사용할 수 있습니다.

sourceLayer?: string

VectorSource는 mvt포맷입니다. VectorSource에는 여러 Layer가 존재합니다. 해당 LineSymbolicLayer에 표출될 Layer의 명을 입력합니다.
존재하지 않으면 VectorSource에 defaultLayer 속성이 있다면 그것을 사용하지만 이 프로퍼티가 더 우선순위가 높습니다.

layerInfo?: LayerInfo

레이어에 필터 옵션을 추가해 feature를 제어하거나 표출되는 레이어의 zoom level 범위를 제한할 수 있습니다.

Methods

  • 레이어의 페인트 속성값을 설정합니다.

    Parameters

    • property: string

      설정할 페인트 속성의 이름입니다.

    • value: any

      설정할 페인트 속성의 값입니다.

    Returns void

    Example

    Layer.setPaintProperty('fill-color', '#faafee');
    

    See

    PolygonLayer and GeoJSONSource Layer에 setPaintProperty를 사용하여 polygon의 색을 변경하는 예제

  • 레이어의 레이아웃 속성값을 설정합니다.

    Parameters

    • property: string

      설정할 레이아웃 속성의 이름입니다.

    • value: any

      설정할 레이아웃 속성의 값입니다.

    Returns void

    Example

    Layer.setLayoutProperty('visibility', 'none');
    

    See

    Filter symbols by toggling a list 토글 버튼으로 레이어를 필터링 하고 setLayoutProperty를 사용하여 visibility 속성을 변경하는 예제

  • 레이어의 레이아웃 속성값 중 하나인 visibility속성을 변경해 레이어의 맵 표출 여부를 설정할 수 있습니다.

    Parameters

    • visible: boolean

      visible이 true면 레이아웃 속성을 visibility로 설정합니다. false면 none으로 설정합니다.

    Returns void

    Example

    Layer.setVisible(false);
    
  • 지정된 스타일 레이어의 확대/축소 범위를 설정합니다. 확대/축소 범위에는 레이어가 렌더링되는 minimum zoom levelmaximum zoom level이 포함됩니다.

    참고: 벡터 소스를 사용하는 스타일 레이어의 경우 소스 레이어의 최소 확대/축소 수준보다 낮은 확대/축소 수준에는 데이터가 없기 때문에 스타일 레이어를 렌더링할 수 없습니다. 소스 레이어의 최소 확대/축소 수준이 스타일 레이어에 정의된 최소 확대/축소 수준보다 높거나 같으면 스타일 레이어가 확대/축소 범위의 모든 확대/축소 수준에서 렌더링되지 않습니다.

    Parameters

    • minzoom: number

      설정할 최소 줌(6-22)

    • maxzoom: number

      설정할 최대 줌(6-22)

    Returns void

  • 레이어에 이벤트 리스너를 추가합니다.

    Parameters

    • type: any

      수신할 이벤트 유형입니다.

      • 이벤트 종류 : boxzoomcancel, boxzoomend, boxzoomstart, click, contextmenu, data, dataabort, dataloading, dblclick, drag, dragend, dragstart, error, idle, load, mousedown, mousemove, mouseout, mouseover, move, moveend, movestart, pitch, pitchend, pitchstart, remove, render, resize, rotate, rotateend, rotatestart, sourcedata, sourcedataabort, sourcedataloading, styledata, styledataloading, styleimagemissing, terrain, tiledataloading, touchcancel, touchend, touchmove, touchstart, webglcontextlost, webglcontextrestored, wheel, zoom, zoomend, zoomstart
    • listener: any

      이벤트가 발생했을 때 호출되는 콜백함수입니다.

    Returns any

    this

    Example

    // 해당 레이어를 클릭하면 클릭한 좌표의 위도, 경도가 콘솔에 출력됩니다.
    Layer.on('click', (e)=>console.log(e.lngLat));
  • on에서 추가했던 지도 이벤트에 대한 콜백 리스너를 제거합니다.

    Parameters

    • type: any

      제거할 리스너를 추가했던 이벤트 유형입니다.

    • listener: any

      제거할 이벤트 리스너(콜백함수)입니다.

    Returns any

    this

    Example

    Layer.off('click', clickEvent);
    
  • 지도 이벤트가 발생했을 때 한 번만 호출되는 콜백 리스너를 추가합니다. 이벤트가 처음 발생했을 때에만 콜백 리스너가 호출됩니다.

    Parameters

    • type: any

      수신할 이벤트 유형입니다.

      • 이벤트 종류 : boxzoomcancel, boxzoomend, boxzoomstart, click, contextmenu, data, dataabort, dataloading, dblclick, drag, dragend, dragstart, error, idle, load, mousedown, mousemove, mouseout, mouseover, move, moveend, movestart, pitch, pitchend, pitchstart, remove, render, resize, rotate, rotateend, rotatestart, sourcedata, sourcedataabort, sourcedataloading, styledata, styledataloading, styleimagemissing, terrain, tiledataloading, touchcancel, touchend, touchmove, touchstart, webglcontextlost, webglcontextrestored, wheel, zoom, zoomend, zoomstart
    • listener: any

      이벤트가 발생했을 때 한 번만 호출되는 콜백함수입니다.

    Returns any

    this

  • 레이어의 페인트 옵션을 설정합니다.

    Parameters

    Returns void

    Example

    lineSymbolicLayer.setPaint({'text-color' : '#000000', 'text-opacity' : true});
    
  • 레이어의 레이아웃 옵션을 설정합니다.

    Parameters

    Returns void

    Example

    lineSymbolicLayer.setLayout({'icon-anchor': 'top', 'icon-ignore-placement' : true});
    
  • 쿼리 매개변수를 충족하는 가시적 feature을 나타내는 MapGeoJSONFeature 객체의 배열을 반환합니다.

    Parameters

    • Optional geometryOrOptions: PointLike | [PointLike, PointLike] | QueryRenderedFeaturesOptions
      type QueryRenderedFeaturesOptions = {
      layers?: string[] | undefined;
      filter?: FilterSpecification | undefined;
      availableImages?: string[] | undefined;
      validate?: boolean | undefined;
      }

      쿼리 영역의 geometry: 경계 box를 설명하는 단일 지점 또는 남서쪽 및 북동쪽 지점. 이 매개변수(Map#queryRenderedFeatures)를 생략하는 것(즉, 인수가 없거나 옵션 인수만 있는 queryRenderedFeatures 호출)은 전체 지도 뷰포트를 포함하는 경계 box를 전달하는 것과 같습니다.

      geometryOrOptions는 QueryRenderedFeaturesOptions를 받을 수도 있습니다. 이 경우 함수가 하나의 매개변수(options)만 받는 상황을 지원하기 위함입니다.

    • Optional options: QueryRenderedFeaturesOptions
      type QueryRenderedFeaturesOptions = {
      layers?: string[] | undefined;
      filter?: FilterSpecification | undefined;
      availableImages?: string[] | undefined;
      validate?: boolean | undefined;
      }

    Returns MapGeoJSONFeature[]

    MapGeoJSONFeature 객체의 배열입니다.

    type MapGeoJSONFeature = GeoJSONFeature & {
    layer: DistributiveOmit<LayerSpecification, "source"> & {
    source: string;
    };
    source: string;
    sourceLayer?: string | undefined;
    state: {
    [key: string]: any;
    };
    }

    반환된 각 feature 개체의 properties 값에는 소스 feature의 속성이 포함됩니다.

    GeoJSON 소스의 경우 문자열 및 숫자 속성 값만 지원됩니다(즉, null, ArrayObject 값은 지원되지 않음).

    각 feature에는 최상위 layer, sourcesourceLayer 속성이 포함됩니다. layer 속성은 feature가 속한 스타일 레이어를 나타내는 객체입니다. 이 개체의 레이아웃 및 페인트 속성에는 지정된 확대/축소 수준 및 feature에 대해 완전히 평가되는 값이 포함되어 있습니다.

    현재 렌더링된 feature만 포함됩니다. 다음과 같은 일부 feature은 포함되지 않습니다.

    • visibility 속성이 none인 레이어의 feature
    • 확대/축소 범위가 현재 확대/축소 수준을 제외한 레이어의 feature
    • 텍스트 또는 아이콘 충돌로 인해 숨겨진 기호 feature.

    렌더링된 결과에 시각적으로 기여하지 않을 수 있는 feature을 포함하여 다른 모든 레이어의 feature이 포함됩니다. 예를 들어 레이어의 불투명도 또는 색상 알파 구성 요소가 0으로 설정되어 있는 feature들

    맨 위의 렌더링된 feature은 반환된 배열에 처음 나타나고 후속 feature은 내림차순 z-order로 정렬됩니다. 여러 번 렌더링되는 feature(낮은 확대/축소 수준에서 자오선을 가로지르는 래핑으로 인해)은 한 번만 반환됩니다(아래의 주의사항이 따른다).

    feature은 내부적으로 타일로 변환된 타일 벡터 데이터 또는 GeoJSON 데이터에서 가져오기 때문에 feature이 타일 경계를 넘어 분할되거나 복제될 수 있으며 그 결과 feature이 쿼리 결과에 여러 번 나타날 수 있습니다. 예를 들어 쿼리의 경계 사각형을 통과하는 고속도로가 있다고 가정합니다. 쿼리 결과는 고속도로가 다른 타일로 확장되더라도 경계 사각형을 덮는 지도 타일 내에 있는 고속도로 부분이 되며 각 지도 타일 내의 고속도로 부분은 별도의 feature으로 반환됩니다. 마찬가지로 타일 경계 근처의 포인트 feature는 타일 버퍼링으로 인해 여러 타일에 나타날 수 있습니다.

    Example

    한 지점에서 모든 feature 찾기

     let features = LineSymbolicLayer.queryRenderedFeatures(
    [20, 35],
    { layers: ['my-layer-name'] }
    );

    Example

    정적 경계 box 내의 모든 feature 찾기

     let features = LineSymbolicLayer.queryRenderedFeatures(
    [[10, 20], [30, 50]],
    { layers: ['my-layer-name'] }
    );

    Example

    포인트 주위의 경계 box 내에서 모든 feature 찾기

    let width = 10;
    let height = 20;
    let features = LineSymbolicLayer.queryRenderedFeatures([
    [point.x - width / 2, point.y - height / 2],
    [point.x + width / 2, point.y + height / 2]
    ], { layers: ['my-layer-name'] }
    );

    Example

    단일 레이어에서 렌더링된 모든 feature 쿼리

    let features = LineSymbolicLayer.queryRenderedFeatures({ layers: ['my-layer-name'] });
    

    See

Generated using TypeDoc