Class Map

KtMap class의 생성자입니다

See

Edit in Playground Playground에서 테스트하기

Shift 키를 누른 상태에서 드래그 제스처를 사용하여 확대/축소를 구현하는 지도의 BoxZoomHandler입니다.

• map.boxZoom.enable() : boxZoom 상호작용 활성화
• map.boxZoom.disable() : boxZoom 상호작용 비활성화
• map.boxZoom.isEnabled() : boxZoom 상호작용 활성화 여부 반환
• map.boxZoom.isActive() : boxZoom 사용 중 여부 반환

사용자가 두 번 클릭하여 확대/축소할 수 있는 지도의 DoubleClickZoomHandler입니다.

• map.doubleClickZoom.enable() : doubleClickZoom 상호작용 활성화
• map.doubleClickZoom.disable() : doubleClickZoom 상호작용 비활성화
• map.doubleClickZoom.isEnabled() : doubleClickZoom 상호작용 활성화 여부 반환
• map.doubleClickZoom.isActive() : doubleClickZoom 사용 중 여부 반환

마우스 또는 터치 제스처로 지도 드래그를 구현하는 지도의 DragPanHandler입니다.

• map.dragPan.enable() : dragPan 상호작용 활성화
• map.dragPan.disable() : dragPan 상호작용 비활성화
• map.dragPan.isEnabled() : dragPan 상호작용 활성화 여부 반환
• map.dragPan.isActive() : dragPan 사용 중 여부 반환

마우스 오른쪽 버튼 또는 Ctrl 키를 누른 상태에서 드래그하는 동안 지도 회전을 구현하는 지도의 DragRotateHandler입니다.

• map.dragRotate.enable() : dragRotate 상호작용 활성화
• map.dragRotate.disable() : dragRotate 상호작용 비활성화
• map.dragRotate.isEnabled() : dragRotate 상호작용 활성화 여부 반환
• map.dragRotate.isActive() : dragRotate 사용 중 여부 반환

사용자가 키보드 단축키를 사용하여 지도를 확대/축소, 회전 및 이동할 수 있는 지도의 KeyboardHandler입니다.

• map.keyboard.enable() : keyboard 상호작용 활성화
• map.keyboard.disable() : keyboard 상호작용 비활성화
• map.keyboard.isEnabled() : keyboard 상호작용 활성화 여부 반환
• map.keyboard.isActive() : keyboard 사용 중 여부 반환
• map.keyboard.enableRotation() : keyboard 이동/회전 상호 작용 활성화
• map.keyboard.disableRotation() : keyboard 이동/회전 상호 작용 비활성화(확대/축소는 활성화)

지도가 계속해서 다시 그려질지 여부를 나타내는 Boolean을 가져오고 설정합니다. 이 정보는 성능 분석에 유용합니다.

스크롤 휠 또는 트랙패드로 확대/축소를 구현하는 지도의 ScrollZoomHandler입니다.

맵이 데이터 소스의 모든 심볼 주위에 상자를 렌더링할지 여부를 나타내는 Boolean을 가져오고 설정하여 렌더링된 심볼 또는 충돌로 인해 숨겨진 심볼을 표시합니다. 이 정보는 디버깅에 유용합니다.

지도가 패딩 오프셋을 시각화할지 여부를 나타내는 Boolean을 가져오고 설정합니다.

맵이 각 타일 및 타일 ID 주위에 윤곽선을 렌더링할지 여부를 나타내는 Boolean을 가져오고 설정합니다. 이러한 타일 경계는 디버깅에 유용합니다. 첫 번째 벡터 소스의 압축되지 않은 파일 크기는 타일 ID 옆에 있는 각 타일의 왼쪽 상단 모서리에 그려집니다.

지도의 TwoFingersTouchPitchHandler는 사용자가 터치 제스처로 지도를 피치할 수 있도록 합니다.

• map.touchPitch.enable() : touchPitch 상호작용 활성화
• map.touchPitch.disable() : touchPitch 상호작용 비활성화
• map.touchPitch.isEnabled() : touchPitch 상호작용 활성화 여부 반환
• map.touchPitch.isActive() : touchPitch 사용 중 여부 반환

지도의 TwoFingersTouchZoomRotateHandler는 사용자가 터치 제스처로 지도를 확대/축소하거나 회전할 수 있도록 합니다.

• map.touchZoomRotate.enable() : touchZoomRotate 상호작용 활성화
• map.touchZoomRotate.disable() : touchZoomRotate 상호작용 비활성화
• map.touchZoomRotate.isEnabled() : touchZoomRotate 상호작용 활성화 여부 반환
• map.touchZoomRotate.isActive() : touchZoomRotate 사용 중 여부 반환
• map.touchZoomRotate.enableRotation() : touchRotate(터치로 회전) 회전 상호작용 활성화
• map.touchZoomRotate.disableRotation() : touchRotate(터치로 회전) 회전 상호작용 비활성화(터치로 확대/축소는 활성화)

지도에 컨트롤 추가합니다. 컨트롤 사용과 관련된 것은 각 Control 설명을 확인해주세요.

Example

map.addControl(new NavigationControl(), 'top-left')
Copy

See

• Navigation Control 예시
• Minimap Control 예시
• Draw Control 예시
• Attribution Control 예시
• Fullscreen Control 예시
• Geolocate Control 예시
• Logo Control 예시
• Scale Control 예시

지도에 이미지를 추가합니다.
loadImage로 이미지 로딩 성공 시 이미지를 추가할 수 있습니다.

Example

map.loadImage(
     "https://map.gis.kt.com/mapsdk/images/blackcat.png", //추가할 이미지 url
     (err:Error, image:ImageBitmap) => {
         if (err) throw err; // 에러 핸들링

         // 이미지를 "pattern"의 이름으로 추가합니다
         map.addImage("pattern", image);
     }
)
Copy

See

지도에 이미지 추가 후 폴리곤 레이어의 패턴으로 사용하는 예제

지도에 레어어를 추가합니다. 레이어는 소스를 참조하여 시각적 표현을 제공합니다.

레이어 속성인 type은 background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade 중 하나여야 합니다. background속성의 레이어를 제외한 다른 레이어들은 모두 source를 참조해야 합니다. 레이어는 source로 추가된 데이터를 가져오고, 선택적으로 feature를 필터링한 다음, 해당 feature가 스타일링 되는 방식을 정의합니다.

Example

polygon 형태의 test source를 layer에 추가하기

//test 이름의 source 추가
map.addSource('test', {
     'type': 'geojson',
     'data': {   
        'type': 'Feature',
        'geometry': {
             'type': 'Polygon',
             'coordinates': [
               [127.017000, 37.49000],
               [127.017999, 37.49000],
               [127.017999, 37.49999],
               [127.017000, 37.49999],
               [127.017000, 37.49000]
             ]
         }}
});

//test source를 layer에 추가
map.addLayer({
 'id': 'test',
 'type': 'fill',
 'source': 'test',
 'layout': {},
 'paint': {
     'fill-color': '#088',
     'fill-opacity': 0.8
 }})
Copy

Example

기존 레이어 앞에 새 심볼 레이어 추가

map.addLayer({
     id: 'states',
     source: 'state-source', //이전에 생성된 source
     type: 'symbol',
     layout: {},
}, 'before-layer'); // `before-layer`이름의 기존 레이어 앞에 새 레이어 추가
Copy

See

• 패턴 폴리곤 레이어 추가
• fill, line 레이어 추가

지도에 소스(지도에 표시할 데이터)를 추가합니다. source.add 이벤트를 트리거합니다.

소스에는 색상이나 너비와 같은 스타일 세부정보가 포함되어 있지 않기 때문에 소스를 추가하는 것만으로는 지도에 데이터를 표시하기에 충분하지 않습니다. 소스를 사용하여 지도에 표시하기 위해서는 addLayer 레이어 쪽을 확인해주세요.

Example

json파일 url을 사용하여 vector 형태의 'my-data' source 추가하기
map.addSource('my-data', {
     type: 'vector',
     url: '' 
});
Copy

Example

polygon 형태의 'test' source 추가하기

//test 이름으로 polygon 형태의 source 추가
map.addSource('test', {
     type: 'geojson',
     data: {   
        type: 'Feature',
        geometry: {
             type: 'Polygon',
             coordinates: [
               [127.017000, 37.49000],
               [127.017999, 37.49000],
               [127.017999, 37.49999],
               [127.017000, 37.49999],
               [127.017000, 37.49000]
             ]
         }}
});
Copy

See

• geoJson Source 추가하기
• vector Source 추가하기

지도에 overlay를 추가합니다. Marker 또는 InfoWindow를 추가할 수 있습니다.

Example

let marker = new ktGms.overlay.Marker({lngLat: [127.029414, 37.471401]});
let infoWindow = new ktGms.overlay.InfoWindow().setLngLat([127.029414, 37.471401]).setHTML("<h1>Null Island</h1>");
map.addOverlay(marker);
map.addOverlay(infoWindow);
Copy

addOverlay로 추가했던 overlay를 제거합니다. addOverlay때 추가해줬던 Marker 또는 InfoWindow 객체를 overlay 파라미터로 넘겨야 제거됩니다.

Example

let marker = new ktGms.overlay.Marker({lngLat: [127.029414, 37.471401]});
let infoWindow = new ktGms.overlay.InfoWindow().setLngLat([127.029414, 37.471401]).setHTML("<h1>Null Island</h1>");
map.addOverlay(marker);
map.addOverlay(infoWindow);

map.removeOverlay(marker);
map.removeOverlay(infoWindow);
Copy

스타일의 모든 소스에서 뷰포트의 모든 타일이 로드되었는지에 대한 여부를 반환합니다.

Example

let tilesLoaded = map.areTilesLoaded();
Copy

from 위치에서 to 위치로 카메라를 이동하기 위한 카메라 옵션을 계산하여 반환합니다.

Example

let cameraoption = map.calculateCameraOptionsFromTo([127.015422, 37.49044], 0,[127.017422, 37.49444], 3)
Copy

원하는 경계(bounds)에 대한 카메라 정보(지도 center/zoom/bearing)를 반환합니다.

Example

let cameraBounds = map.cameraForBounds(
     [[127.015422, 37.49044],[127.017422, 37.49444]],
     { padding: {top: 10, bottom:25, left: 15, right: 5} }
)
Copy

center, zoom, bearing, pitch, padding 이 변경될 때 애니메이션 전환으로 변경합니다.

Example

//map을 300ms동안 애니메이션 전환과 함께 zoom:15로 변경하기
map.easeTo({
 duration: 300,
 zoom: 15 ,
}, {originalEvent: e}
Copy

See

easeTo를 활용한 지도 전환

지도를 지정한 경계 범위 내에서 보이도록(maxzoom일 때 포함) 이동하고 확대/축소 합니다. bearing이 0이 아니라면, 0으로 재설정합니다.
movestart 및 moveend 이벤트를 트리거합니다.

See

• Box 좌표에 맞게 fitBounds
• LineString 좌표에 맞게 fitBounds

지도를 지정된 bearing(기울기)으로 회전시킨 후, p0과 p1으로 만든 좌표 상자에 맞게 지도를 이동, 회전, 줌 합니다. 회전 없이 줌 하려면 현재 맵의 bearing을 현재 bearing값으로 설정 하세요
BoxZoomHandler에서 주로 사용됩니다.

Example

let p0 = [127.015422, 37.49044];
let p1 = [127.019422, 37.50444];
map.fitScreenCoordinates(p0, p1, map.getBearing());
Copy

지도의 center/zoom/bearing/pitch를 애니메이션과 함께 변경합니다. 해당 애니메이션은 zoom과 panning을 원활하게 통합하여 사용자가 먼 거리를 이동한 후에도 bearing을 유지할 수 있도록 도와줍니다.
(참고 : options에 essential:true가 포함되지 않고, 사용자의 시스템이 reduced motion일 때, 해당 애니메이션은 jumpTo와 동일하게 작동됩니다. )

Example

map.flyTo({
     center: [127.015422, 37.49044], 
     zoom: 9,
     speed: 0.2,
     curve: 1,
});
Copy

See

• flyTo 함수를 통한 위치 이동
• scroll event 발생에 따른 시점 이동

지도의 bearing(기울기)값을 반환합니다.

See

getBearing

지도의 bound(경계)를 반환합니다.

카메라가 보는 지점의 고도를 반환합니다. "해발미터" * "과장" 의 계산값입니다.

지도의 canvas DOM을 반환합니다.

지도 canvas를 감싸는 container DOM을 반환합니다.

지도의 중심 좌표를 반환합니다.

지도 DOM을 반환합니다.

설정한 지도 제스처 도움말을 반환합니다.

지도에 addImage로 추가했던 이미지의 정보를 반환합니다.

지도에 addLayer로 추가했던 레이어의 정보를 반환합니다.

지정된 스타일 레이어의 레이아웃 속성 값을 반환합니다.

지도의 조명 개체(Light 스타일의 조명)의 값을 반환합니다.

지도의 최대 경계 범위를 반환합니다.

지도의 최대 pitch(기울기)를 반환합니다.

지도의 최대 확대/축소 수준을 반환합니다.

지도의 최소 pitch(기울기)를 반환합니다.

지도의 최소 확대/축소 수준을 반환합니다.

지도 뷰포트 주변에 적용된 현재 패딩을 반환합니다.

지정된 스타일 레이어의 paint 속성 값을 반환합니다.

지도의 현재 pitch(기울기)를 반환합니다.

지도의 픽셀 비율을 반환합니다.
실제로 적용되는 픽셀 비율은 maxCanvasSize를 준수하기 위해 더 낮을 수 있습니다.

지도 스타일에 지정된 ID가 있는 Source를 반환합니다. 지정된 ID가 없는 경우 undefined를 반환합니다.

지도의 스타일에서 스프라이트를 반환합니다. style 이벤트를 발생시킵니다.

지도의 스타일 객체를 JSON으로 반환합니다.

지형 옵션을 설정한 적이 있는 경우, 지형이 로드된 후 지형 옵션(TerrainSpecification = {source:string, exaggeration?:number}) 반환합니다.
설정한 적이 없는 경우, null을 반환합니다.

지도의 확대/축소 수준(줌 레벨)을 반환합니다.

지도에 컨트롤이 있는지 확인합니다.

스타일에 특정 ID를 가지 이미지가 존재하는지 확인합니다. 기존의 sprite 내의 스타일과 addImage로 추가된 이미지를 모두 체크하여 확인합니다.

카메라 애니메이션이나 사용자 제스처로 인해 지도가 이동, 확대/축소, 회전, 피칭(기울어짐)하는 경우 true를 반환합니다.

Example

let isMoving = map.isMoving();
Copy

카메라 애니메이션이나 사용자 제스처로 인해 지도가 회전하는 경우 true를 반환합니다.

Example

let isRotating = map.isRotating();
Copy

Source가 로드 되었는지 여부를 반환합니다.
지정된 ID를 가진 Source가 없으면 ErrorEvent가 발생합니다.

지도의 스타일이 완전히 로드 되었는지 여부를 반환합니다.

카메라 애니메이션이나 사용자 제스처로 인해 지도가 확대/축소되는 경우 true를 반환합니다.

Example

let isZooming = map.isZooming();
Copy

애니메이션 전환 없이 center/zoom/bearing/pitch를 변경합니다. 옵션에 명시되지 않은 속성들은 기존값을 유지합니다.

Example

map.jumpTo({
     center:[127.015422, 37.49044],
     zoom: 11,
     pitch: 15,
     bearing: 60
})
Copy

See

jumpTo를 사용한 화면 이동 애니메이션

지도에서 현재 사용 가능한 모든 이미지의 ID를 문자열 배열로 반환합니다. 기존의 sprite 내의 이미지와 addImage로 추가된 이미지를 모두 반환합니다.

Example

let allImages = map.listImages();
Copy

지도가 완전히 로드되었는지 여부를 확인합니다.
스타일 또는 소스가 아직 완전히 로드되지 않았거나 스타일이 변경된 경우, false가 반환됩니다.

외부 URL에서 이미지를 로드합니다. addImage에서 사용되며, 외부 도메인은 CORS를 지원해야 합니다.

레이어의 위치(순서)를 이동합니다.

Example

// 레이어 배열에서 'polygon'레이어를 'country-label'레이어 앞으로 이동합니다.
// 지도에서 'polygon'레이어가 'country-label'레이어 아래에 나타납니다.    
map.moveLayer('polygon', 'country-label'); 
Copy

지도 이벤트에 대한 콜백 리스너를 추가합니다.

Example

//map에 zoom 이벤트가 발생할 때, `zoom`을 콘솔에 출력하는 콜백 리스너가 호출됩니다.    
let consoleFunc = function(){console.log('zoom');}
map.on('zoom', consoleFunc );
Copy

on에서 추가했던 지도 이벤트에 대한 콜백 리스너를 제거합니다.

Example

//map에 zoom 이벤트가 발생할 때 호출되었던 consoleFunc 함수를 제거합니다. 제거한 후에는 zoom 이벤트가 발생되어도 consoleFunc가 호출되지 않습니다.
map.off('zoom', consoleFunc);
Copy

지도에 추가한 레이어에 이벤트가 발생했을 때의 콜백 리스너를 추가합니다.

Example

//'polygontest' 레이어에 click 이벤트가 발생할 때, `click`을 콘솔에 출력하는 콜백 리스너가 호출됩니다.    
let consoleFunc = function(){console.log('click');}
map.on('click', 'polygontest', consoleFunc);
Copy

See

point 클릭 시 팝업 표시

onLayer에서 추가했던 레이어 이벤트에 대한 콜백 리스너를 제거합니다.

Example

//'polygontest' 레이어에 click 이벤트가 발생할 때 호출되었던 consoleFunc 함수를 제거합니다. 제거한 후에는 click 이벤트가 발생되어도 consoleFunc가 호출되지 않습니다.   
map.off('click', 'polygontest', consoleFunc);
Copy

지도 이벤트가 발생했을 때 한 번만 호출되는 콜백 리스너를 추가합니다. 이벤트가 처음 발생했을 때에만 콜백 리스너가 호출됩니다.

지도에 추가한 레이어에 이벤트가 발생했을 때 한 번만 호출되는 콜백 리스너를 추가합니다. 이벤트가 처음 발생했을 때에만 콜백 리스너가 호출됩니다.

지정된 offset만큼 지도를 패닝(이동)합니다. movestart, moveend 이벤트를 트리거합니다.

See

panBy를 통해 지도 이동

애니메이션 전환을 통해 지도를 지정된 위치로 이동합니다. movestart, moveend 이벤트를 트리거합니다.

See

panTo를 통해 지도 이동

픽셀 좌표 -> 위경도 좌표 : point 픽셀 좌표를 지리적 위치(lnglat)에 해당하는 위경도 좌표로 변환하여 반환합니다.

Example

map.unproject([486.21729, -493.31896])
Copy

위경도 좌표 -> 픽셀 좌표 : 현재 지도 내 지리적 위치(lnglat)에 해당하는 좌표를 픽셀 기준으로 변환하여 반환합니다.

Example

map.project([127.017022, 37.49944])
Copy

쿼리 매개변수를 충족하는 가시적 feature을 나타내는 MapGeoJSONFeature 객체의 배열을 반환합니다.

Example

한 지점에서 모든 feature 찾기

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

Example

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

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

Example

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

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

Example

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

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

See

• 마우스 좌표 지점의 features 가져오기
• 레이어의 features 가져오기

쿼리 매개변수를 충족하는 지정된 벡터 타일 또는 GeoJSON 소스 내의 feature을 나타내는 MapGeoJSONFeature 객체의 배열을 반환합니다.

Example

벡터 소스에서 하나의 소스 레이어에 있는 모든 feature 찾기

let features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});
Copy

See

source id에 해당하는 feature 찾기

위치의 현재 고도를 쿼리합니다. 지형이 활성화되지 않은 경우 null을 반환합니다. 고도는 평균 해수면에 상대적인 미터 단위입니다.

지도의 동기식 다시 그리기를 강제 실행합니다.

이 지도와 관련된 모든 내부 리소스를 정리하고 해제합니다. 여기에는 DOM 요소, 이벤트 바인딩, 웹 작업자 및 WebGL 리소스가 포함됩니다. 지도 사용을 마치고 더 이상 브라우저 리소스를 사용하지 않도록 하려면 이 방법을 사용하세요. 이후에는 지도에서 다른 메서드를 호출하면 안됩니다.

지도에서 컨트롤을 제거합니다. 이미지 매개변수가 유효하지 않으면 ErrorEvent가 발생합니다.

Example

// 새로운 navigation control 정의합니다.
let navigation = new ktGms.control.NavigationControl();
// 지도에 확대/축소 및 회전 컨트롤을 추가합니다.
map.addControl(navigation);
// 지도에서 확대/축소 및 회전 컨트롤을 제거합니다.
map.removeControl(navigation);
Copy

feature의 state를 제거하여 기본 동작으로 다시 설정합니다. target.source만 지정된 경우 해당 소스에서 모든 feature의 상태를 제거합니다. target.id도 지정된 경우 해당 feature의 상태에 대한 모든 키를 제거합니다. key도 지정된 경우 해당 feature의 상태에서 해당 키만 제거합니다. feature은 숫자 또는 문자열일 수 있는 feature.id 속성으로 식별됩니다.

Example

my-source 소스의 모든 feature에 대한 전체 상태 개체 재설정

 map.removeFeatureState({
     source: 'my-source'
 });
Copy

Example

마우스가 'my-layer' 레이어를 벗어나면 마우스 아래의 feature에 대한 전체 상태 개체를 재설정합니다.

map.on('mouseleave', 'my-layer', function(e) {
     map.removeFeatureState({
         source: 'my-source',
         sourceLayer: 'my-source-layer',
         id: e.features[0].id
     });
});
Copy

Example

마우스가 'my-layer' 레이어를 벗어날 때 마우스 아래의 feature에 대한 상태에서 hover 키-값 쌍만 재설정

map.on('mouseleave', 'my-layer', function(e) {
     map.removeFeatureState({
         source: 'my-source',
         sourceLayer: 'my-source-layer',
         id: e.features[0].id
     }, 'hover');
});
Copy

스타일에서 이미지를 제거합니다. 이것은 스타일의 원래 스프라이트(아이콘 및 패턴에 사용되는 이미지)의 이미지이거나 런타임에 addImage를 사용하여 추가된 이미지일 수 있습니다.

Example

// ID가 'cat'인 이미지가 있는 경우
// 스타일의 스프라이트를 제거합니다.
if (map.hasImage('cat')) map.removeImage('cat');
Copy

맵 스타일에서 지정된 ID를 가진 레이어 또는 소스를 제거합니다. 이미지 매개변수가 유효하지 않으면 ErrorEvent가 발생합니다.

Example

ID가 state-data인 레이어가 있으면 제거합니다.

if (map.getLayer('state-data')) map.removeLayer('state-data');
Copy

지도 스타일에서 소스를 제거합니다.

Example

map.removeSource('bathymetry-data');
Copy

맵의 스타일에서 스프라이트를 제거합니다. style 이벤트를 발생시킵니다.

Example

map.removeSprite('sprite-two');
map.removeSprite('default');
Copy

애니메이션 전환과 함께 북쪽이 위쪽(방향각 0°)이 되도록 지도를 회전합니다. movestart, moveend 및 rotate 이벤트를 트리거합니다.

애니메이션 전환과 함께 북쪽이 위쪽(방향각 0°)이고 피치가 0°가 되도록 지도를 회전하고 피치합니다. 다음 이벤트를 트리거합니다: movestart, move, moveend, pitchstart, pitch, pitchend, rotate.

컨테이너 요소의 크기에 따라 지도 크기를 조정합니다. 지도 컨테이너 크기가 변경되었는지 확인하고 변경된 경우 지도를 업데이트합니다. 이 메서드는 지도의 컨테이너가 프로그래밍 방식으로 크기가 조정된 후 또는 처음에 CSS로 숨겨진 지도가 표시될 때 호출해야 합니다. movestart, move, moveend 및 resize 이벤트를 트리거합니다.

Example

지도 컨테이너가 처음에 CSS로 숨겨졌다가 표시되면 지도 크기를 조정합니다.

let mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();
Copy

See

컨테이너 크기가 변경된 후 resize 호출

애니메이션 전환과 함께 지정된 방위로 지도를 회전합니다. 베어링은 "위"인 나침반 방향입니다. 예를 들어 방위각이 90°이면 지도가 동쪽이 위를 향하도록 합니다. movestart, moveend 및 rotate 이벤트를 트리거합니다.

See

특정 point를 기점으로 카메라 시점 회전 애니메이션

지도의 방향(회전)을 설정합니다. 베어링은 "위"인 나침반 방향입니다. 예를 들어 방위각이 90°이면 지도가 동쪽이 위를 향하도록 합니다.

지도의 지리적 중심점을 설정합니다. jumpTo({center: center})와 동일합니다. 다음 이벤트를 트리거합니다: movestart , moveend

See

지도의 중심점 변경

맵의 cooperativeGestures 옵션을 설정하거나 지웁니다.

feature의 상태를 설정합니다. feature의 상태는 런타임 시 feature에 할당되는 사용자 정의 키-값 쌍의 집합입니다. 이 방법을 사용할 때 상태 개체는 feature 상태의 기존 키-값 쌍과 병합됩니다. feature은 숫자 또는 문자열일 수 있는 feature.id 속성으로 식별됩니다.

이 방법은 feature.id 속성이 있는 소스에만 사용할 수 있습니다. feature.id 속성은 세 가지 방법으로 정의할 수 있습니다.

• 원래 데이터 파일의 id 속성을 포함하는 벡터 또는 GeoJSON 소스의 경우
• 벡터 또는 GeoJSON 소스의 경우 소스가 정의될 ​​때 promotionId 옵션을 사용합니다
• GeoJSON 소스의 경우 generateId 옵션을 사용하여 소스 데이터의 feature 인덱스를 기반으로 ID를 자동 할당합니다. map.getSource('some id').setData(..)를 사용하여 feature 데이터를 변경하는 경우 업데이트된 id 값을 고려하여 상태를 다시 적용해야 할 수 있습니다.

참고: feature 상태 식을 사용하여 스타일 지정을 위해 feature 상태 개체의 값에 액세스할 수 있습니다.

Example

마우스가 my-layer 레이어 위로 이동하면 업데이트 마우스 아래의 feature에 대한 feature 상태

 map.on('mousemove', 'my-layer', function(e) {
     if (e.features.length > 0) {
     map.setFeatureState({
         source: 'my-source',
         sourceLayer: 'my-source-layer',
         id: e.features[0].id,
     }, {
         hover: true
     });
     }
 });
Copy

See

Create a hover effect

지정된 스타일 레이어에 대한 필터를 설정합니다.

필터는 스타일 레이어가 소스에서 렌더링하는 feature을 제어합니다. 필터 표현식이 true로 평가되는 모든 feature는 맵에서 렌더링됩니다. false인 것은 숨겨질 것입니다.

setFilter를 사용하여 소스 데이터의 하위 집합을 표시합니다. 필터를 지우려면 null 또는 undefined를 두 번째 매개변수로 전달합니다.

Example

'name' 속성이 'USA'인 feature만 표시

map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);
Copy

Example

5개 이상의 'available-spots'이 있는 feature만 표시

map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);
Copy

Example

'bike-docks' 스타일 레이어에 대한 필터 제거

map.setFilter('bike-docks', null);
Copy

스타일의 glyphs 속성 값을 설정합니다.

Example

map.setGlyphs('https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf');
Copy

지정된 스타일 레이어의 확대/축소 범위를 설정합니다. 확대/축소 범위에는 레이어가 렌더링되는 minimum zoom level과 maximum zoom level이 포함됩니다.

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

지정된 스타일 레이어의 레이아웃 속성 값을 설정합니다.

Example

map.setLayoutProperty('my-layer', 'visibility', 'none');
Copy

See

• 지도에 표출되는 라벨 제거
• 사용자가 입력한 텍스트박스에 맞게 visibility 속성을 설정
• 사용자가 선택한 텍스트박스에 맞게 visibility 속성을 설정

조명 값의 모든 조합을 설정합니다.

지도의 지리적 경계를 설정하거나 지웁니다.

이동 및 확대/축소 작업은 이러한 범위 내에서 제한됩니다. 이러한 경계 밖의 지역을 표시하는 이동 또는 확대/축소가 수행되는 경우 지도는 여전히 경계 내에 있으면서 작업 요청에 최대한 가까운 위치와 확대/축소 수준을 대신 표시합니다.

Example

최대 경계 설정으로 LngLatBoundsLike 객체를 준수하는 경계를 정의합니다.

 let bounds = [
     [-74.04728, 40.68392], // [west, south]
     [-73.91058, 40.87764]  // [east, north]
 ];
 map.setMaxBounds(bounds);
Copy

지도의 최대 피치를 설정하거나 지웁니다. 맵의 현재 피치가 새 최대값보다 높으면 맵이 새 최대값으로 피치됩니다. maxPitch가 범위를 벗어나면 ErrorEvent 이벤트가 발생합니다.

지도의 최대 확대/축소 수준을 설정하거나 지웁니다. 지도의 현재 확대/축소 수준이 새 최대값보다 높으면 지도가 새 최대값으로 확대/축소됩니다. minZoom이 범위를 벗어나면 ErrorEvent 이벤트가 발생합니다.

Example

 map.setMaxZoom(18.75);
Copy

지도의 최소 확대/축소 수준을 설정하거나 지웁니다. 지도의 현재 확대/축소 수준이 새 최소 수준보다 낮으면 지도가 새 최소 수준으로 확대/축소됩니다. 축소하고 설정된 minZoom에 도달하는 것이 항상 가능한 것은 아닙니다.지도 높이와 같은 다른 요소가 확대/축소를 제한할 수 있습니다. 예를 들어 지도의 높이가 512픽셀이면 minZoom이 무엇으로 설정되어 있든 줌 6 미만으로 줌할 수 없습니다.

minZoom이 범위(6-22)를 벗어나면 6으로 재설정하지만, ErrorEvent 이벤트가 발생할 수도 있습니다.

Example

 map.setMinZoom(12.25);
Copy

뷰포트 주변의 패딩을 픽셀 단위로 설정합니다.

jumpTo({padding: padding})과 동일합니다.

다음 이벤트를 트리거합니다: movestart, moveend.

Example

300px의 왼쪽 패딩과 50px의 상단 패딩을 설정합니다.

 map.setPadding({ left: 300, top: 50 });
Copy

지정된 스타일 레이어의 페인트 속성 값을 설정합니다.

Example

 map.setPaintProperty('my-layer', 'fill-color', '#faafee');
Copy

See

• polygon Layer의 스타일 변경
• 3D건물의 스타일 변경
• Layer의 스타일 변경

지도의 피치(기울기)를 설정합니다. jumpTo({pitch: pitch})와 같습니다. 다음 이벤트를 트리거합니다: movestart, moveend, pitchstart, pitchend.

지도의 픽셀 비율을 설정합니다. 이를 통해 devicePixelRatio를 재정의할 수 있습니다. 이 호출 후 캔버스의 너비 속성은 container.clientWidth * pixelRatio이고 높이 속성은 container.clientHeight * pixelRatio입니다. devicePixelRatio 재정의를 비활성화하려면 이 값을 null로 설정합니다. 실제로 적용되는 픽셀 비율은 maxCanvasSize를 준수하기 위해 더 낮을 수 있습니다.

스타일의 스프라이트 속성 값을 설정합니다.

Example

map.setSprite('YOUR_SPRITE_URL');
Copy

지도의 스타일 개체를 새 값으로 업데이트합니다.
"normal", "satellite", "hybrid" 값을 입력하여 지도 스타일을 변경할 수 있습니다.
또는, 이것이 사용될 때 스타일이 이미 설정되어 있고 options.diff가 true로 설정된 경우 지도 렌더러는 지정된 스타일을 지도의 현재 상태와 비교하려고 시도하고 지도 스타일이 원하는 상태와 일치하도록 만드는 데 필요한 변경만 수행합니다. 스프라이트(아이콘 및 패턴에 사용되는 이미지) 및 글리프(레이블 텍스트용 글꼴)의 변경 사항은 비교할 수 없습니다. 현재 스타일과 지정된 스타일에 사용된 스프라이트 또는 글꼴이 어떤 식으로든 다른 경우 맵 렌더러는 현재 스타일을 제거하고 주어진 스타일을 처음부터 새로 빌드하여 전체 업데이트를 강제로 수행합니다.

Example

map.setStyle("https://map.gis.kt.com/mapsdk/data/Style.json");

map.setStyle('https://map.gis.kt.com/mapsdk/data/Style.json', {
  transformStyle: (previousStyle, nextStyle) => ({
      ...nextStyle,
      sources: {
          ...nextStyle.sources,
          // 이전 스타일의 소스 복사
          'osm': previousStyle.sources.osm
      },
      layers: [
          // background layer
          nextStyle.layers[0],
          // 이전 스타일에서 레이어 복사
          previousStyle.layers[0],
          // 다음 스타일의 다른 레이어
          ...nextStyle.layers.slice(1).map(layer => {
              // 데모스타일에서 필요하지 않은 레이어를 숨깁니다.
              if (layer.id.startsWith('geolines')) {
                  layer.layout = {...layer.layout || {}, visibility: 'none'};
              // USA 다각형 필터링
              } else if (layer.id.startsWith('coastline') || layer.id.startsWith('countries')) {
                  layer.filter = ['!=', ['get', 'ADM0_A3'], 'USA'];
              }
              return layer;
          })
      ]
  })
});
Copy

See

스타일 변경