맵에 컨트롤 추가

아티클
03/20/2024

이 문서에서는 모든 컨트롤과 스타일 선택기를 사용하여 맵을 만드는 방법을 포함하여 맵에 컨트롤을 추가하는 방법을 보여 줍니다.

확대/축소 컨트롤 추가

확대/축소 컨트롤은 맵을 확대/축소하기 위한 단추를 추가합니다. 다음 코드 샘플은 ZoomControl 클래스의 인스턴스를 만들고 맵의 오른쪽 아래 모퉁이에 추가합니다.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

피치 컨트롤 추가

피치 컨트롤은 수평을 기준으로 지도에 피치를 기울이기 위한 단추를 추가합니다. 다음 코드 샘플은 PitchControl 클래스의 인스턴스를 만듭니다. 맵의 오른쪽 위 모퉁이에 PitchControl을 추가합니다.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

나침반 컨트롤 추가

나침반 컨트롤은 맵을 회전하는 단추를 추가합니다. 다음 코드 샘플은 CompassControl 클래스의 인스턴스를 만들고 맵의 왼쪽 아래 모퉁이에 추가합니다.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

모든 컨트롤이 있는 지도

여러 컨트롤을 배열에 배치하고 한 번에 모두 맵에 추가하고 맵의 동일한 영역에 배치하여 개발을 간소화할 수 있습니다. 다음 코드 조각에서는 이 방법을 사용하여 맵에 표준 탐색 컨트롤을 추가합니다.

map.controls.add([
    new atlas.control.ZoomControl(),
    new atlas.control.CompassControl(),
    new atlas.control.PitchControl(),
    new atlas.control.StyleControl()
], {
    position: "top-right"
});

다음 이미지는 맵의 오른쪽 위 모퉁이에 확대/축소, 나침반, 피치 및 스타일 선택기 컨트롤이 있는 맵을 보여 줍니다. 자동으로 스택하는 방법을 확인합니다. 스크립트의 컨트롤 개체 순서에 따라 지도에서 해당 개체가 표시되는 순서가 결정됩니다. 맵의 컨트롤 순서를 변경하는 경우 배열에서 컨트롤의 순서를 변경하면 됩니다.