맵 스타일 변경

아티클
03/10/2024

지도 컨트롤은 다양한 지도 스타일 옵션 및 기본 지도 스타일을 지원합니다. 지도 컨트롤이 초기화될 때 모든 스타일을 설정할 수 있습니다. 또는 지도 컨트롤의 setStyle 함수를 사용하여 스타일을 설정할 수 있습니다. 이 문서에서는 이러한 스타일 옵션을 사용하여 맵의 모양을 사용자 지정하는 방법과 지도에서 스타일 선택기 컨트롤을 구현하는 방법을 보여 줍니다. 스타일 선택 컨트롤을 사용하면 사용자가 다른 여러 기본 스타일 사이에 전환할 수 있습니다.

지도 스타일 옵션 설정

웹 컨트롤 초기화 중 스타일 옵션을 설정할 수 있습니다. 또는 지도 컨트롤의 setStyle 함수를 호출하여 스타일 옵션을 업데이트할 수 있습니다. 사용 가능한 모든 스타일 옵션을 보려면 스타일 옵션을 참조하세요.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
};

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

다양한 스타일이 맵 렌더링 방식에 어떤 영향을 미치는지 보여 주는 전체 기능 샘플을 보려면 Azure Maps 샘플의 맵 스타일 옵션을 참조하세요. 이 샘플의 소스 코드는 맵 스타일 옵션 소스 코드를 참조하세요.

기본 지도 스타일 설정

웹 SDK에서 사용할 수 있는 기본 지도 스타일 중 하나로 지도 컨트롤을 초기화할 수도 있습니다. 그런 다음 setStyle 함수를 사용하여 다른 지도 스타일로 기본 스타일을 업데이트할 수 있습니다.

초기화 시 기본 지도 스타일 설정

초기화하는 동안 지도 컨트롤의 기본 스타일을 설정할 수 있습니다. 다음 코드에서는 지도 컨트롤의 style 옵션이 grayscale_dark 기본 맵 스타일로 설정됩니다.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
);

맵 로드 프로세스 중에 설정되는 회색조 어두운 스타일을 보여 주는 스크린샷.

기본 지도 스타일 업데이트

기본 지도 스타일은 setStyle 함수를 사용하고 style 옵션을 설정하여 다른 기본 지도 스타일로 변경하거나 스타일 옵션을 더 추가하여 업데이트할 수 있습니다.

다음 코드에서는 지도 인스턴스가 로드된 후 setStyle 함수를 사용하여 지도 스타일이 grayscale_dark에서 satellite로 업데이트됩니다.

map.setStyle({ style: 'satellite' });

맵 로드 프로세스 후에 설정된 위성 스타일을 보여 주는 스크린샷.

스타일 선택 컨트롤 추가

스타일 선택 컨트롤은 최종 사용자가 기본 스타일을 전환하는 데 사용할 수 있는 플라이아웃 패널과 사용하기 쉬운 단추를 제공합니다.

스타일 선택에는 icon 및 list의 두 가지 레이아웃 옵션이 있습니다. 또한 스타일 선택을 사용하면 두 가지 스타일 선택 제어 style 옵션(light 및 dark)을 선택할 수 있습니다. 이 예에서 스타일 선택은 icon 레이아웃을 사용하고 아이콘 형식으로 기본 지도 스타일의 선택 목록을 표시합니다. 스타일 컨트롤 선택에는 다음과 같은 기본 스타일 세트가 포함되어 있습니다. ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. 스타일 선택 컨트롤 옵션에 대한 자세한 내용은 스타일 컨트롤 옵션을 참조하세요.

다음 이미지는 icon 레이아웃에 표시된 스타일 선택기 컨트롤을 보여 줍니다.

다음 이미지는 list 레이아웃에 표시된 스타일 선택기 컨트롤을 보여 줍니다.

스타일 선택 목록 레이아웃

Important

기본적으로 스타일 선택 컨트롤은 Azure Maps Gen1(S0) 가격 책정 계층에서 사용할 수 있는 모든 스타일을 나열합니다. 이 목록의 스타일 수를 줄이려면 목록에 표시할 스타일의 배열을 스타일 선택의 mapStyle 옵션에 전달합니다. Gen1(S1) 또는 Gen2 가격 책정 계층을 사용 중이고 사용 가능한 모든 스타일을 표시하려면 스타일 선택기의 mapStyles 옵션을 "all"로 설정합니다.

Azure Maps Gen1 가격 책정 계층 사용 중지

Gen1 가격 책정 계층은 이제 더 이상 사용되지 않으며 26/9/15에 사용 중지됩니다. Gen2 가격 책정 계층은 Gen1(S0 및 S1 모두) 가격 책정 계층을 대체합니다. Azure Maps 계정에 Gen1 가격 책정 계층이 선택된 경우 사용 중지되기 전에 Gen2 가격 책정 계층으로 전환할 수 있습니다. 그렇지 않으면 자동으로 업데이트됩니다. 자세한 내용은 Azure Maps 계정의 가격 책정 계층 관리를 참조하세요.

다음 코드는 기본값인 mapStyles 기본 스타일 목록을 재정의하는 방법을 보여 줍니다. 이 예제에서는 mapStyles 옵션을 설정하여 스타일 선택기 컨트롤에 의해 표시될 기본 스타일을 나열합니다.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});

레이아웃 속성 집합이 목록으로 설정된 스타일 선택 컨트롤이 있는 맵을 보여 주는 스크린샷.