Abstract 생성할 레이어의 id입니다. map에 레이어를 추가할 때는 중복되는 레이어 id를 허용하지 않습니다.
Optional layer레이어에 필터 옵션을 추가해 feature를 제어하거나 레이어의 zoom level 범위를 제한할 수 있습니다.
filter는 레이어에 대한 필터 옵션입니다. 필터는 스타일 레이어가 소스에서 렌더링하는 feature를 제어합니다. 필터 옵션의 결과가 true인 feature만 표출됩니다.maxzoom은 레이어의 최대 확대 범위를 설정합니다.(6-22) 지도의 줌 레벨이 maxzoom보다 크거나 같아지는 경우 레이어는 표출되지 않습니다.minzoom은 레이어의 최대 축소 범위를 설정합니다.(6-22) 지도의 줌 레벨이 minzoom보다 작아지는 경우 레이어는 표출되지 않습니다.Optional source레이어에 추가할 소스의 id
지도에 레이어를 추가합니다.
레이어를 추가할 맵입니다.
레이어의 페인트 속성값을 설정합니다.
설정할 페인트 속성의 이름입니다.
설정할 페인트 속성의 값입니다.
Layer.setPaintProperty('fill-color', '#faafee');
PolygonLayer and GeoJSONSource Layer에 setPaintProperty를 사용하여 polygon의 색을 변경하는 예제
레이어의 레이아웃 속성값을 설정합니다.
설정할 레이아웃 속성의 이름입니다.
설정할 레이아웃 속성의 값입니다.
Layer.setLayoutProperty('visibility', 'none');
Filter symbols by toggling a list 토글 버튼으로 레이어를 필터링 하고 setLayoutProperty를 사용하여 visibility 속성을 변경하는 예제
지정된 스타일 레이어의 확대/축소 범위를 설정합니다. 확대/축소 범위에는 레이어가 렌더링되는 minimum zoom level과 maximum zoom level이 포함됩니다.
참고: 벡터 소스를 사용하는 스타일 레이어의 경우 소스 레이어의 최소 확대/축소 수준보다 낮은 확대/축소 수준에는 데이터가 없기 때문에 스타일 레이어를 렌더링할 수 없습니다. 소스 레이어의 최소 확대/축소 수준이 스타일 레이어에 정의된 최소 확대/축소 수준보다 높거나 같으면 스타일 레이어가 확대/축소 범위의 모든 확대/축소 수준에서 렌더링되지 않습니다.
설정할 최소 줌(6-22)
설정할 최대 줌(6-22)
레이어에 이벤트 리스너를 추가합니다.
수신할 이벤트 유형입니다.
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이벤트가 발생했을 때 호출되는 콜백함수입니다.
this
// 해당 레이어를 클릭하면 클릭한 좌표의 위도, 경도가 콘솔에 출력됩니다.
Layer.on('click', (e)=>console.log(e.lngLat));
on에서 추가했던 지도 이벤트에 대한 콜백 리스너를 제거합니다.
제거할 리스너를 추가했던 이벤트 유형입니다.
제거할 이벤트 리스너(콜백함수)입니다.
this
Layer.off('click', clickEvent);
지도 이벤트가 발생했을 때 한 번만 호출되는 콜백 리스너를 추가합니다. 이벤트가 처음 발생했을 때에만 콜백 리스너가 호출됩니다.
수신할 이벤트 유형입니다.
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이벤트가 발생했을 때 한 번만 호출되는 콜백함수입니다.
this
레이어에 포함된 source를 반환합니다.
Layer.getSource();
쿼리 매개변수를 충족하는 가시적 feature을 나타내는 MapGeoJSONFeature 객체의 배열을 반환합니다.
Optional geometryOrOptions: PointLike | [PointLike, PointLike] | QueryRenderedFeaturesOptionstype QueryRenderedFeaturesOptions = {
layers?: string[] | undefined;
filter?: FilterSpecification | undefined;
availableImages?: string[] | undefined;
validate?: boolean | undefined;
}
쿼리 영역의 geometry: 경계 box를 설명하는 단일 지점 또는 남서쪽 및 북동쪽 지점. 이 매개변수(Map#queryRenderedFeatures)를 생략하는 것(즉, 인수가 없거나 옵션 인수만 있는 queryRenderedFeatures 호출)은 전체 지도 뷰포트를 포함하는 경계 box를 전달하는 것과 같습니다.
geometryOrOptions는 QueryRenderedFeaturesOptions를 받을 수도 있습니다. 이 경우 함수가 하나의 매개변수(options)만 받는 상황을 지원하기 위함입니다.
Optional options: QueryRenderedFeaturesOptionstype QueryRenderedFeaturesOptions = {
layers?: string[] | undefined;
filter?: FilterSpecification | undefined;
availableImages?: string[] | undefined;
validate?: boolean | undefined;
}
MapGeoJSONFeature 객체의 배열입니다.
type MapGeoJSONFeature = GeoJSONFeature & {
layer: DistributiveOmit<LayerSpecification, "source"> & {
source: string;
};
source: string;
sourceLayer?: string | undefined;
state: {
[key: string]: any;
};
}
반환된 각 feature 개체의 properties 값에는 소스 feature의 속성이 포함됩니다.
GeoJSON 소스의 경우 문자열 및 숫자 속성 값만 지원됩니다(즉, null, Array 및 Object 값은 지원되지 않음).
각 feature에는 최상위 layer, source 및 sourceLayer 속성이 포함됩니다.
layer 속성은 feature가 속한 스타일 레이어를 나타내는 객체입니다.
이 개체의 레이아웃 및 페인트 속성에는 지정된 확대/축소 수준 및 feature에 대해 완전히 평가되는 값이 포함되어 있습니다.
현재 렌더링된 feature만 포함됩니다. 다음과 같은 일부 feature은 포함되지 않습니다.
visibility 속성이 none인 레이어의 feature렌더링된 결과에 시각적으로 기여하지 않을 수 있는 feature을 포함하여 다른 모든 레이어의 feature이 포함됩니다. 예를 들어 레이어의 불투명도 또는 색상 알파 구성 요소가 0으로 설정되어 있는 feature들
맨 위의 렌더링된 feature은 반환된 배열에 처음 나타나고 후속 feature은 내림차순 z-order로 정렬됩니다. 여러 번 렌더링되는 feature(낮은 확대/축소 수준에서 자오선을 가로지르는 래핑으로 인해)은 한 번만 반환됩니다(아래의 주의사항이 따른다).
feature은 내부적으로 타일로 변환된 타일 벡터 데이터 또는 GeoJSON 데이터에서 가져오기 때문에 feature이 타일 경계를 넘어 분할되거나 복제될 수 있으며 그 결과 feature이 쿼리 결과에 여러 번 나타날 수 있습니다. 예를 들어 쿼리의 경계 사각형을 통과하는 고속도로가 있다고 가정합니다. 쿼리 결과는 고속도로가 다른 타일로 확장되더라도 경계 사각형을 덮는 지도 타일 내에 있는 고속도로 부분이 되며 각 지도 타일 내의 고속도로 부분은 별도의 feature으로 반환됩니다. 마찬가지로 타일 경계 근처의 포인트 feature는 타일 버퍼링으로 인해 여러 타일에 나타날 수 있습니다.
한 지점에서 모든 feature 찾기
let features = layer.queryRenderedFeatures(
[20, 35],
{ layers: ['my-layer-name'] }
);
정적 경계 box 내의 모든 feature 찾기
let features = layer.queryRenderedFeatures(
[[10, 20], [30, 50]],
{ layers: ['my-layer-name'] }
);
포인트 주위의 경계 box 내에서 모든 feature 찾기
let width = 10;
let height = 20;
let features = layer.queryRenderedFeatures([
[point.x - width / 2, point.y - height / 2],
[point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] }
);
단일 레이어에서 렌더링된 모든 feature 쿼리
let features = layer.queryRenderedFeatures({ layers: ['my-layer-name'] });
Generated using TypeDoc
소스를 통해 시각적 표현을 제공하는 레이어입니다. 맵에 소스와 스타일이 포함된 레이어 객체를 추가해 feature를 표출할 수 있습니다.
[Layer 생성 방법]
레이어를 생성하고 addTo 함수를 사용하여 맵에 레이어를 추가할 수 있습니다.
Example
See
PointLayer And CircleStyle Map에 PointLayer를 추가하여 지도상에 원을 표출하는 예제